Events Element

21/09/2020

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.

Events Element Example
View Element Demo Page!
Read our special feature on The Events Calendar!

How To Use The Events Element

The Events Element allows you to add a customized range of your Events anywhere in your content. Be sure to visit the Element Demo page to get a good idea of what’s possible with this element.

Step 1. Ensure Avada Builder, or Avada Live is active.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 3. Choose Events from the Elements List.

Step 4. 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.

Step 5. Once you have completed styling your Events Element, click Save. You will be returned to the edit page. You can preview the page to view your content, and you can always edit the element again to make changes..

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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.

  • Categories – Select a specific category or leave blank for all.

  • Display Past Events – Turn this on if you want the past events to be displayed.

  • Order – You can display your events in either Descending or Ascending order.

  • Number of Events – Select the number of events to display. Up to 25 events can be displayed.

  • Maximum Columns – Select the number of max columns to display. Choose from 1 – 6 columns.

  • Column Spacing – Controls the column spacing for events items. Setting to -1 will keep the default 4% column spacing. From -1 to 300%.

  • Picture Size – Choose between Cover (image will scale to cover the container) or 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 Alignment – Controls the alignment of contents. Choose from Text Flow, Left, Right or Centre.

  • Text Display – Choose how to display the post excerpt. Choose from Default, No Text, Excerpt, or Full Content.

  • Excerpt Length- Insert the number of words/characters you want to show in the excerpt.

  • Strip HTML – Strip HTML from the post excerpt. Choose from Default, Yes, or No.

  • Pagination Type – Select the type of pagination you want. Choose from No Pagination, Pagination, Infinite Scrolling, or Load More Button.

  • Element Visibility – Allows you to select the screen sizes to show or hide the element in. You can choose one or more settings. Choose from Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class to the wrapping HTML.

  • CSS ID – Allows you to add an ID to the wrapping HTML.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Options > Avada Builder Elements > Events.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Number of Events Per Page – Controls the number of events displayed per page for events element. Set to -1 to display all. Set to 0 to use the number of posts from Settings > Reading. In pixels.

  • Column Spacing – Controls the column spacing for events items. In pixels.

  • Events Content Padding – Controls the top/right/bottom/left padding of the events contents. Enter values including any valid CSS unit, ex: 20px, 20px, 20px, 20px.

  • Events Text Display – Choose how to display the post excerpt for events elements.

  • Excerpt Length – Set the length of your excerpt here. 

  • Strip HTML from Excerpt – When set to Yes, this strips any HTML from the Excerpt text shown.

View The Options Screen