How To Use The Events Calendar With Avada

How To Use The Events Calendar With Avada

14/11/2018

The Events Calendar plugin developed by Modern Tribe is a plugin designed to create and manage events on your website with ease. The Events Calendar is 100% design integrated with the Avada WordPress theme.

The Events Calendar plugin offers a Pro version as well as a Free version. If you only want to use The Event Calendar plugin's 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, and to purchase the Pro version, see this site.

You can also view the Avada Church Demo or the Avada Craft Beer Demo to see the Events Calendar plugin in action.

Events Element Example

Overview

How To Install The Events Calendar Plugin

Step 1 - Go to Avada > Plugins and locate The Events Calendar plugin.

Step 2 - Click the 'Install' button.

Step 3 - Once it’s finished installing successfully, it will be activated automatically. Click 'Return to Required Plugins Installer' link and you will now see it has the Active status.

Main Events Page

When you install The Events Calendar plugin, it creates and registers a slug to showcase your events at /events. You can view an Avada Demo example of this here.

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 WordPress 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 Events URL slug should be plural, and the Single Events URL slug singular.

Step 4 - Once done, click the 'Save Changes' button.

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.

Display Settings

There are a lot of settings for the Events Calendar, and they are mostly straightforward and well documented on the Events Calendar Support Site, but there are a couple of options in the Display Tab, that greatly affect how your events look and worth a quick look.

Firstly, there is a setting there called 'Enable event views'. These are the different ways to view an event, and by default all three are chosen. The user can switch between the various views on the front end, and this limits what view they can see. Another important setting, directly under this one, is the 'Default view' setting. This controls which view is loaded initially by default. The views are all quite different, so test them to see which one suits your events the best.

Event Calendar Display Settings

Creating Events

At the heart of the Events Calendar plugin are the individual events. These are created from the WordPress dashboard at Events > Add New. After adding your event title, you can add the details of the event through the normal WordPress editor.

IMPORTANT NOTE: If you don't see the option to use Fusion Builder on Events, make sure to check the Fusion Builder Settings and check that 'Event' has been ticked in the registered Post Types.

In the right hand sidebar, like a blog post, you can choose or create categories, and also add a featured image that will be used in the Event display. There are also a few Event options in this sidebar. But the remainder of the content comes from The Events Calendar box, immediately under the editor. Here you add the date and time for the event, as well as the organiser and the location for the event (which you can reuse). There is a link field for an external event website, and there is a place to add a cost for the event.

For additional functionality including recurring events, ticket sales, publicly submitted events, you might want to go for the Premium version and the additional add-ons available.

View the official Creating An Event KB doc!

Events Calendar Fusion Theme Options

The main Avada Fusion Theme Options are divided into two sections, namely, the General Events Calendar section which contains general options and the Events Single Posts section that houses specific options for the events single posts only. There are also options to manage Events Calendar sidebars in the Theme Options > Sidebars > Events Calendar Posts section.

General Events Calendar Options

Display Events Page Title - Illustrated as A. Controls if the native page title for events calendar archive pages should be displayed above or below the filter bar, or if it should be disabled. Options are Above Below, & Disabled.

Events Primary Color Overlay Text Color - Illustrated as B. Controls the color of text when the primary color is the background.

Events Filter Bar Background Color - Illustrated as C. Controls the background color for the events calendar filter bar.

Events Filter Bar Text Color - Illustrated as D. Controls the color of the event filter bar text.

Events Monthly Calendar Heading Background Color - Illustrated as E. Controls the background color of the numbered heading in the calendar.

Events Monthly Calendar Background Color - Illustrated as F. Controls the background color of each day in the calendar.

Events Tooltip Background Color - Illustrated as G. Controls the background color for the event tooltip.

Events Tooltip Body Text Color - Illustrated as H. Controls the color of the tooltip body text.

Events Border Color - Illustrated as I. Controls the various border colors around the events calendar.

Events Featured Image Hover Type - Illustrated as J. Allows you to set the hover type for the event featured images. Choose between None, Zoom In, Zoom Out, or Lift Up.

Events Image Background Size For List View - Illustrated as K. Allows you to select if the event image displays auto or covered in the list view. Choose between Cover or Auto.

Events Separator Heading Font Size - Illustrated as L. Controls the font size of the month and day separator headings on events archive page.

Events Element Options

Events Single Post Options

Events Social Sharing Box - Illustrated as A. Allows you to turn the social sharing box on single events posts On or Off.

Events Single Sidebar Width - Illustrated as B. Controls the width of the sidebar when only one sidebar is present.

Events Dual Sidebar Width 1 - Illustrated as C. Controls the width of sidebar 1 when dual sidebars are present.

Events Dual Sidebar Width 2 - Illustrated as D. Controls the width of sidebar 2 when dual sidebars are present.

Events Sidebar Background Color - Illustrated as E. Controls the background color of the single event post sidebars.

Events Sidebar Padding - Illustrated as F. Controls the sidebar padding for single event post sidebars.

Events Sidebar Widget Heading Font Size - Illustrated as G. Controls the size of the sidebar widget heading for single event posts.

Events Sidebar Widget Title Background Color - Illustrated as H. Controls the background color of the sidebar widget title for single event posts.

Events Sidebar Widget Headings Color - Illustrated as I. Controls the color of the sidebar widget heading for single event posts.

Events Sidebar Text Font Size - Illustrated as J. Controls the size of the text in the single event post sidebar.

Events Sidebar Text Color - Illustrated as K. Controls the color of the text in the single event post sidebar.

Events Sidebar Link Color - Illustrated as L. Controls the color of the link text in the single event post sidebar.

Events Sidebar Divider Color - Illustrated as M. Controls the color of the dividers in the single event post sidebar.

Events Calendar Sidebars

IMPORTANT NOTE: The Events Calendar sidebar settings are located in the Avada > Theme Options > Sidebars section.

Activate Global Sidebar For Events Calendar Posts - Illustrated as A. Allows you to turn global sidebars for Events Calendar posts On or Off.

Global Events Calendar Sidebar 1 - Illustrated as B. Allows you to select which widget section to display as the 1st sidebar on all Events Calendar posts and archives pages. Select None to hide the 1st sidebar.

Global Events Calendar Sidebar 2 - Illustrated as C. Allows you to select which widget section to display as the 2nd sidebar on all Events Calendar posts and archives pages. Sidebar 2 can only be used if sidebar 1 is selected. Select None to hide the 2nd sidebar.

Global Events Calendar Sidebar Position - Illustrated as D. Allows you to control the position of the 1st sidebar for all Events Calendar posts and archive pages. If a 2nd sidebar is selected, it will be displayed on the opposite side.

Fusion Builder Events Calendar Element

The Events Calendar Element can be found within the Builder Elements when creating any page or post. Please see the Events Calendar Element document for more info!

The Events Calendar Element

Additional Plugin Resources

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

Recent Posts

Recent Tweets

For privacy reasons Twitter needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept