Wix Events: Customizing the Event List
Use the event list element to display your events in an eye-catching way that encourages site visitors to register. You can customize its design, choose which event details to show, and add informative ribbons to highlight important information. There are also separate settings for mobile so your event list element looks great on any screen.
Important:
The available customization options depend on your selections in different tabs of the Settings panel.
Customizing the event list
Customize your event list element to help attendees quickly understand event details such as the date, location, and availability. You can also show ribbons, guest avatars, and other elements to highlight important information.
To customize the event list:
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.
Choose what you want to customize:
Ribbons
Ribbons help event organizers and attendees quickly understand the status and availability of an event.
Click the Display tab.
Click Ribbons.
Click the relevant ribbon name and enable the Ribbon toggle:
Sold Out Ribbon: All tickets for the event are sold out.
RSVP Closed Ribbon: Registration is closed.
Join Waitlist Ribbon: Displayed when an RSVP event has a waitlist.
Membership Ribbon: The event is exclusive to members only.
Multiple Dates Ribbon: The event occurs on multiple dates.
Tip: Click the Text tab to edit the text on the available ribbons.
Event details / Additional event info
Click the Display tab.
Click the relevant toggles to choose what to show or hide:
Title: Show or hide the event title.
Load More button: Show or hide the button that lets visitors load more events.
Event image: Show or hide the event image.
Ribbons: Click to manage the ribbons shown on your events.
Event badges: Click to manage the badges shown on your events.
Countdown: Show or hide a countdown until the event starts.
Date: Show or hide the event date.
Location: Show or hide the event location.
Allow additional info: Show or hide extra event details. If enabled, choose what else to display:
Date: Show or hide the event date in the additional info section.
Location: Show or hide the event location in the additional info section.
Description: Show or hide the event description.
Guests: Show or hide the guest avatars.
Social share: Show or hide social sharing options.
Design
Customize the design of your event list to match your site’s look and highlight important event details.
Click the Design tab.
Click the relevant design elements to customize the following:
Text: Personalize the font style, size, color, and other text properties.
Ribbons: Draw attention to important aspects of the event such as:
Membership Ribbon: Displayed when a ticketed event has memberships connected.
Multiple Dates Ribbon: Displayed when an event has multiple dates.
Event badges: Customize the design of event badges to highlight details such as limited tickets and early bird pricing.
Countdown: Customize the countdown’s text, colors, border, and corners.
Button: Customize the appearance of buttons, including their shape, color, and text.
Image: Customize the appearance of the event image in the list.
Area background: Customize the background of the event list.
Additional info: Customize the appearance of extra event details, such as the date, location, description, and social sharing icons.
Tip:
Go to the Text tab to edit the default button text for RSVP events, ticketed events, or events that require no registration.
Studio Editor
Go to the Events page:
Click Pages
on the left side of the editor.
Click your Events page.
Click the Event List element on your page.
Click Settings.
Choose what you want to customize:
Ribbons
Ribbons help event organizers and attendees quickly understand the status and availability of an event.
Click the Display tab.
Click Ribbons.
Click the relevant ribbon name and enable the Ribbon toggle:
Sold Out Ribbon: All tickets for the event are sold out.
RSVP Closed Ribbon: Registration is closed.
Join Waitlist Ribbon: Displayed when an RSVP event has a waitlist.
Membership Ribbon: The event is exclusive to members only.
Multiple Dates Ribbon: The event occurs on multiple dates.
Event details / Additional event info
Click the relevant toggles to choose what to show or hide:
Title: Show or hide the event title.
Load More button: Show or hide the button that lets visitors load more events.
Event image: Show or hide the event image.
Ribbons: Click to manage the ribbons shown on your events.
Event badges: Click to manage the badges shown on your events.
Countdown: Show or hide a countdown until the event starts.
Date: Show or hide the event date.
Location: Show or hide the event location.
Allow additional info: Show or hide extra event details. If enabled, choose what else to display:
Date: Show or hide the event date in the additional info section.
Location: Show or hide the event location in the additional info section.
Description: Show or hide the event description.
Guests: Show or hide the guest avatars.
Social share: Show or hide social sharing options.
Design
Customize the design of your event list to match your site’s look and highlight important event details.
Click the Design tab.
Click the relevant design elements to customize the following:
Text: Adjust the font and color of event details such as the event name and date.
Ribbons: Set the font style and color for ribbons you display (e.g. Membership ribbon).
Event badges: Customize the design of event badges to highlight details such as limited tickets and early bird pricing.
Countdown: Customize the countdown’s text, colors, border, and corners.
Button: Customize the appearance of buttons, including their shape, color, and text.
Image: Customize the appearance of the event image in the list.
Area background: Customize the background of the event list.
Additional info: Customize the appearance of extra event details, such as the date, location, description, and social sharing icons.
Tip:
Go to the Text tab to edit the default button text for RSVP events, ticketed events, or events that require no registration.
Wix Harmony Editor
Click the Page dropdown at the top left of the page.
(In the Site Pages panel) Select the Events page.
Click the Events element on your page.
Customize the available design options:
Display event elements
Click the Display elements
icon on the action bar.
Choose which elements you want to display in Events:
Event list title: Show or hide the event title.
Event info: Show or hide event details such as the event image, date, and location.
Info shown on click: Show or hide extra event details that appear when visitors click for additional info (e.g. description, guests, and social share).
Ribbons: Click to manage the ribbons shown on your events (e.g. Sold Out, RSVP Closed).
Badges: Click to manage the badges shown on your events.
Countdown: Show or hide a countdown until the event starts.
Design
Customize the design of your event list to match your site’s look and highlight important event details.
Click the Settings icon
on the action bar.
Click the Design tab and choose what you want to customize:
Text: Adjust the font and color of event details such as the event name and date.
Ribbons: Set the font style and color for ribbons you display (e.g. Membership ribbon).
Event badges: Customize the appearance of priority badges.
Countdown: Customize the countdown’s text, colors, border, and corners.
Button: Customize the button design.
Image: Manage and customize images used in the event layout.
Area background: Customize the background of the event list.
Additional info: Customize the appearance of extra event details, such as the date, location, description, and social sharing icons.
Tip:
Go to Edit Text on the action bar to update text across your event list, including titles, buttons, links, event details, and ribbons.
Customizing the mobile view for your events
Customize your event list for mobile to keep events clear and easy to browse 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 design 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.
Choose what you want to customize:
Ribbons
Ribbons help event organizers and attendees quickly understand the status and availability of an event.
Click the Display tab.
Click Ribbons.
Click the relevant ribbon name and enable the Ribbon toggle:
Sold Out Ribbon: All tickets for the event are sold out.
RSVP Closed Ribbon: Registration is closed.
Join Waitlist Ribbon: Displayed when an RSVP event has a waitlist.
Membership Ribbon: The event is exclusive to members only.
Multiple Dates Ribbon: The event occurs on multiple dates.
Event details / Additional event info
Click the Display tab.
Click the relevant toggles to choose what to show or hide:
Title: Show or hide the event title.
Load More button: Show or hide the button that lets visitors load more events.
Event image: Show or hide the event image.
Ribbons: Click to manage the ribbons shown on your events.
Event badges: Click to manage the badges shown on your events.
Countdown: Show or hide a countdown until the event starts.
Date: Show or hide the event date.
Allow additional info: Show or hide extra event details. If enabled, choose what else to display:
Date: Show or hide the event date in the additional info section.
Location: Show or hide the event location in the additional info section.
Description: Show or hide the event description.
Guests: Show or hide the guest avatars.
Social share: Show or hide social sharing options.
Design
Customize the design of your event list to match your site’s look on mobile.
Click the Design tab.
Click the relevant design elements to customize the following:
Text: Adjust the font and color of event details such as the event name and date.
Ribbons: Set the font style and color for ribbons you display (e.g. Membership ribbon).
Event badges: Customize the design of event badges to highlight details such as limited tickets and early bird pricing.
Countdown: Customize the countdown’s text, colors, border, and corners.
Button and Links: Customize the appearance of buttons and links, including their shape, color, and text.
Image: Customize the appearance of the event image in the list.
Area background: Customize the background of the event list.
On click: Choose the font and color for clickable elements such as the event date and location.
Studio Editor
Go to the Events page:
Click Pages
on the left side of the editor.
Click your Events page.
Click the relevant breakpoint at the top of the editor.
Click the Event List element on your page.
Click Settings.
Choose what you want to customize:
Ribbons
Ribbons help event organizers and attendees quickly understand the status and availability of an event.
Click the Display tab.
Click Ribbons.
Click the relevant ribbon name and enable the Ribbon toggle:
Sold Out Ribbon: All tickets for the event are sold out.
RSVP Closed Ribbon: Registration is closed.
Join Waitlist Ribbon: Displayed when an RSVP event has a waitlist.
Membership Ribbon: The event is exclusive to members only.
Multiple Dates Ribbon: The event occurs on multiple dates.
Event details / Additional event info
Click the Display tab.
Click the relevant toggles to choose what to show or hide:
Title: Show or hide the event title.
Load More button: Show or hide the button that lets visitors load more events.
Event image: Show or hide the event image.
Ribbons: Click to manage the ribbons shown on your events.
Event badges: Click to manage the badges shown on your events.
Countdown: Show or hide a countdown until the event starts.
Date: Show or hide the event date.
Allow additional info: Show or hide extra event details. If enabled, choose what else to display:
Date: Show or hide the event date in the additional info section.
Location: Show or hide the event location in the additional info section.
Description: Show or hide the event description.
Guests: Show or hide the guest avatars.
Social share: Show or hide social sharing options.
Design
Customize the design of your event list to match your site’s look on mobile.
Click the Design tab.
Click the relevant design elements to customize the following:
Text: Adjust the font and color of event details such as the event name and date.
Ribbons: Set the font style and color for ribbons you display (e.g. Membership ribbon).
Event badges: Customize the design of event badges to highlight details such as limited tickets and early bird pricing.
Countdown: Customize the countdown’s text, colors, border, and corners.
Button and Links: Customize the appearance of buttons and links, including their shape, color, and text.
Image: Customize the appearance of the event image in the list.
Area background: Customize the background of the event list.
On click: Choose the font and color for clickable elements such as the event date and location.
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 the Settings icon
on the action bar.
Click the Design tab and choose what you want to customize:
Text: Adjust the font and color of event details such as the event name and date.
Ribbon: Set the font style and color for ribbons you display (e.g. Membership ribbon).
Event badges: Customize the design of event badges to highlight details such as limited tickets and early bird pricing.
Button and Links: Customize button design and link styles.
Image: Manage and customize images used in the event layout.
Area background: Customize the background of the event list.
On click: Choose the font and color for clickable elements such as the event date and location.
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