Events Element

Last Update: November 21, 2024

The Events Calendar is by far the most popular calendar plugin around. As it is one of the free premium plugins included with Avada, we offer full design integration and support for it. We’ve also created an Events Element, so you can easily display your events anywhere you’d like on your pages or posts. Read below for more details on this very useful element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Events Element

The Events Element allows you to add a customized range of your Events anywhere in your content.

Start by working through the options. This is a relatively simple element to configure. Start by selecting the categories you wish to show in your Event Element. You then choose the number and maximum number of columns to display. To fill the column the element is in, these two numbers should be the same. If you have chosen 4 columns but only 2 events, they will only fill half the column. Likewise, if you have chosen 4 columns, but have 6 events, they will show on a second row. Then continue through the options to style the element as you wish.

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in the Options > Avada Builder Elements > Events section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

HeadingDescription
CategoriesSelect a category or leave blank for all.
Condense Events In SeriesTurn on to show only the next event in each series.
Display Past EventsTurn on if you want the past events to be displayed.
OrderDefines the sorting order of posts.
Number of EventsSelect the number of events to display. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading.
Maximum ColumnsSelect the number of max columns to display.
Column SpacingControls the column spacing for events items. Setting to -1 will keep the default 4% column spacing.
Picture Sizecover = image will scale to cover the container, auto = width and height will adjust to the image.
Content Padding Controls the padding for the event contents. Enter values including any valid CSS unit, ex: 20px, 20px, 20px, 20px.
Content AlignmentControls the alignment of contents.
Text DisplayChoose how to display the post excerpt.
Excerpt LengthInsert the number of words/characters you want to show in the excerpt.
Strip HTMLStrip HTML from the post excerpt.
Pagination TypeChoose the type of pagination.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

In this article