Divi Occasions Calendar combines the power of The Occasions Calendar plugin and the Divi Builder, allowing you to turn and elegance events to your web site with the entire capacity and customizability that incorporates Divi’s visual builder. This product supplies new modules to the Divi Builder. You’ll add fit pages, calendars, carousels, feeds, filters, and tickets to your layouts and completely customize the design of every module.

For many who’re uninterested in feeling limited by way of The Events Calendar plugin’s customization possible choices, or for many who’re in search of a great way to regulate and display fit wisdom to your web site with the entire design flexibility of Divi, the Divi Events Calendar is also merely the solution. In this publish, we’ll take a look at the Divi Events Calendar to help you decide if it’s the correct product for you.

Let’s get started!

Putting in place Divi Events Calendar

Divi Events Calendar works with the loose WordPress events plugin, The Occasions Calendar. First, be certain that the plugin is installed and activated to your web site.

To place within the Divi Events Calendar, navigate to the Plugin internet web page and Click on on Add New. Click on on Make a choice Report, make a selection the .ZIP plugin record from your computer, then click on on Arrange Now. As quickly because the plugin is installed, click on on activate.

Divi Events Calendar

The plugin supplies seven new modules to the Divi builder that artwork in conjunction with The Events Calendar to turn fit wisdom to your web site. Let’s take a look at every of the modules.

Events Calendar

The events calendar module displays a calendar of your entire events. Right here’s what the calendar module turns out like previous than any more customization. The tabs on the most efficient correct can help you switch between different calendar views. The advance details appear in a card on hover, and the improvement internet web page opens on click on on.

Content material subject matter Settings

Now, let’s take a look at the module settings.

Content material subject matter

Inside the content material subject matter tab, you’ll be in a position to choose the type of events to turn, the number of events consistent with day, make a selection to limit loading earlier or longer term events earlier a definite number of months, and limit the navigation range.

You’ll moreover make a selection to show or quilt canceled or postponed events, virtual events, hybrid events, or routine events, providing you with a large number of keep an eye on over what’s displayed.

Views

Under the views tab, you’ll be capable to set the default calendar view, set the document view range, make a selection to show or quilt thumbnails throughout the calendar, and make a selection which views are available.

Additionally, you’ll be capable to set the order equivalent day events are displayed, set the time structure, show or quilt the improvement time for more than a few fit sorts, disable positive days of the week, and set the day the week starts.

Details

The details tab is where you’ll be capable to keep an eye on what fit details are displayed. Right here’s a document of the details you’ll be capable to show or quilt: tooltip, image, determine, date, time, end time, time zone, venue, location, side road deal with, comma after deal with, locality, comma after locality, state, comma after state, postal code, comma after postal code, country, comma after country, organizer, price, elegance, web site, and excerpt. Additionally, you’ll be capable to set the date and time structure and make a selection to show the postal code previous than the locality.

Links

The links tab will provide you with some keep an eye on over how items throughout the calendar are hooked up. You’ll permit or disable the only fit internet web page links, otherwise you’ll be in a position to choose to change them with a custom designed link or redirect to a web site. You’ll moreover permit or disable elegance links, organizer links, and venue links, and also you’ll be in a position to choose whether or not or now not any of the ones links open within the equivalent window or open in a brand spanking new tab.

Design Settings

Inside the design tab, you’ll be capable to keep watch over the look of in the case of every aspect of the improvement calendar module. There are design settings to switch the heading text, days of the week, calendar days, events, thumbnails in calendar days, navigation buttons, view buttons, tooltip, details image, details labels text, details determine text, details text, details excerpt text, and of course, a whole lot of the default Divi design settings similar to sizing, spacing, border, box shadow, filters, become, and animation. The intensive design possible choices available with this module make it easy to customize the calendar to test the design of your web site.

Events Carousel

The Events Carousel module supplies a carousel with fit wisdom to the internet web page. It is a great way to display multiple events on a internet web page in a condensed structure. Right here’s what the module turns out like without any design customization.

Now, let’s take a look at the module settings.

Content material subject matter Settings

