Skip to main content
Event panel widget

How to display events in a customised list or grid on your website.

Clare Wade avatar
Written by Clare Wade
Updated over a year ago

What is an event panel?

An event panel is a way of displaying a number of events with the titles, summaries and images. When a customer clicks an event title or image, they are redirected to the relevant event page. Event panels have a range of settings that can be used to customise the arrangement of the events, the appearance of the event image and the appearance and behaviour of the scroll-triggered animation.

Once an event panel has been added, it can then be displayed on your website by adding it to the content of a row column.

How do I add an event panel?

In the admin area

For an event panel that displays the events in individual rows:

  1. Go to Website > Widgets.

  2. Click the Add button in the top right.

  3. Click the Event panel icon.

  4. Enter a Title.

  5. Optionally, enter a Number of events.

  6. Optionally, select a Category.

  7. Optionally, select a Tag.

  8. Tick/un-tick Show image.

  9. Tick/un-tick Show date.

  10. Tick/un-tick Show venue.

  11. Tick/un-tick Show timezone.

  12. Tick/un-tick Show low tickets.

  13. Tick/un-tick Show summary.

  14. Select the List option from the listing arrangement Layout drop-down menu.

  15. Select a listing arrangement Horizontal layout.

  16. Optionally, select a listing image Aspect ratio.

  17. Optionally, enter a listing image Minimum width.

  18. Optionally, enter a listing image Maximum width.

  19. Optionally, select a listing animation Type.

  20. Enter a listing animation Duration.

  21. Tick/un-tick listing animation Only play the animation once.

  22. Click the Add button.

For an event panel that displays a number of events per row:

  1. Go to Website > Widgets.

  2. Click the Add button in the top right.

  3. Click the Event panel icon.

  4. Enter a Title.

  5. Optionally, enter a Number of events.

  6. Optionally, select a Category.

  7. Optionally, select a Tag.

  8. Tick/un-tick Show image.

  9. Tick/un-tick Show date.

  10. Tick/un-tick Show venue.

  11. Tick/un-tick Show timezone.

  12. Tick/un-tick Show low tickets.

  13. Tick/un-tick Show summary.

  14. Select the Grid option from the listing arrangement Layout drop-down menu.

  15. Select a listing arrangement Orientation.

  16. Select a listing arrangement Horizontal layout*.

  17. Enter a listing arrangement Maximum per row.

  18. Enter a listing arrangement Minimum width.

  19. Optionally, select a listing image Aspect ratio.

  20. Optionally, enter a listing image Minimum width*.

  21. Optionally, enter a listing image Maximum width*.

  22. Optionally, enter a listing image Maximum height**.

  23. Optionally, select a listing animation Type.

  24. Enter a listing animation Duration.

  25. Tick/un-tick listing animation Only play the animation once.

  26. Click the Add button.

You can now add this widget to your website but it will only be visible if it contains published events so it's important to ensure that you have some published events available.

* Only available if the Listing orientation is set to Horizontal.

** Only available if the Listing orientation is set to Vertical.

How do I edit an event panel?

In the admin area

  1. Go to Website > Widgets.

  2. Find the event panel you are looking for and click the Edit button in the Options column.

  3. Edit the event panel's details.

  4. Click the Update button.

How do I delete an event panel?

In the admin area

  1. Go to Website > Widgets.

  2. Find the event panel you are looking for and click the Delete button in the Options column.

  3. Click the Delete button to confirm.

How do the settings affect the appearance of an event panel?

The range of customisation settings available depends on which listing arrangement layout option is used.

For an event panel using the List option:

  • Listing arrangement horizontal layout - Changes the ratio of the text and the image.

  • Listing image aspect ratio - Changes how the images are cropped and sized.

  • Listing image minimum width - Sets a minimum image width to prevent the image from getting too narrow.

  • Listing image maximum width - Sets a maximum image width to prevent the image from getting too wide.

  • Listing animation type - Changes which animation will play when a customer scrolls past the event panel.

  • Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.

  • Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the event panel or to play every time the customer scrolls past the event panel.

For an event panel using the Grid option:

  • Listing arrangement orientation - Changes the orientation of the events to vertically (image above, text below) or horizontally (image on the left, text on the right).

  • Listing arrangement horizontal layout* - Changes the ratio of the text and the image.

  • Listing arrangement maximum per row - Sets the maximum number of events you want to display per row in the grid. (e.g. 3 per row, 4 per row, etc).

  • Listing arrangement minimum width - Sets the minimum width of an event. This determines when the events will wrap onto the next row in the grid when the space available is reduced.

  • Listing image aspect ratio - Changes how the images are cropped and sized.

  • Listing image minimum width* - Sets a minimum image width to prevent the image from getting too narrow.

  • Listing image maximum width* - Sets a maximum image width to prevent the image from getting too wide.

  • Listing image maximum height** - Sets a maximum image height to prevent the image from getting too tall.

  • Listing animation type - Changes which animation will play when a customer scrolls past the event panel.

  • Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.

  • Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the event panel or to play every time the customer scrolls past the event panel.

* Only available if the listing Orientation is set to Horizontal.

** Only available if the listing Orientation is set to Vertical.

Did this answer your question?