Widget Customization

How to Customize Layout Settings for Your Event Widget

The Layout Settings tab allows you to control how your events are displayed on desktop and mobile devices. With various layout styles, you can ensure your widget complements your brand while delivering an intuitive experience for your attendees.

Step by Step Guide

  1. Go to the Main Event Page.
  2. Click the "Design Widget" button.
  3. Navigate to the "Layout" tab in the left sidebar.

Options in Layout Settings:Desktop Layout (New):

  1. List 1:
    • Steps: Select the thumbnail for "List 1."
    • Effect: Displays events in a simple list with essential details.
  2. List 2:
    • Steps: Select the thumbnail for "List 2."
    • Effect: Enhanced list view showing additional event details.
  3. List 3:
    • Steps: Select the thumbnail for "List 3."
    • Effect: Comprehensive list view with all event details.
  4. Vertical:
    • Steps: Select the thumbnail for "Vertical."
    • Effect: Stacks event cards vertically for easy scrolling.
  5. 2 Columns:
    • Steps: Select the thumbnail for "2 Columns."
    • Effect: Displays events in a two-column grid layout.
  6. 3 Columns:
    • Steps: Select the thumbnail for "3 Columns."
    • Effect: Displays events in a three-column grid layout.
  7. Checkout Only:
    • Steps: Select the thumbnail for "Checkout Only."
    • Effect: Simplifies the display, focusing on ticket purchasing.
  8. Map:
    • Steps: Select the thumbnail for "Map."
    • Effect: Uses a location-based display with an event map.
  9. Calendar:
    • Steps: Select the thumbnail for "Calendar."
    • Effect: Displays events in a calendar-style layout.

Mobile Layout (New):

  1. Stack 1:
    • Steps: Select the thumbnail for "Stack 1."
    • Effect: Basic stacked mobile view for event cards.
  2. Stack 2:
    • Steps: Select the thumbnail for "Stack 2."
    • Effect: Enhanced stacked mobile view with additional details.
  3. List 1:
    • Steps: Select the thumbnail for "List 1."
    • Effect: Compact list layout optimized for mobile screens.
  4. List 2:
    • Steps: Select the thumbnail for "List 2."
    • Effect: Detailed list layout for mobile screens.
  5. Checkout Only:
    • Steps: Select the thumbnail for "Checkout Only."
    • Effect: Focuses on a streamlined purchase experience for mobile users.