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.
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.
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.
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.
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.
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.”
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.
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.
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.
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)
- Enable Dynamic Events toggle
Enabling the Dynamic Events toggle will make sure that the events that are shown in the module are in the same category or categories as the current event. If you want to show upcoming events in general (not related) then just keep the Dynamic Events toggle off.
NOTE: The current event will not show when using the Events Feed on single event pages.
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.