Wix Events: Changing the Event List Layout

6 min read

The Event List is where you display your event or list of events to site visitors. First select whether you want to display one event or multiple events, then you can select your favorite layout.

In this article, learn more about:

Layouts for multiple events

If you're displaying multiple events on your site, you can choose between a grid layout,

side-by-side layout,

list layout,

...or, if you host lots of events, you may find it more convenient to display them using the calendar layout.

Each layout is customizable, so you can get the look that works for your business.

Layouts for a single event

Note:

Single event layout options are not currently available in Editor X.

If you're displaying a single event on your site, you can choose the Full layout which includes the event image and information.

Alternatively, you can add any content you want to the site page itself and include a button by selecting the Button layout. The button directs site visitors to RSVP or buy tickets.

Tip:

Learn how to upload and customize images so they display properly.

Selecting and customizing a layout

Start by selecting whether you want to display a single event or multiple events. You can make this selection in the Display Events tab of the Settings panel.

Once that's done, go to the Layout tab to select a specific layout and customize it.

To customize your layout:

Click the Wix Events app in the Editor.
Click the Settings icon .
Click the Layout tab.
Choose what you want to do next:

Customizing multiple events layouts

Select a layout and customize it using the available options:

Grid:
- Cards per row: Set the the number of events in each row.
- Spacing: Customize the spacing between events.
- Image ratio: Select a 1:1 (square) or 16:9 image ratio.
- Resize options: Crop images that don't fit or resize them to fit.
- Image opacity: Set the opacity level for the event image.
- Color behind image: Select the color behind the image.
- Time & Location layout: Display all the info (Full), or display all the info only when a guest hovers over it.
- Align: Align text left, right, or center.
List:
- Strip Margins: Adjust the spacing between events.
- Image ratio: Select a 1:1 (square) or 16:9 image ratio.
- Resize options: Crop images that don't fit or resize them to fit.
- Image opacity: Set the opacity level for the event image.
- Color behind image: Select the color behind the image.
Side by Side:
- Card Margins: Adjust the spacing between events.
- Select Layout: Display images on the left, right, or alternating left and right.
- Proportions: Adjust how much space the image takes up.
- Resize options: Crop images that don't fit or resize them to fit.
- Image opacity: Set the opacity level for the event image.
- Color behind image: Select the color behind the image.
- Time &Location Layout: Display all the info (Full), or display all the info only when a guest hovers over it.
- Align: Align text left, right, or center.
Calendar: Events are displayed in a calendar format.
- Start week on: Select the calendar's first day of the week.
- Image ratio: Select a 1:1 (square) or 16:9 image ratio.
- Resize options: Crop images that don't fit or resize them to fit.
- Image opacity: Set the opacity level for the event image.
- Color behind image: Select the color behind the image.

Tip: Go to the Display, Text, and Design tabs for more customization options.

Customizing single event layouts

Customizing for the mobile view

Note:

These customizations are not available in Editor X.

Customize how your events look when viewed on a mobile device. Start by choosing one of the 2 layouts that are optimized for mobile devices, and then customize the image display, alignment, and spacing.

Changes you make in the mobile view don't change the desktop display.

To customize your mobile layout:

Go to the Wix Events app in the Editor.
Switch to mobile in your Editor:
- Wix Editor: Click the Switch to Mobile icon at the top of the Editor.
- Editor X: Click the Mobile breakpoint at the top of the Editor.

Select the Wix Events app.
Click the Settings icon .
Click the Layout tab.
Customize the layout using any of these options:
- Choose list layout: Select a layout.
- Event card spacing: Customize the spacing between events.
- Image ratio: Select a 1:1 (square) or 16:9 image ratio.
- Resize options: Crop images that don't fit or resize them to fit.
- Image opacity: Set the opacity level for the event image.
- Color behind image: Select the color behind the image.
- Text Alignment: Align text left, right, or center.

Did this help?

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.

Get Matched