Overview of the related events module

This document provides a comprehensive guide on configuring and using the Related Events module for Divi 5. The Related Events module lists other events related to the one being viewed, by venue, category, tag, event type or organizer. It uses the same cards as the Events Feed and works on single event pages or Theme Builder single event templates.

How to add the related events module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for Related Events in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab controls which events the module shows and how they are displayed. The module-specific settings are grouped into the toggles below; Link, Background and Element Label are the standard Divi options.

Events

• Related By: What makes an event related to the one this module sits under. A criterion the event has nothing to match on — no venue, no tags — is left out, and so is one the source does not model. Options: Same venue, Shared category, Shared tag, Same event type, Same organizer.
• Matching: How the criteria above combine. Any of them casts a wider net — an event at the same venue counts, and so does one merely sharing a tag. Options: Any of them, All of them.
• Show: Which of the related events to list. Panel Setting follows Default scope under Divi Extended → Events; name a scope only when this one module should disagree with the rest of the site. Options: Panel Setting, Upcoming events, Events happening now, Past events, All events.
• Number Of Events: How many related events to show, up to 12. A repeating event counts once however many dates it has — this list is about other events, not other dates.
• Direction: Ascending puts the soonest event first, which is what an upcoming list usually wants. Descending suits a list of past events, where the most recent one is the interesting end. Options: Ascending, Descending.

Display

• Show Heading: A heading above the list. Switch it off where the surrounding layout already says what the list is.
• Heading: Wording for the heading above the list. Leave it blank for the default, which is translated with the site.
• Layout: How each event is drawn, using the same card as the Events Feed. Card Grid puts events in columns with the image on top. Options: Card Grid, List, Compact.
• Event Details: Which parts of an event to show. A part with nothing behind it — an event with no image, or no venue — is left out whether it is ticked here or not. Options: Image, Date and time, Venue, Excerpt.
• Event Details (Compact layout): Which parts of an event a compact row shows. Compact has no image and no excerpt, so it offers what it can actually draw rather than options that would do nothing. Options: Date and time, Venue.
• Excerpt Length: How many words of the excerpt to show, between 5 and 100. Events with no excerpt of their own fall back to the start of their description.
• Columns: Cards across the grid, set per breakpoint. Nothing narrows it on your behalf — what you set for a breakpoint is what that breakpoint renders. Options: 1, 2, 3, 4.
• Column Gap: Space across a row: between one card and the next in the grid, and between the image and the text in a list row.
• Row Gap: Space between one row and the next. In the list layout this is split above and below each row, either side of the dividing line.
• Show A Message When Nothing Matches: With this off the whole module disappears when it finds nothing — no heading, no empty box, no gap in the layout. Switch it on where the section is part of the page’s structure and a silent collapse would look like something broke.
• No Results Message: Shown in place of the cards when nothing matches. Leave it blank for the default, which is translated with the site.
• Date Column Width: How wide the date column is in the compact layout. Fixed rather than sized to its contents so the dates line up down the list, which is the reason the layout leads with them.
• Image Ratio: The shape every card’s image is cropped to. Layout default keeps the one each layout was drawn for — 16:10 on a grid card, 16:9 on a full-width list row. Options: Layout default, 16:10, 16:9, 3:2, 4:3, Square, The image’s own shape.

Tip: This module needs an event to compare against, so place it on a single event page or in a Theme Builder single event template.

Design tab settings

The Design tab lets you style every part of the module. Each toggle below controls one element:

• Heading: style of the “More events like this” heading.
• Event Title: font, size, color and spacing of the event title.
• Date & Time: style of the date and time text.
• Venue: style of the venue text.
• Status Badge: colors and text of the status badge (Cancelled, Postponed and so on).
• Excerpt: style of the event excerpt.
• Image: corner radius, border and filters of the event image.
• Event Card: background, border, shadow and padding of each event card.
• Sizing, Spacing, Border, Box Shadow, Filters, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.