Overview

The Pagination Settings section allows you to customize the appearance of pagination controls used throughout Event Builder. Pagination helps visitors navigate between multiple pages of events when the number of events exceeds the configured display limit.

You can customize the background and text colors for different pagination states, ensuring that the navigation matches your website’s branding and provides a clear user experience.

These settings apply globally to all Event Builder layouts that support pagination, including Grid View, List View, Archive Pages, Search Results, and other paginated event listings.

---

Pagination Style

Overview

The Pagination Style settings control the visual appearance of page navigation buttons.

Pagination allows visitors to easily browse through multiple pages of event listings using numbered page links and navigation controls.

Supported pagination elements include:

• Page Numbers
• Previous Button
• Next Button
• Active Page Indicator

---

Pagination Background

Customize the background color of pagination buttons.

Available States

• Normal
• Hover
• Active

Normal

Controls the default background color of pagination buttons.

Example:

1   2   3   Next →

Use a neutral background color that blends well with your website design.

---

Hover

Controls the background color when visitors move their cursor over a pagination button.

A contrasting hover color improves usability by indicating interactive elements.

---

Active

Controls the background color of the currently selected page.

Example:

1   [2]   3   Next →

Using your primary brand color helps visitors quickly identify the current page.

---

Pagination Text Color

Customize the text color displayed inside pagination buttons.

Available States

• Normal
• Hover
• Active

Normal

Controls the default text color displayed on pagination buttons.

Ensure the text is clearly readable against the selected background.

---

Hover

Controls the text color displayed while hovering over a pagination button.

Choose a contrasting color to improve visibility during interaction.

---

Active

Controls the text color of the currently active page.

The active text color should provide excellent contrast with the active background color for maximum readability.

---

Notes

• These settings apply globally to all Event Builder pagination components.
• Pagination styles are used in layouts that support multiple pages of event listings.
• Hover colors are applied only when users interact with pagination buttons.
• Active styles indicate the currently selected page.
• Elementor widgets may override these global pagination styles through their individual Style settings.
• Changes take effect immediately after saving the settings.