Events Element
The Events element lists events that you manage with the plugin The Events Calendar. Each event is a card with its picture, its title, its date and time and, if you want, a short text. The cards link to the event’s own page.
Use it to announce upcoming events on a home page or landing page, outside the calendar pages the plugin creates by itself.
In this article: When the Element Is Available · Options · Site-Wide Defaults · Tips · Related
When the Element Is Available
The element is part of the Builder only while The Events Calendar is installed and active. Without the plugin, Events is missing from the element list, and an element that is already on a page no longer shows the events.
Events are sorted by their start date. By default only events that have not ended yet are shown. When no event matches your choices, visitors see nothing. Logged-in editors see a link to add events in place of the list.
Options
| Option | What it does |
|---|---|
| Categories | Limits the list to one or more event categories. Leave it empty to show events of all categories. |
| Condense Events In Series | Yes shows only the next event of each series of repeating events. No lists every date on its own. |
| Display Past Events | Yes also lists events that are over. No, the default, shows only events that are running or still to come. |
| Order | Ascending starts with the earliest start date, which puts the next event first. Descending starts with the latest. |
| Number of Events | How many events are shown, or how many per page when pagination is on. -1 shows all, 0 uses the number from Settings › Reading. |
| Maximum Columns | How many cards stand side by side on a wide screen, from 1 to 6. Narrow screens get fewer columns. |
| Column Spacing | The space between the cards in pixels. -1 keeps the standard spacing of 4%. |
| Picture Size | Cover scales and crops the event picture to fill a card area of equal size. Auto shows the whole picture in its own proportions. |
| Content Padding | The inner spacing around the title, date and text of each card: top, right, bottom, left. |
| Content Alignment | Aligns the card texts left, centered or right. Text Flow follows the normal reading direction. |
| Text Display | No Text shows only picture, title and date. Excerpt adds a short text, Full Content the whole event description. Default follows the site-wide setting. |
| Excerpt Length | The length of the short text. Only shown when Text Display is set to Excerpt. |
| Strip HTML | Removes formatting and links from the short text. Only shown when Text Display is set to Excerpt. |
| Pagination Type | No Pagination shows one set of events. Pagination adds numbered page links, Infinite Scrolling loads more events as the visitor scrolls, Load More Button loads them on a click. |
| Element Visibility | Shows or hides the element on small, medium and large screens. |
| CSS Class / CSS ID | A class or ID for the element, for your own styling. |
Site-Wide Defaults
Under Tirenoa › Options › Tirenoa Builder Elements › Events you set the starting values for every Events element: Number of Events Per Page, Column Spacing, Events Content Padding, Events Text Display, Excerpt Length and Strip HTML from Excerpt. An element uses these values wherever you leave its own option untouched.
Tips
- Give every event a featured image. An event without one shows a placeholder instead of a picture.
- With Picture Size set to Cover, pictures of different shapes still line up in neat rows.
- For a short teaser on a home page, set Number of Events to one row, for example 3 or 4, and leave Pagination Type on No Pagination.
- The element shows only data stored on your own site and connects visitors to no outside service.