You can customize how you showcase your events to site visitors. Choose from different layouts to list your events or present them in a calendar view (monthly or weekly) to manage what visitors see and how they navigate your events.
Customizing the layout of events on desktop
For example, you can select a calendar layout to present events in a structured, chronological format, giving visitors an organized view of upcoming activities.
To customize a layout:
- Go to your editor.
- Go to the Events page:
- Click Pages & Menu
on the left side of the editor.
- Click Event Pages.
- Click your Events page.
- Click the event list element on your page.
- Click Settings.
- Click the Layout tab.
- Select and customize the layout from the available options:
Browse available layouts for displaying your events.
- Choose a layout:
- Grid: Organizes events in rows and columns for a clean, structured appearance. This layout makes browsing easy with uniformly placed event cards.
- List: Displays events in a linear format, allowing users to scroll through content in a clear vertical or horizontal sequence.
- Side by side: Places events next to each other horizontally, making it easy to compare and view related content at the same time.
- On image: Displays event details directly on top of an image, creating a visually engaging layout that highlights key information over the background.
- Choose what you want to customize:
Note: The customization options available vary depending on the layout you choose.
- Events per page: Set the number of events to display per page.
- Spacing: Customize the available spacing aspects between events such as Spacing between cards and Area margins.
- Image: Adjust the available options such as Image ratio and Resize options.
- Text: Customize the Time & location layout and available text alignment.
- Event badges: Decide on the placement of your event badge (e.g. On image or Event info).
The calendar layout displays events in a calendar format, making it convenient for hosting numerous events due to its organized presentation.
- Click the Calendar tab.
- Choose how to display your events:
- Monthly: Show all events for the selected month in one view.
- Weekly: Show events one week at a time for a more detailed view.
- Click the Start week on drop-down and select the calendar's first day of the week.
- Customize the available options:
- Header: Displays the calendar header, including the month or week title and navigation controls for moving between dates.
- Calendar: Appearance and behavior of the calendar grid where events are displayed.
- Day: How individual days appear in the calendar, including the layout and display of events within each day.
- Event details popup: Popup that appears when clicking an event, showing additional event information and details.
- Event badges: Decide on the placement of your event badge (e.g. on image or event info).
Customizing the layout of events on mobile
You can adjust the mobile layout directly from your editor. While desktop layout settings are applied automatically to mobile, you have the option to customize the mobile view independently to ensure the best experience on smaller screens.
To customize the layout for mobile view:
- Go to your editor.
- Go to the Events page:
- Click Pages & Menu on the left side of the editor.
- Click Event Pages.
- Click your Events page.
- Click the Switch to Mobile icon
at the top of the editor.
- Click the event list element on your page.
- Click Settings.
- Click the Layout tab.
- Select and customize the layout from the available options:
Browse available layouts for displaying your events.
- Choose a layout:
- Grid: Organizes events in rows and columns for a clean, structured appearance. This layout makes browsing easy with uniformly placed event cards.
- List: Displays events in a linear format, allowing users to scroll through content in a clear vertical or horizontal sequence.
- On image: Displays event details directly on top of an image, creating a visually engaging layout that highlights key information over the background.
- Customize the available options:
- Spacing: Customize the spacing between events.
- Events per page: Set the number of events to display per page.
- Image layout: Customize the appearance and presentation of event images, including resizing and choosing a background color behind the image
- Text layout: Choose between displaying all information continuously or only when a guest hovers over it.
- Strip Margins: Adjust the spacing between events.
- Event badges: Decide on the placement of your event badge (e.g. on image or event info).
The calendar layout displays events in a calendar format, making it convenient for hosting numerous events due to its organized presentation.
- Click the Calendar tab.
- Choose how to display your events:
- Monthly: Show all events for the selected month in one view.
- Weekly: Show events one week at a time for a more detailed view.
- Click the Start week on drop-down and select the calendar's first day of the week.
- Customize the available options:
- Event details popup: Popup that appears when clicking an event, showing additional event information and details.
- Header: Displays the calendar header, including the month or week title and navigation controls for moving between dates.
- Calendar: Appearance and behavior of the calendar grid where events are displayed.
- Day: How individual days appear in the calendar, including the layout and display of events within each day.
- Event badges: Decide on the placement of your event badge (e.g. on image or event info).
