How To Use The Events Calendar With Avada

03/13/2017

The Events Calendar plugin developed by Modern Tribe is a plugin designed to create and manage events on your website with ease. This section details how to install the plugin, the customization options that will affect the plugin, and the like. If you would like to learn how to use this plugin with Avada, please continue reading below.

The Events Calendar Plugin Pro Version Vs. Free Version

The Events Calendar plugin offers a Pro versions as well as a Free version. If you only want to use The Event Calender plugins core features, then the free version will suffice. However, if you want to receive premium support and additional features, then you can purchase the Pro version. To see the list of features and differences for each version, please go here.

Click Here To Purchase The Events Calendar Pro

How To Install And Activate The Events Calendar

Step 1 – Navigate to the Plugins > Add New tab on your WordPress admin panel.

Step 2 – Once on the ‘Add Plugins’ page, search for ‘The Events Calendar’ plugin using the search field on the upper right corner.

Step 3 – When the search is done, you’ll see The Events Calendar plugin developed by Modern Tribe in the list of results. Once you find the correct pluin, click the ‘Install Now’ button. Make sure to install the correct plugin.

Step 4 – Once it’s finished installing successfully, click the ‘Activate Plugin’ link.


Main Events Page

When you install The Events Calendar plugin, it creates and registers a slug to showcase your events at /events. It is important to understand that while the /events page on the front end appears to be a regular page, it is not an actual page you can edit in the backend. To learn how to change this slug, continue reading below.

How To Change The Main Events Page Slug

Step 1 – Navigate to the Events > Settings tab on your WordPress admin panel.

Step 2 – On the ‘General’ tab, locate the ‘Events URL Slug’ option. By default, it’s set to events. Simply change it to the slug you’d wish to use.

Step 3 – You can also change the ‘Single Event URL Slug’ option to change the slug for single event pages. By default, it’s set to event. Simply change it to the slug you’d wish to use. Ideally, the the Events URL slug should be plural, and the Single Events URL slug singular.

Step 4 – Once finished, don’t forget to click the ‘Save Changes’ option.

IMPORTANT NOTE – If the option is unavailable, it may be because your permalinks aren’t set correctly. Your permalinks must be set to any setting except Plain. You can customize your permalinks by going to the Settings > Permalinks on your WordPress admin panel.


Events Calendar Plugin Options In Fusion Theme Options

In the Fusion Theme Options, there’s an Events panel that has 2 sub-panels. Those 2 sub-panels are the General Events Calendar sub-panel which contains general options for the Events Calendar plugin and the Events Single Posts that contain specific options for the events single posts. There are also options for Events Calendar sidebars under Theme Options > Sidebars > Events Calendar Posts panel.

General Events Calendar Sub-Panel

Events Primary Color Overlay Text Color – Illustrated as A on the screenshot, this option controls the color for the text when the primary color is in the background.

Events Filter Bar Background Color – Illustrated as B on the screenshot, this controls the color for the background of the events calendar filter bar.

Events Filter Bar Text Color – Illustrated as C on the screenshot, this option controls the color of the event filter bar text.

Events Monthly Calendar Heading Background Color – Illustrated as D on the screenshot, this option controls the background color for the numbered heading.

Events Monthly Calendar Background Color – Illustrated as E on the screenshot, this option controls the background color for each day in the calendar.

Events Tooltip Background Color – Illustrated as F on the screenshot, this option controls the background color for the event tooltip.

Events Tooltip Body Text Color – Illustrated as G on the screenshot, this option controls the color for the body text on the tooltip.

Events Border Color – Illustrated as H on the screenshot, this option controls the color for the border around the events calendar.

Events Featured Image Hover Type – Illustrated as I on the screenshot, this option allows you to set the hover type for the featured image. Choose between None, Zoom In, Zoom Out or Lift Up.

Events Image Background Size For List View – Illustrated as J on the screenshot, this option allows you to select if the event image displays auto or covered in the list view. Choose between Cover and Auto.


Events Single Post Sub-panel

Events Social Sharing Box – Illustrated as A on the screenshot, this option allows you to turn the social sharing box on single events posts On or Off.

Events Sidebar Background Color – Illustrated as B on the screenshot, this option controls the background color of the single event post sidebars.

Events Sidebar Padding – Illustrated as C on the screenshot, this option controls the background color of the single event post sidebars.

Events Sidebar Widget Heading Font Size – Illustrated as D on the screenshot, this option controls the background color of the single event post sidebars.

Events Sidebar Widget Title Background Color – Illustrated as E on the screenshot, this option controls the background color of the single event post sidebars.

Events Sidebar Widget Headings Color – Illustrated as F on the screenshot, this option controls the background color of the single event post sidebars.

Events Sidebar Text Font Size – Illustrated as G on the screenshot, this option controls the background color of the single event post sidebars.

Events Sidebar Text Color – Illustrated as H on the screenshot, this option controls the background color of the single event post sidebars.

Events Sidebar Link Color – Illustrated as I on the screenshot, this option controls the background color of the single event post sidebars.

Events Sidebar Divider Color – Illustrated as J on the screenshot, this section contains options to activate and assign global sidebars.


Events Calendar Posts Sub-panel

IMPORTANT NOTE – The Events Calendar Posts sub-panel is located in the Avada > Theme Options > Sidebars panel.

Activate Global Sidebar For Events Calendar Posts – Illustrated as A on the screenshot, this option allows you to turn global sidebars for Events Calendar posts On or Off.

Global Events Calendar Post Sidebar 1 – Illustrated as B on the screenshot, this option allows you to select which widget section to display as the 1st sidebar. Select to None to hide the 1st sidebar.

Global Events Calendar Post Sidebar 2 – Illustrated as C on the screenshot, this option allows you to select which widget section to display as the 2nd sidebar. Select to None to hide the 2nd sidebar.

Global Events Calendar Sidebar Position – Illustrated as D on the screenshot, this option allows you to control the position of the 1st sidebar. If a 2nd sidebar is selected, it will be displayed on the opposite side.


Events Shortcode Options

The Events Shortcode can be found within the Builder Elements when creating any page or post. Please continue reading below for the list of options for this shortcode.

Categories – Illustrated as A on the screenshot, this option allows you to select categories to include. Leave blank to include all categories.

Number of Events – Illustrated as B on the screenshot, this option allows you to select the number of events to display.

Maximum Columns – Illustrated as C on the screenshot, this option allows you to select the maximum number of columns to display.

Picture Size – Illustrated as D on the screenshot, this option allows you to choose the size of your picture. Choose between cover which will scale the image to cover the container, or auto which will adjust the container’s width and height to fit the image.

CSS Class – Illustrated as E on the screenshot to the right, the CSS Class option allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

CSS ID – Illustrated as F on the screenshot to the right, this option allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.


Various Documentation For The Events Calendar Plugin

Below is a list of articles and resources that you can use to better learn how to use The Events Calendar plugin.

4 Likes
Proudly Serving Over 375000 Satisfied Users!