Wix Events: Changing the Event List Layout
The Event List showcases your events for site visitors. Whether you're displaying a single event or multiple, you can choose from various layouts to present your events in an engaging way, enhancing visitor experience.In this article, learn more about:
Single event layout options Multiple event layout options Customization for the mobile viewCustomizing the layout for a single eventIf you're showcasing a single event on your site, there are 2 available layouts you can choose from: 
The Full layout includes the event image and all relevant information for a comprehensive display.  The Button layout directs visitors to RSVP or purchase tickets.Note:Currently, customizing the layout for a single event is only available in the Wix Editor.To customize a layout for a single event:
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.  Choose your desired layout:
    
Full: Displays all your event details, including image, time, and location. You can customize the appearance of each detail. Button: This layout displays only the button. You can modify its text and design using the Text and Design tabs, adjusting elements like color, size, and style.  Tip:Learn how to add rich media content to an event.Choosing the layout for multiple eventsWhen choosing to display multiple events on a site page, you can customize the layout using a variety of options.For instance, you can choose a calendar layout to present events in a structured and chronological manner, providing visitors with an organized view of upcoming activities.To customize a layout for multiple events:Wix EditorStudio Editor
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:GridA grid layout organizes events in rows and columns for a clean, organized appearance, ensuring easy browsing with uniformly placed event cards.
Select Grid. Choose what to customize in your grid:
    
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.
  ListList layout organizes items in a linear format, making it easy to browse through structured content vertically or horizontally.
Select List.  Choose what to customize in your list:
    
Strip Margins: Adjust 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.
  Side by sideSide by side layout displays events horizontally, enabling easy comparison and simultaneous viewing of related content.
Select Side by side.  Choose what to customize side by side:
    
Card Margins: Adjust the spacing between events. Events per page: Set the number of events to display per page. Image layout: Customize image appearance and layout options, including resizing, opacity, and background color selection. Text layout: Choose between displaying all information continuously or only when a guest hovers over it.
  CalendarThe calendar layout displays events in a calendar format, making it convenient for hosting numerous events due to its organized presentation.
Select Calendar. Click the Start week on drop-down and select the calendar's first day of the week. Customize the Image layout options for adjusting the appearance and presentation of event images (e.g. resize options and choosing a background color behind the image).

Go to your 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. Click the Layout tab. Select and customize the layout from the available options:GridA grid layout organizes events in rows and columns for a clean, organized appearance, ensuring easy browsing with uniformly placed event cards.
Select Grid. Choose what to customize in your grid:
    
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.
  ListList layout organizes items in a linear format, making it easy to browse through structured content vertically or horizontally.
Select List.  Choose what to customize in your list:
    
Strip Margins: Adjust 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.
  Side by Side: Side by side layout displays events horizontally, enabling easy comparison and simultaneous viewing of related content.
Select Side by side.  Choose what to customize side by side:
    
Card Margins: Adjust the spacing between events. Events per page: Set the number of events to display per page. Image layout: Customize image appearance and layout options, including resizing, opacity, and background color selection. Text layout: Choose between displaying all information continuously or only when a guest hovers over it.
  CalendarThe calendar layout displays events in a calendar format, making it convenient for hosting numerous events due to its organized presentation.
Select Calendar. Click the Start week on drop-down and select the calendar's first day of the week. Customize the Image layout options for adjusting the appearance and presentation of event images (e.g. resize options and choosing a background color behind the image).Setting the layout for the mobile viewYou can set the mobile layout from both the Wix Editor and Studio Editor. Desktop layout settings  apply to mobile, but you can customize the mobile view separately.In the Wix Editor, select from 2 mobile-optimized layouts to adjust how images appear. In the Studio Editor, you can edit layouts for both tablet and mobile breakpoints.Notes:
Mobile layout changes don't affect the desktop view in your editor.  Tablet layout changes, available only in Studio Editor, apply to desktop. To customize the layout for mobile view:Wix EditorStudio Editor
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:GridA grid layout organizes events in rows and columns for a clean, organized appearance, ensuring easy browsing with uniformly placed event cards.
Select Grid.  Choose what to customize in your grid:
    
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.
  CompactThe compact layout minimizes the space and optimizes efficiency, by placing event details closely together without wasting space.
Select Compact. Choose what to customize:
    
List Spacing: Customize the spacing between events. Events per page: Set the number of events to display per page. Image layout: Customize image appearance and layout options, including resizing, opacity, and background color selection. Text layout: Modify the alignment of your event details text
  
Go to your 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:Grid (Available on mobile and tablet)A grid layout organizes events in rows and columns for a clean, organized appearance, ensuring easy browsing with uniformly placed event cards.
Select Grid.  Choose what to customize in your grid:
    
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: Modify the alignment of your event details text.  
Compact (Mobile only)The compact layout minimizes the space and optimizes efficiency, by placing event details closely together without wasting space.
Select Compact. Choose what to customize:
    
List Spacing: Customize the spacing between events. Events per page: Set the number of events to display per page. Image layout: Customize image appearance and layout options, including resizing, opacity, and background color selection. Text layout: Modify the alignment of your event details text
  List (Tablet only)List layout organizes items in a linear format, making it easy to browse through structured content vertically or horizontally.
Select List.  Choose what to customize in your list:
    
Strip Margins: Adjust 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.
  Side by side (Tablet only)Side by side layout displays events horizontally, enabling easy comparison and simultaneous viewing of related content.
Select Side by side.  Choose what to customize side by side:
    
Card Margins: Adjust the spacing between events. Events per page: Set the number of events to display per page. Image layout: Customize image appearance and layout options, including resizing, opacity, and background color selection. Text layout: Choose between displaying all information continuously or only when a guest hovers over it.

  Calendar (Tablet only)The calendar layout displays events in a calendar format, making it convenient for hosting numerous events due to its organized presentation.
Select Calendar. Click the Start week on drop-down and select the calendar's first day of the week. Customize the Image layout options for adjusting the appearance and presentation of event images (e.g. resize options and choosing a background color behind the image).