Events Widget

Events Widget

Last updated 01.13.25

The Events widget is an application to automatically display event information, including photos, date and summary, by date. This widget can live on one or multiple pages displaying the events data in various transformations. For events to display they must be added individually via the Events Page Type.  

Add Events Widget to the page

1. Select where on the page you would like the widget to appear. 
2. Click on the blue plus add widget icon   
3. Select the Events widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Events Properties

5. In the Events Properties pop up, select the file path to the page on the site index events are nested beneath, add the number of events displayed and the visual style of information presentation. These include options with or without a thumbnail image. 
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Events Widget

Hover over the Events widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Events Widget

Hover over the Events widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Events Widget Properties

PROPERTYDESCRIPTION
Source: Current Site Events PathThe user can select a page, subpage or folder that may contain the events
Max Items DisplayedEnter a number for the maximum number of events to display
Items per row (Medium screens)Enter number of items per row - 3-4 recommended for tablet
Transformation NameA user can select from the following transformations:
• Image, Title, Date, & Summary
• Image, Title, & Summary
• Title, Date, & Summary

Examples

Events Widget using the Image, Title, Date & Summary Transformation

Note this example is full page width on all devices. The images will scale smaller if the grid layout section is set to a percentage of the page width.

Events Widget using the Image, Title, Date & Summary Transformation

Note this example is set in a grid section layout at 66% on desktop and tablet, full-width on mobile. The event thumbnail images scale down at this size.

Events Widget using the Image, Title & Summary Transformation

Note this example is set in a grid section layout at 66% on desktop and tablet, full-width on mobile. The event thumbnail images scale down at this size.


Events Widget using the Title, Date & Summary Transformation

Note this example is set in a grid section layout at 33% on desktop and tablet, full-width on mobile. The transformation without images is helpful when a smaller page element is needed.