First, let’s uncover the content material subject matter tab.

Content material subject matter

Inside the content material subject matter settings, you’ll be capable to permit or disable dynamic fit content material subject matter. If enabled, this feature implies that you’ll place the module in a Divi Theme Builder construction and dynamically display fit categories for the existing elegance or internet web page. You’ll moreover keep watch over the number of events and the kinds confirmed, customize the date and time structure and excerpt length, set the events offset amount, and make a selection to simply show earlier events.

Parts

The elements tab is where you’ll be in a position to choose the elements confirmed throughout the carousel. You’ll permit or disable the following: featured image, determine, date, time, time zone, venue, location, organizer, price, elegance, web site, excerpt, additional knowledge button, prepositions and dividers, and fit details.

Carousel Alternatives

You’ll show or quilt navigation arrows and dots throughout the carousel possible choices tab. You’ll moreover permit or disable mouse drag and phone drag.

Further Information Button and No Results Message

The additional knowledge button and no results message settings can help you keep an eye on the text that is confirmed.

Design Settings

Inside the design tab, you’ll be capable to industry the design of the construction, events, image, carousel, determine text, details text, excerpt text, and additional knowledge button, along with the on a regular basis sizing, spacing, border, box shadow, filters, become, and animation possible choices.

Events Feed

This module supplies a feed of events to the internet web page. That is the way in which it sort of feels without any design customization.

Inside the module settings, you’ll be capable to customize the improvement feed content material subject matter and design. Let’s take a look.

Content material subject matter Settings

First, let’s check out the settings throughout the content material subject matter tab.

Content material subject matter

Proper right here, you’ll be capable to set the type of events confirmed throughout the feed. You’ll make a choice from all events, dynamic events, equivalent events, featured events, or a custom designed events selection.

Proper right here, you’ll be capable to set the events status (longer term, earlier, or each and every), the cutoff degree for ongoing events, the events order, and the events rely. You’ll specify the status of events (upcoming, previous, or each and every), the cutoff degree for ongoing events, the order of events, and the number of events to turn. You’ll quilt canceled and postponed, virtual, hybrid, or routine events throughout the feed, limit the number of routine events confirmed, and set an events offset amount.

Parts

Inside the portions possible choices, you’ll be capable to show or quilt the featured image and determine.

Structure

Inside the construction settings, you’ll be capable to industry between the grid construction, document construction, or duvet construction. With the grid construction, you’ll be in a position to choose between 1-4 columns.

Proper right here’s the document construction. You’ll industry the document type, make a choice from 1 or 2 columns, and make allowance or disable showing the events by way of month with headings.

That’s the cover construction. It uses the improvement’s featured image since the background and features the improvement wisdom above. You’ll make a choice from 1-4 columns.

Callout Box

The callout box is where the date and time wisdom can also be displayed, to the left of the image in this construction. You’ll make a selection to show or quilt the callout box. You’ll moreover make a selection to show or quilt the date, month, day of the week, 365 days, and time. For every phase you permit, you’ll be capable to specify the date structure.

Details

In the details tab, you’ll be capable to show or quilt the following fit portions: date, multi-day dates, end date, time, end time, time zone, venue, location, side road deal with, comma after deal with, locality, comma after locality, state, comma after state, postal code, comma after postal code, country, comma after country, organizer, price, elegance, web site, and excerpt.

Excerpt

Proper right here, you’ll be capable to show or quilt the excerpt, show the description or the excerpt, and set the excerpt length.

Further Information Button

Inside the additional knowledge button settings, you’ll be capable to industry the button text and make a selection to show or quilt the button.

Pagination

Proper right here, you’ll be capable to permit or disable pagination and set the pagination type.

No Results Message

The no results message tab is where you’ll be capable to set the text that appears when no results can also be confirmed.

Links

The links tab is where you’ll be in a position to choose what portions are hooked up and the way in which hooked up items behave. You’ll set the improvement internet web page link, make all of the fit clickable, permit elegance, organizer, and venue links, and set the web site link.

Connection

