Overview

The Zozo Event Masonry Filter widget displays events in a responsive masonry layout with an interactive category filter. Visitors can instantly filter events without reloading the page, creating a fast and engaging browsing experience.

The widget supports advanced event queries, customizable layouts, overlay effects, responsive columns, and multiple display options. It is ideal for conference websites, exhibitions, portfolios, festivals, and event directories.

---

General Settings

Overview

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

---

Extra Class

Add one or more custom CSS classes to the widget.

This allows you to apply your own custom styling without editing plugin files.

Example

featured-events
conference-filter
homepage-events

Multiple classes can be separated using spaces.

---

Query Settings

Overview

The Query section controls which events appear in the masonry layout.

---

Events Per Page

Specify the number of events displayed initially.

Example:

12

Lower values improve loading performance, while higher values display more events at once.

---

Excerpt Length

Control how many words are displayed in the event summary.

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

---

Filter “All” Label

Customize the text displayed for the default filter button.

Example:

All Events
Everything
Browse All

This button resets the filter and displays every available event.

---

Grid Gutter

Set the spacing between masonry items.

Increasing the gutter creates more whitespace between event cards, while smaller values create a compact layout.

---

Filter Categories

Choose which event categories should appear as filter buttons.

Only the selected categories will be displayed in the filter navigation.

---

Organizer Filter

Display events from selected organizers.

You may select one or multiple organizers.

---

Exclude Organizer

Hide events created by selected organizers.

---

Location Filter

Display events from selected locations.

Examples include:

• New York
• London
• Online
• Conference Hall

---

Exclude Location

Exclude events from selected locations.

---

Category Filter

Display events from selected categories.

Examples:

• Conference
• Workshop
• Webinar
• Meetup

---

Exclude Categories

Hide events belonging to selected categories.

---

Tag Filter

Display events assigned to selected tags.

Examples:

• Business
• Education
• Technology
• Marketing

---

Exclude Tags

Hide events assigned to selected tags.

---

Label Filter

Display events assigned to selected labels.

Examples:

• Featured
• Popular
• Free
• Premium

---

Exclude Labels

Hide events assigned to selected labels.

---

Order By

Choose how events should be sorted.

Common options include:

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

---

Show Past Events

Choose whether completed events should be displayed.

Options

• Yes
• No

Default: No

Enable this option to include archived events.

---

Order

Choose the sorting direction.

Options

• Ascending
• Descending

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

---

Layout Settings

Overview

The Layout section controls the appearance and structure of the masonry event cards.

---

Layout Style

Choose the overall layout style for displaying events.

Different layouts provide unique arrangements for event images and content.

---

Layout Variation

Select a predefined design variation.

Each variation offers a different visual presentation while maintaining the same event information.

---

Event Columns

Choose how many columns should be displayed.

Available layouts typically range from one to four columns depending on the screen size.

Responsive behavior automatically adjusts the layout for tablets and mobile devices.

---

Content Width

Control the width allocated to the event content.

Increasing the content width provides more space for titles and descriptions.

---

Event Content Settings

Overview

Choose which event information appears inside each masonry card.

---

Display Elements

You can enable or disable individual content items such as:

• Featured Image
• Event Date
• Event Title
• Event Time
• Event Location
• Organizer
• Event Categories
• Labels
• Excerpt
• Read More Button

Reordering these items changes the display order within each event card.

---

Overlay Content

Select which information should appear when the visitor hovers over an event image.

Typical overlay elements include:

• Event Title
• Event Date
• Location
• Read More Button
• Categories
• Organizer

---

Read More Button

Overview

Customize the action button displayed on each event card.

---

Button Text

Change the label displayed on the button.

Examples:

• Read More
• View Event
• Learn More
• Register Now

---

Button Icon

Choose an icon to display alongside the button text.

Examples include:

• Arrow
• Calendar
• Ticket
• Chevron

---

Icon Position

Choose whether the icon appears:

• Before Text
• After Text

---

Overlay Animation

Overview

The overlay animation creates interactive hover effects for event cards.

---

Enable Overlay Animation

Enable or disable image overlay animations.

When enabled, additional content smoothly appears while hovering over an event.

---

Animation Type

Choose how the overlay appears.

Depending on your selected style, available animations may include:

• Fade
• Slide
• Zoom
• Scale
• Rotate

---

Animation Speed

Control how quickly the animation plays.

Lower values create faster transitions, while higher values create smoother animation effects.

---

Interactive Filtering

Overview

The Masonry Filter widget includes AJAX-powered filtering.

Visitors can switch between categories instantly without refreshing the page.

Benefits include:

• Faster browsing
• Better user experience
• Cleaner navigation
• Improved engagement

---

Notes

• The Masonry Filter widget displays only Event Builder events.
• Filtering is performed using AJAX without reloading the page.
• Multiple query filters can be combined to create advanced event listings.
• Empty filters are ignored automatically.
• The masonry layout automatically rearranges event cards for optimal spacing.
• Fully responsive across desktop, tablet, and mobile devices.
• Additional typography, spacing, colors, borders, overlay styling, and animation controls are available under the Style tab in Elementor.