Avada And The Events Calendar

Avada And The Events Calendar

09/07/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 Calender 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, please go here. If you would like to purchase The Events Calendar Pro version, please go here.

View the Avada Church Demo to see the Calendar plugin in action.

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.

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

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

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

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

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

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

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

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

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

Events Featured Image Hover Type - Illustrated as I. 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 J. Allows you to select if the event image displays auto or covered in the list view. Choose between Cover or Auto.

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 Calendar Element

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

Categories - Illustrated as A. Allows you to select categories to include. Leave blank to include all categories.

Display Past Events - Illustrated as B. Allows you to display the past events.

Number of Events - Illustrated as C. Allows you to select the number of events to display.

Maximum Columns - Illustrated as D. Allows you to select the maximum number of columns to display.

Column Spacing - Illustrated as E. Controls the column spacing for events items. Setting to -1 will keep the default 4% column spacing.

Picture Size - Illustrated as F. 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.

Content Padding - Illustrated as G. Controls the padding for the event contents.

Text Display - Illustrated as H. Choose how to display the post excerpt. Choose between Default, No Text, Excerpt, or Full Content.

Excerpt Length - Illustrated as I. Controls the number of words/characters you want to show in the excerpt.

Strip HTML - Illustrated as J. Allows you to strip HTML from the post excerpt.

Pagination Type - Illustrated as K. Controls the type of pagination. Choose between No Pagination, Pagination, Infinite Scrolling, or Load More Load More Button.

Element Visibility - Illustrated as L. Allows you to choose which devices to display the element. Choose one or more from Mobile, Tablet, or Desktop. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab in the Theme Options.

CSS Class - Illustrated as M. 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 N. Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

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