In the end, throughout the connection tab, you’ll be capable to add a keyword that can connect the feed module to a couple different module. For instance, you’ll be capable to use this to glue the feed module to the events filter module, making it so that you’ll be capable to filter the events confirmed throughout the feed. Understand that the connection ID is most efficient important if there are multiple fit filter and fit feed modules on the internet web page. If there are most efficient one amongst every, the filter will connect with the feed module mechanically. We’ll duvet the events filter module in detail underneath.

Design Settings

Inside the design tab, you’ve were given whole keep an eye on over the design of the events feed. You’ll keep watch over the events, image, details, callout, determine text, details text, details labels text, excerpt text, callout date, month, day of the week, 365 days, and time text, no results message text, additional knowledge button, load additional button pagination, paged pagination, numeric pagination, sizing, spacing, border, box shadow, filters, become, and animation. 

Events Clear out

Let’s take a look at the events filter module. You’ll use this module to filter other Divi Events Calendar modules, bettering the content material subject matter confirmed. In recent times, this module most efficient works with the Events Feed module, on the other hand the plugin author has indicated that fortify for the Events Calendar module is coming. That is the Events Clear out module on the front end, with the date range filter made up our minds on, filtering the contents of the Events Feed module underneath.

Let’s take a closer check out the module settings.

Clear out Products Settings

The filter items can help you filter the content material subject matter confirmed throughout the Events Feed module in numerous ways. Each and every filter products is added as a child products all through the Events Clear out module settings, and every filter products has its non-public settings internet web page.

There are 16 different filters you’ll be capable to add to the module: search, routine, elegance, tag, organizer, venue, the town, country, state/province, location, worth, 365 days, month, day, status, time, date range, order by way of, and longer term/earlier.

Within every products’s filter settings, you’ll be capable to set the filter type, label, and make a selection to show comparable longer term, earlier, or each and every fit sorts. Depending on the type of filter you choose, additional possible choices is also confirmed, similar to selection method (single or multiple items), show/quilt a dropdown icon, show dropdown items alphabetically, and search requirements.

Lots of the filter sorts can also be made full-width throughout the design settings, as spotted proper right here with the hunt filter.

You’ll moreover customize the filter text, sizing, spacing, border, and box shadow design possible choices for every filter products, allowing for a large number of design flexibility. Inside the example underneath, I’ve added a dropdown icon to the Organizer filter.

Content material subject matter Settings

Once more throughout the content material subject matter tab of the Events Clear out module settings, you’ll be capable to set the connection to the filter module throughout the content material subject matter tab. This is most efficient important if if you have a couple of set of events feed and events filter modules on the equivalent internet web page. You’ll moreover set a background color for the filter.

Moreover throughout the content material subject matter tab is the construction surroundings. In recent times, the horizontal construction is the only construction available. On the other hand, the plugin author has discussed that there are plans for a vertical construction to be added.

Design Settings

Inside the design tab of the events filter module settings, you’ll be capable to keep watch over the design for all of the filter construction. You’ll customize the forms of the filters, full of life filters, filters dropdown, filters dropdown text, collapse filters, filter search button, sizing, spacing, border, box shadow, become, and animation.

One notable selection right here’s collapse filters. With this surroundings, you’ll be capable to display a “quilt filters” selection that allows you to show or quilt the filters from view. You’ll moreover permit this feature by way of default.

Events Internet web page

The events internet web page module implies that you’ll totally customize how the improvement pages look by way of allowing you to dynamically display fit portions and assemble custom designed events internet web page layouts with the Divi Theme Builder. You’ll create Theme Builder layouts using the Events Internet web page module, providing you with total design flexibility.

Events Internet web page Structure Examples

First, I’m going to create a Divi Theme Builder template for all events.

Inside the theme builder template, I added an image module that is set up to dynamically show the featured image for the publish, a dynamic publish determine module, and the events internet web page module.

Right here’s what this fundamental construction turns out like on the front end, without any styling.

