Overview

The Zozo Event Masonry widget displays events in a dynamic masonry layout using Elementor. Unlike a traditional grid, the masonry layout automatically arranges event cards with varying heights to create a modern, space-efficient design.

This widget includes powerful filtering and query options, allowing you to display events based on organizers, locations, categories, tags, labels, date ranges, or individual events. It also supports AJAX Load More, Infinite Scroll, Pagination, and Isotope Masonry for smooth and responsive browsing.

The Masonry widget is ideal for event directories, conferences, exhibitions, festivals, portfolios, and modern event websites.

---

General Settings

Overview

The General section contains basic configuration options for the Masonry widget.

---

Extra Class

Add one or more custom CSS classes to the widget.

This allows you to apply custom CSS styling without modifying the plugin.

Example

conference-masonry
featured-events
homepage-events

Multiple classes can be separated using spaces.

---

Query Settings

Overview

The Query section determines which events are displayed inside the masonry layout.

You can filter events using various criteria to build highly customized event listings.

---

Events Per Page

Specify how many events should be displayed initially.

Example:

12

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

---

Excerpt Length

Specify how many words should be displayed in each event summary.

Short excerpts create compact cards, while longer excerpts provide more event information.

---

Start Date

Display only events occurring on or after the selected date.

Useful for:

• Upcoming Events
• Monthly Events
• Seasonal Campaigns
• Future Conferences

Leave blank to display all events.

---

End Date

Display only events occurring before the selected end date.

Useful for displaying:

• Current Month Events
• Holiday Events
• Annual Conferences
• Limited-Time Campaigns

---

Organizer Filter

Display events created by one or more selected organizers.

Multiple organizers can be selected.

---

Exclude Organizer

Hide events created by selected organizers.

Useful for excluding internal or archived organizers.

---

Location Filter

Display events from selected locations.

Examples include:

• New York
• London
• Online
• Main Hall

---

Exclude Location

Hide events from selected locations.

Useful for regional event listings.

---

Category Filter

Display only events belonging to selected categories.

Examples include:

• Conference
• Webinar
• Workshop
• Seminar

---

Exclude Categories

Hide events assigned to selected categories.

Useful when creating specialized event pages.

---

Tag Filter

Display events assigned to selected tags.

Examples:

• Business
• Education
• Technology
• Marketing

---

Exclude Tags

Hide events containing selected tags.

---

Label Filter

Display events assigned to selected labels.

Examples:

• Featured
• Free
• Premium
• Popular

---

Exclude Labels

Hide events assigned to selected labels.

---

Include Events

Display only selected individual events.

Perfect for:

• Homepage Featured Events
• Landing Pages
• Highlighted Conferences

---

Exclude Events

Hide selected events without deleting them.

---

Order By

Choose how events should be sorted.

Available sorting methods include:

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

---

Show Past Events

Choose whether completed events should be displayed.

Options

• Yes
• No

Default: No

Enable this option to display archived events.

---

Order

Select the display order.

Available Options

• Ascending
• Descending

Ascending displays older events first, while Descending displays the newest events first.

---

Load More Options

Overview

Choose how visitors can browse additional events.

Available loading methods include:

• None
• Load More Button
• Infinite Scroll
• Pagination

---

Load More Type

None

Displays only the configured number of events.

---

Load More Button

Displays a Load More button beneath the masonry layout.

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

---

Infinite Scroll

Automatically loads more events while visitors scroll down the page.

Ideal for large event directories.

---

Pagination

Displays numbered page navigation.

Example:

Previous   1   2   3   Next

Recommended for archive pages and structured navigation.

---

Previous Icon

Choose the icon used for the Previous pagination button.

Examples:

• Left Arrow
• Chevron Left
• Angle Left

Available only when Pagination is selected.

---

Next Icon

Choose the icon used for the Next pagination button.

Examples:

• Right Arrow
• Chevron Right
• Angle Right

Available only when Pagination is selected.

---

Masonry Layout

Overview

Unlike a standard grid, the Masonry layout automatically positions event cards based on their content height.

This creates:

• Better use of available space
• Modern Pinterest-style layouts
• Balanced event presentation
• Responsive card positioning

The layout automatically adjusts as events are loaded through AJAX or Infinite Scroll.

---

Notes

• The Masonry Widget displays only Event Builder events.
• The layout automatically reorganizes itself as new events are loaded.
• Multiple query filters can be combined for advanced event listings.
• Empty filters are ignored automatically.
• AJAX is used for Load More, Infinite Scroll, and Pagination.
• The widget uses Isotope Masonry for responsive positioning.
• Fully responsive across desktop, tablet, and mobile devices.
• Additional typography, spacing, colors, borders, and card styling options are available under the Style tab in Elementor.