Overview

In this area of our Divi Events Calendar plugin documentation, you will learn everything you need to know about creating and designing single event pages!

We are please to offer the first and only solution of building single event pages with Divi! Without our plugin it is impossible, but now you can use our custom event modules to design the layout of single event pages directly in the Divi Visual Builder! This revolutionary plugin opens up tons of possibilities that are otherwise impossible, and this is one of the main reasons many customers purchase Divi Events Calendar!

Recommendations

Before we dive into our recommend method, let’s take a quick look at the possible single event page design options.

 Use Our Events Page Module In A Dynamic Divi Theme Builder Template

The best option of course is to use our plugin, and more specifically our Events Page module which has all the settings you need for single events pages. This module can be placed in a Divi Theme Builder template for super easy template designs, using any layout you want with any Divi modules! The templates can be applied automatically to all of your events, selected events, or specific event categories. The module includes settings for all the features and options that are shown on a normal single event page with The Events Calendar. Please refer to the instructions below!

 Build Each Event Page Individually With Our Events Page Module

Another option would be to build each event page, but this is not recommended. This means you would enable the Divi Builder on each event page and build the description area with Divi modules instead of just at text editor. This would require our Events Page module to show the event related items. Keep in mind if you do enable the Divi Builder on event pages, you are only actually editing the “description area” meaning you are not even editing the entire page. This method does not make much sense and is quite limited.

 Use The Divi Theme Builder With The Post Content Module

The last and least favorable option is to simply use the Divi Theme Builder to create a Divi layout for the single event pages. This option does not give you any control over the content and design of the event details. It uses the Post Content module to simply show the default content of The Events Calendar through a dynamic “window” and that’s it. This is not a very helpful option, as it is essentially pointless, but prior to our plugin it was the only option.

 Do Not Use Gutenberg Block Editor On Events Pages

By default, The Events Calendar uses the classic WordPress editor, which is really nice for events. They do have a checkmark in their settings somewhere to enable the Gutenberg block editor, but that’s not really needed when using Divi and our plugin. I do not recommend using the Gutenberg block editor on event pages.

 Use The Classic WordPress Editor On Event Pages

It is best to keep the default WordPress editor enabled for the single event pages. This will make things so much easier for you.

1. Create A Divi Theme Builder Template

Go To The Divi Theme Builder

The first thing you need to do is go to the Divi Theme Builder. You can find that from the Dashboard under the Divi menu, Divi>Theme Builder.

Create A New Template

Go ahead and create a new template. To do that, just click on any of the gray squares that say “Add New Template.”

Assign The Template

When you create a new Theme Builder template, a new popup will appear for you to choose where to apply this template. In our case, we want to create a template for all of the single event pages, so scroll down to the “Events” section and click on “All Events.”

Make sure the green checkmark is added, and then click the blue button at the bottom of the popup that says “Create Template.”

Now you will see your newly created template.

Add Custom Body

A Theme Builder template has a Header, Body, and Footer. In our case, we want to create the main body area of the single event pages, so click on “Add Custom Body.”

This will bring up a small new popup with two options. In that popup, click on the “Build Custom Body” option.

As soon as you click on this, the Theme Builder template will open up. You will be greeted with the typical three options that Divi shows whenever you create any new page or template. In our case, we want to build the layout from scratch, so click on the first blue option called “Build From Scratch.” You can click anywhere on the first option or on the blue “Start Building” button.

Get To Know The Template Editor

You will now be inside the template editor. At the top of the page you will see a purple bar. In the top left corner will be the name of the template you are editing. In our case, the template is the All Events Body Layout. In the top right corner is an X to exit the template.

The rest of the template will feel very familiar. Everything else is the same as editing any regular page in the Divi Builder.

Exit The Template

Before we actually start building the Divi layout, let’s take a detour! The reason for this is because it is important to understand how to exit, save, and access the template again (the way Divi handles this can be a bit confusing at first).

Exit the template editor by clicking the X in the top right corner.

Save Changes

Now you will be back on the main Theme Builder page. To save the new template you just created, go to the top left corner and look for the green button that says “Save Changes.” This button needs to be clicked in order to save the new All Events template that was added to the Theme Builder.

Wait for the button to change to “All Changes Saved.” From now on you won’t need to click this button unless you make a change in the Theme Builder area.

Open & Edit The Template

Now that the template is created, it is time to start designing! Locate the All Events template that you just created and click the pencil edit icon in the gray Custom Body.

This opens the template editor, and you can proceed with creating your single event page layout.

2. Design The Single Event Page Layout

At this point, you can design the layout of the single event page however you want, using a combination of normal Divi modules and our event modules. When someone clicks on an event, this is the main single page they will see.

Back Button

You may want to have a back button on your single event page like how The Events Calendar does it. This is easy, and you can do it with a regular Divi Button module. Just add the module and style it however you want, and then follow our tutorial to make it into a functioning browser back button.

How To Create A Browser Back Button In Divi

Event Status Notice

You may also want to place a notice here to show the status of the event. For example, if the event has already passed, you can show a past event notice using the Events Page module. Or if the event is cancelled or postponed, you can show a notice here.

Event Title

The single event title can be added using standard Divi modules. The two main options in Divi are the Post Title module, or a Text module. Using the default Post Title module is probably the easiest, but personally I prefer to use a Text module. To use the Text module method, add the module and click the dynamic content icon and choose “Archive/Page Title.” Then use our tutorial trick linked below to set the title to an H1 heading level.

How To Change The Divi Post/Archive Title To An H1 Heading

Event Featured Image

Most of the time you probably want to show the event featured image. This of course is added in the backend of the event page details. To show this dynamically, you have tow main options in Divi, either with the Post Title module, or with an Image module. I highly recommend using the Image module with dynamic content. Simply add the Image module, select the dynamic content icon, and choose “Featured Image.”

Event Excerpt

This is optional and could be added using a Text module and dynamic content set to the “Post Excerpt.” Make sure you have excerpt text added in the backend of the event page.

Event Description

You can add the event description either with the Divi Post Content module or with the description option in our Events Page module.

Event Details

You can add any event details that you want. The key here is to use the Events Page module. Remember, you can use this module multiple times! Just turn on or off the options in each module. I highly recommend checkout out the video about the Events Page module, as this gives a full overview of how to use the module to create a single event page.

Related Events

Sometimes it is nice to show a few related events at the bottom. The Events Feed module is perfect for this and can be added here to single event pages. Normally a good number of events to show is 3

1. Add an Events Feed module
2. Set the Event Count (3 is usually a good choice)
3. Set the Events Selection setting to Related Events

Setting the Related Events option will make sure that the events that are shown in the module are in the same category or categories as the current events.

NOTE: The current event will not show when using the Related Events setting.

Previous & Next Event Navigation

You may prefer to add previous and next navigation buttons to your event. This can be achieved with the Divi Post Navigation module.