While this fundamental construction is very good, the power throughout the Events Internet web page module lies throughout the skill to use multiple Events Internet web page modules together to create additional interesting, unique layouts. In the details tab of the module settings, you’ll be capable to permit or disable any of the elements. By way of merely enabling one or a couple of the elements in every module, you’ll be capable to place them throughout your design in numerous ways. Proper right here’s an example of a additional difficult construction using plenty of Events Internet web page modules.

And proper right here’s the construction outline throughout the Divi Theme Builder. As you’ll be capable to see, there are multiple fit internet web page modules in this construction that add different fit details to the internet web page.

Proper right here’s a closer check out the Event Internet web page module showing the time and date on the most efficient of the construction. In the details surroundings for this module, most efficient the time and date modules had been enabled.

Content material subject matter Settings

Inside the content material subject matter tab of the Event Internet web page module, you’ll be capable to permit the details you want to display.

Content material subject matter

Under content material subject matter, you’ll be capable to permit the improvement description. Inside the notices possible choices, you’ll be capable to permit different notices that appear in line with fit status or type.

Details

Under details, you’ll be capable to permit or disable the following: date, time, end time, time zone, location, venue, venue phone, venue location, organizer, organizer phone, organizer piece of email, organizer web site, price, elegance, tags, web site, prepositions and dividers, and excerpt. You’ll moreover stack fit details, permit labels/icons, and stack labels/icons.

Google Maps

Under the Google Maps tab, you’ll be capable to permit the Google Maps link, permit the Google Map, and add your Google Maps API Key.

Virtual Events

Inside the Virtual Events tab, you’ll be capable to permit links to a Zoom meeting, Webex meeting, Facebook live video, or YouTube live video. You’ll moreover industry the text for the virtual fit button.

Add to Calendar

The Add to Calendar settings can help you permit the button and keep watch over the button text confirmed.

Link

Inside the Link tab, you’ll be capable to set how the web site link turns out and change the link objective for more than a few fit items. You’ll moreover customize the Background and the Admin label throughout the settings underneath this.

Design Settings

Inside the design tab, you’ll be capable to completely customize the look of every phase. You’ll keep watch over the design settings for the following: earlier fit notice, fit status notice, description text, details text, details labels text, map, add to calendar button, add to calendar links, virtual fit button, sizing, spacing, border, box shadow, filters, become, and animation.

Events Subscribe

The Events Subscribe module is a simple module that allows you to add a calendar subscription button to your construction. On hover, the button displays plenty of different simple subscribe to the events calendar, at the side of iCal, Google Calendar, Outlook, .ics record, and additional.

This module does no longer come with many added possible choices, on the other hand you’ll be capable to completely style the button using the custom designed sorts selection throughout the design tab.

Events Ticket

The Events Ticket module works with the loose Tournament Tickets addon from The Events Calendar plugin to turn tickets and RSVP sections to your fit pages. Inside the module content material subject matter settings, you’ll be capable to permit fit tickets, fit RSVP, particular person confirmations, checkout, and a excellent fortune message.

The plugin author has indicated that this module is new and has limited choices at the time, however, they hope to be able to upload design settings sooner or later. For now, right here’s how the RSVP section displays up on one of the most important fit pages.

Gain Divi Events Calendar

Divi Events Calendar is available throughout the Divi Market. It costs $45 for countless web site usage and 1 365 days of fortify and updates. The price moreover includes a 30-day money-back be sure that.

Final Concepts

Divi Occasions Calendar brings together the potential of The Occasions Calendar plugin and the design flexibility of the Divi Builder in a plugin that makes it easy to turn events to your web site and elegance the modules to test your web site design. Each and every module is easy to use and configure, and most of them have whole design possible choices you’ll be capable to use to create beautiful fit internet web page layouts. For many who’re in search of a great way to turn events to your web site while having whole keep an eye on over the design using Divi, it is a in reality absolute best product for you.

We wish to pay attention to from you! Have you ever ever tried Divi Events Calendar? Let us know what you take into accounts it throughout the comments!

The publish Divi Product Spotlight: Divi Occasions Calendar appeared first on Chic Subject matters Weblog.

WordPress Maintenance Plans | WordPress Hosting

read more