Events Element

09/10/2019

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.

Events Element Example
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 – Create a new page or post, or edit an existing one.

Step 2 – Select the container and column you would like to place the portfolio items into.

Step 3 – Click on the + Element button at the bottom of the column. Select Events.

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 6 – 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 your Theme Options > Fusion Builder Elements > Events Element 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.

  • 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 > Theme Options > Fusion 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 HTM from Excerpt – When set to Yes, this strips any HTML from the Excerpt text shown.

View The Options Screen

The Events Element Parameters

Copy to Clipboard
  • cat_slug – The slug name of the events category you’d like to display. Use a comma for multiple categories.
  • past_events – Choose from yes or no. Set to yes if you want the past events to be displayed.
  • order – Set the order of events. Options are DESC and ASC.

  • number_posts – Accepts a numerical value. For example, 7. Sets the number of events to display.
  • columns – Choose from 1 – 6. Sets the number of columns per row.
  • column_spacing – Accepts a numerical value. For example, 3. Controls the column spacing for events items. Setting to -1 will keep the default 4% column spacing.
  • picture_size – Choose from cover, or auto. Choose cover to resize the image to cover the container, or choose auto to use the image’s original resolution.
  • padding_top – Accepts a pixel value. For example, 5px. Sets the top padding for the event contents.
  • padding_right – Accepts a pixel value. For example, 5px. Sets the right padding for the event contents.
  • padding_bottom – Accepts a pixel value. For example, 5px. Sets the bottom padding for the event contents.
  • padding_left – Accepts a pixel value. For example, 5px. Sets the left padding for the event contents.
  • content_length – Choose between default, no_text, excerpt, or full_content. Sets how to display the post excerpt.
  • excerpt_length – Accepts a numerical value. For example, 30. Sets the number of words/characters you want to show in the excerpt.
  • strip_html – Choose from default, yes, or no. Allows you to strip HTML from the post excerpt.
  • pagination – Choose between no, pagination, infinite, or load_more_button. Sets the type of pagination.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization.

  • id – Add a custom id to the wrapping HTML element for further css customization.