Optional: Change The Events Slug
There is a setting in The Events Calendar which allows you to change the /events/ slug to something else. For example, you may prefer to use something like “/upcoming-events/” instead. To change the slug, just go to The Events Calendar>Settings and change the “Events ULR slug” to whatever you want.
It is totally up to you to decide whether you leave the default events page as /events/ or change it to something. The most important thing to realize is that you will now override the default content of that event archive page with your own Divi layout the Theme Builder and Divi modules.
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 events archive page, 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 Events Archive Page 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 Events Archive 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 Events Archive 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.
Do NOT use the Dynamic Events toggle on the Events Archive template!