List View Settings

Overview

The List View Settings section allows you to customize how events are displayed in the List Layout. Unlike the Grid View, the List View presents events in a vertical format, making it ideal for displaying detailed event information in an easy-to-read layout.

You can control the order of event elements, excerpt length, button text, colors, and backgrounds to create a clean and engaging event listing that matches your website’s design.

These settings apply globally to all List View layouts within Event Builder.

---

List Section Order

Customize the layout of each event item using drag-and-drop.

You can rearrange the order of elements or hide unnecessary sections.

Available Elements

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

Features

• Drag and drop elements to change their display order.
• Disable elements you don’t want to show.
• Customize the layout without editing code.

This allows you to create a layout that best fits your website and content.

---

Excerpt Length (Words)

Control the number of words displayed in the event summary.

Configuration

• Minimum: 5 Words
• Maximum: 100 Words
• Default: 20 Words

Short excerpts create compact listings, while longer excerpts provide visitors with more event information before opening the full event page.

Recommendations

• 10–20 Words – Compact event lists.
• 20–40 Words – Balanced descriptions.
• 40–100 Words – Detailed event previews.

---

Button Label

Customize the text displayed on the event action button.

Default:

Read More

Examples include:

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

Choose a label that matches your website’s tone and encourages visitors to take action.

---

List Wrapper Background

Customize the background color of the entire List View section.

This setting affects the outer container that surrounds all event listings.

A contrasting wrapper background helps visually separate the event list from the surrounding page content.

---

List Item Background

Customize the background color of each individual event item.

Each event entry will use this background color, allowing you to create a clean and consistent listing layout.

For best readability, use a light background with darker text.

---

Title Color

Customize the color of event titles.

Available States

• Normal
• Hover

Hover colors provide visual feedback when visitors move their cursor over clickable event titles.

Using your primary brand color for hover states improves the user experience.

---

Excerpt Color

Customize the color of the event description displayed below each title.

This affects:

• Event Summary
• Short Description
• Preview Text

Choose a color that provides sufficient contrast with the background while remaining easy to read.

---

Date Badge Background

Customize the background color of the event date badge.

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

Using an accent color helps important dates stand out.

---

Date Badge Text Color

Customize the text color displayed inside the date badge.

Ensure the selected color provides strong contrast against the badge background for better visibility.

---

Read More Background

Customize the background color of the Read More button.

Available States

• Normal
• Hover

Applying a hover color provides clear visual feedback when visitors interact with the button.

---

Read More Text Color

Customize the text color displayed on the Read More button.

Available States

• Normal
• Hover

Use colors that maintain excellent readability against the selected button background.

---

Notes

• These settings apply globally to all List View layouts.
• Elements disabled in the List Section Order will not be displayed.
• Drag-and-drop ordering determines the display sequence of event information.
• Hover colors apply only to interactive elements such as titles and buttons.
• Elementor List View widgets may override these global settings through their Style controls.
• Changes take effect immediately after saving the settings.