The information below will walk you through how to create a simple event item to use in your template built with the new template editor. This event item is simple to create and gives the event listing a better look than using standard text. Once you are finished you may save this as a "Favorite" so it can be used with the Complex Element in other templates.
The image below shows what will be created by following the instructions on this page:
- Add a Box element to your template where you would like the event item to appear. Add a background color to this “outer” box and add any margin here also. Using margin instead of padding is recommended for vertical spacing because padding will extend the background.
- Within the newly created Box element place a Multi-column element. Make the width of the left content block 60px. The width can vary depending on how large you would like the date box to appear. Note: This event item works best if the columns do not reorder on mobile. To turn off the default stacking of these columns on mobile, use the element control options on the right while actively working in the Multi-column element. Turn the mobile setting for reordering columns to “off”.
- Drop in a Box element into each column of the Multi-column element. You can adjust the padding and background colors for each of the boxes.
Video (adding the Box element)
Video (padding and background color for boxes)
- To add the date in the left column box, drop in two Text elements - one on top of the other. Now you can add the month and day to the left column.
- For the right column, repeat the same procedure for adding the event title and preview text. Drop two Text elements, one on top of the other within the right column box. You can then adjust font color, size, etc.
- The event box is done! Save the first box element added in step #1 (you may need to use the breadcrumb to navigate "up" in the nesting) as a Favorite in the element control area. You will then be able to add it to other templates with the Complex Element.