Wix Events: Customizing the Layout of Your Events
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
When choosing to display multiple events on a site page, you can customize the layout using a variety of options.
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:
Wix 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:
List
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).
Calendar
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).
Studio Editor
Go to the Events page:
Click Pages
on the left side of the editor.
Click your Events page.
Click the pageapp element on your page.
Click Settings.
Click the Layout tab.
Select and customize the layout from the available options:
List
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).
Calendar
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).
Wix Harmony Editor
Click the Page dropdown at the top left of the page.
(In the Site Pages panel) Select the Events page under Event Pages.
Tip: Jump to the page you need by clicking the dropdown next to Site Pages and selecting Event Pages.
Click Explore Designs on the action bar.
Select the relevant design layout:
List: Displays events in a linear format, allowing users to scroll through content in a clear vertical or horizontal sequence.
Grid: Organizes events in rows and columns for a clean, structured appearance. This layout makes browsing easy with uniformly placed event cards.
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.
Monthly calendar: Show all events for the selected month in one view.
Weekly calendar: Show events one week at a time for a more detailed view.
Click the events element on your page.
Click the Settings icon
on the action bar.
Click the Layout tab.
Depending on the design layout you selected in step 5, customize the available options:
List, grid, side by side, on image
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).
Calendar
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.
Notes:
Changes made to the mobile design will not affect the desktop layout.
Tablet layout changes (available only in the Studio Editor) do apply to the desktop version.
To customize the layout for mobile view:
Wix 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:
List
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).
Calendar
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).
Studio Editor
Go to the Events page:
Click Pages
on the left side of the editor.
Click your Events page.
Click the Switch to Mobile
or Tablet
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:
List
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 (Tablet only): 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.
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).
Calendar
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).
Wix Harmony Editor
Click the Page dropdown at the top left of the page.
(In the Site Pages panel) Select the Events page under Event Pages. Tip: Jump to the page you need by clicking the dropdown next to Site Pages and selecting Event Pages.
Click the Mobile icon
at the top right of the page.
Click Explore Designs on the action bar.
Select the relevant design layout:
List: Displays events in a linear format, allowing users to scroll through content in a clear vertical or horizontal sequence.
Grid: Organizes events in rows and columns for a clean, structured appearance. This layout makes browsing easy with uniformly placed event cards.
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.
Monthly calendar: Show all events for the selected month in one view.
Weekly calendar: Show events one week at a time for a more detailed view.
Click the events element on your page.
Click the Settings icon
on the action bar.
Click the Layout tab.
Depending on the design layout you selected in step 6, customize the available options:
List, grid, side by side, on image
Cards per row: Set the number of events in each row.
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.
Events per page: Set the number of events to display per page.
Card Margins: Adjust the spacing between events.
Event badges: Decide on the placement of your event badge (e.g. on image or event info).
Calendar
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).
What's next?
Learn how to add rich media content to an event.
Need A Professional Website?
Contact Us Today!
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected