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 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.
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.
The Theme Builder is an absolutely amazing tool, and if you are not using it yet, I highly recommend you learn how. We have Divi Theme Builder mini course available if you are new to this.
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.
NOTE: This saves the new template itself. From now on, you won’t need to click this button again when making changes inside the actual template. Any changes to the layout inside the template are saved using the normal Save button in the Divi Builder pages settings.
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.
As of Divi version 4.12, you can now access and edit the Divi Theme Builder templates from the frontend.
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.
BONUS: Use Our Free Layouts
If you want to give yourself a head start, you can download and import our complimentary free demo layouts! These are single event Theme Builder templates. We have 12 different designs that you can preview on our demo and download to use on your own sites for free.
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.
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.
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
This is optional and should be added using the Divi Post Content module. Our Events Page module also has a setting for this, but in most cases it is better to use the Post Content 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
- Add an Events Feed module
- Set the Event Count (3 is usually a good choice)
- 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.
