Event Grid Widget

Overview

The Zozo Event Grid widget displays events in a modern, responsive grid layout using Elementor. It provides extensive query options, allowing you to display events based on categories, organizers, locations, labels, tags, dates, and more.

The widget also supports multiple loading methods, including Load More Button, Infinite Scroll, and Pagination, making it suitable for event directories, conference websites, community portals, and business event pages.

---

General Settings

Overview

The General section contains basic widget options used to customize the grid container.

---

Extra Class

Add one or more custom CSS classes to the widget.

This allows developers and designers to apply custom styling without modifying the plugin files.

Example

featured-events
conference-grid
homepage-events

Multiple classes can be separated with spaces.

---

Query Settings

Overview

The Query section controls which events are displayed inside the grid.

Using these options, you can filter events by:

• Date
• Organizer
• Location
• Category
• Tag
• Label
• Individual Events
• Event Status
• Sorting Order

---

Events Per Page

Specify how many events should be displayed in the grid.

Example

10

Displaying fewer events improves loading speed, while larger values reduce the need for pagination.

---

Excerpt Length

Control how many words are displayed in each event summary.

Example

15

A shorter excerpt creates compact event cards, while a longer excerpt provides more information.

---

Start Date

Display only events starting on or after the selected date.

This filter is useful for:

• Upcoming Events
• Seasonal Events
• Limited Campaigns

Leave empty to display events from any date.

---

End Date

Display only events occurring before the selected end date.

This allows you to create event listings for specific periods such as:

• This Month
• This Year
• Upcoming Week
• Holiday Events

---

Organizer Filter

Display events from one or more specific organizers.

You can select multiple organizers.

Example:

• John Smith
• Marketing Team
• Conference Committee

---

Exclude Organizer

Hide events created by selected organizers.

Useful when excluding internal or archived organizers from public listings.

---

Location Filter

Display events from selected locations.

Multiple locations can be selected.

Examples:

• New York
• London
• Conference Hall A
• Virtual Events

---

Exclude Location

Hide events from selected locations.

Useful when creating regional event listings.

---

Category Filter

Display events belonging to selected event categories.

Examples:

• Conference
• Workshop
• Webinar
• Festival

Multiple categories may be selected.

---

Exclude Categories

Exclude selected categories from the event listing.

Useful when displaying only specific event types.

---

Tag Filter

Display events containing selected tags.

Examples:

• Business
• Technology
• Education
• Marketing

---

Exclude Tags

Hide events assigned to selected tags.

This helps create more focused event listings.

---

Label Filter

Display events using selected event labels.

Examples:

• Featured
• Free
• Premium
• Popular

---

Exclude Labels

Hide events assigned to specific labels.

Useful when excluding promotional or expired labels.

---

Include Events

Display only selected individual events.

This option ignores unrelated events and creates a manually curated event list.

Ideal for:

• Featured Events
• Homepage Sections
• Landing Pages

---

Exclude Events

Hide selected events from the grid.

Useful when temporarily removing events without deleting them.

---

Order By

Choose how events should be sorted.

Common options include:

• Event ID
• Event Date
• Title
• Publish Date
• Menu Order
• Random

Sorting helps organize event listings according to your requirements.

---

Show Past Events

Choose whether past events should appear in the grid.

Options

• Yes
• No

Default: No

Enable this option when displaying historical event archives.

---

Order

Choose the display order.

Available Options

• Ascending
• Descending

Examples:

Ascending

Oldest events first.

Descending

Newest or latest events first.

---

Load More Options

Overview

Choose how visitors browse additional events after the initial grid has loaded.

Supported loading methods include:

• None
• Button
• Infinite Scroll
• Pagination

---

Load More Type

Select the preferred loading method.

None

Displays only the configured number of events.

No additional events are loaded.

---

Button

Displays a Load More button beneath the event grid.

Visitors can click the button to load additional events without refreshing the page.

---

Infinite Scroll

Automatically loads additional events as visitors scroll down the page.

This creates a smooth browsing experience and is ideal for large event directories.

---

Pagination

Displays numbered page navigation.

Examples:

Previous   1   2   3   Next

Suitable for websites that require traditional navigation.

---

Previous Icon

Choose the icon displayed for the Previous pagination button.

Examples include:

• Left Arrow
• Chevron Left
• Angle Left

This option is available only when Pagination is selected.

---

Next Icon

Choose the icon displayed for the Next pagination button.

Examples include:

• Right Arrow
• Chevron Right
• Angle Right

This option is available only when Pagination is selected.

---

Best Practices

For the best Grid Widget experience:

• Display between 6 and 12 events per page for balanced performance.
• Use Category and Location filters to create targeted event sections.
• Display only upcoming events on homepages.
• Enable Infinite Scroll for large event directories.
• Use Pagination for archive pages and SEO-friendly navigation.
• Keep excerpts concise for a clean grid layout.
• Combine multiple filters to build highly customized event listings.

---

Notes

• The Grid Widget works only with Event Builder event posts.
• Multiple filters can be combined to create advanced event queries.
• Empty filters are ignored automatically.
• Load More, Infinite Scroll, and Pagination use AJAX for smooth loading.
• Pagination icons are displayed only when the Pagination loading type is selected.
• The widget is fully responsive and compatible with Elementor’s responsive controls.
• Additional styling options are available under the Style tab in Elementor.