Grid View Settings

Overview

The Grid View Settings section allows you to customize how events are displayed in the Grid Layout. This layout presents events as responsive cards arranged in multiple columns, making it ideal for showcasing upcoming events in a modern and organized format.

You can control the layout structure, card elements, number of columns, events per page, button labels, and the overall appearance of grid cards including colors, backgrounds, and typography.

These settings apply globally to all Grid View layouts used throughout Event Builder.

---

Grid Section Order

Control which elements appear inside each event card and arrange them in your preferred order using drag-and-drop.

Available Elements

• Image
• Date Badge
• Title
• Excerpt
• Read More Button

Features

• Drag and drop to reorder elements.
• Disable any element you do not want to display.
• Changes are reflected immediately across all Grid View layouts.

This gives you complete flexibility over how each event card is structured.

---

Grid Columns

Choose how many event cards appear in each row.

Configuration

• Minimum: 1 Column
• Maximum: 6 Columns
• Default: 3 Columns

Recommendations

1 Column

Best for:

• Mobile layouts
• Detailed event listings

2 Columns

Suitable for:

• Tablets
• Medium-sized content areas

3 Columns

Recommended for most websites and desktop layouts.

4–6 Columns

Ideal for:

• Large screens
• Portfolio-style event listings
• High-density event displays

---

Events Per Page

Specify how many events should be displayed on each page before pagination or load-more functionality is applied.

Configuration

• Minimum: 1 Event
• Maximum: 10 Events
• Default: 3 Events

Displaying fewer events improves page loading speed, while higher values reduce the number of pages visitors need to browse.

---

Button Label

Customize the text displayed on the event action button.

Default:

Read More

Examples include:

• View Details
• Book Now
• Register
• Learn More
• Join Event
• Explore

Choose a label that best matches the purpose of your event page.

---

Grid Wrapper Background

Customize the background color of the entire Grid View section.

This setting affects the outer container surrounding all event cards.

A contrasting wrapper background helps visually separate the event listing from the rest of the page.

---

Grid Card Background

Customize the background color of each individual event card.

This setting affects every event displayed in the Grid View.

Choose a background color that complements your website design while maintaining good readability.

---

Title Color

Customize the color of event titles displayed inside the grid cards.

Available States

• Normal
• Hover

Using a hover color provides visual feedback when visitors move their cursor over clickable event titles.

---

Excerpt Color

Customize the color of the event summary or excerpt displayed beneath the title.

This setting affects:

• Short Event Description
• Event Summary
• Introductory Content

Use a readable color that contrasts well with the card background.

---

Date Badge Background

Customize the background color of the event date badge.

The date badge highlights important event dates and helps visitors quickly identify upcoming events.

Using an accent color makes the badge more noticeable.

---

Date Badge Text Color

Customize the text color displayed inside the event date badge.

Ensure the text color provides sufficient contrast against the badge background for maximum readability.

---

Read More Background

Customize the background color of the Read More button.

Available States

• Normal
• Hover

Hover colors improve user interaction by providing visual feedback when visitors hover over the button.

---

Read More Text Color

Customize the text color displayed on the Read More button.

Available States

• Normal
• Hover

Choose a color that remains clearly visible against the selected button background.

---

Notes

• These settings apply globally to all Grid View layouts.
• Disabled elements in the Grid Section Order will not appear in event cards.
• Drag-and-drop ordering determines the display sequence of card elements.
• Hover colors are applied only to interactive elements such as titles and buttons.
• Elementor Grid widgets may override these global style settings through their Style controls.
• Changes take effect immediately after saving the settings.