Overview
When you install The Events Calendar plugin, it automatically creates a main centralized page where all your events are displayed called the Events Archive page. However, this has many limitations and without the Theme Builder and our Divi modules you would not be able to edit this page. In this video and written guide, I am going to show you how to override this page with a custom Divi Builder layout using the Theme Builder and our Divi Events feed module.
1. Set Up The Main Events Archive Page
What Is The Events Archive Page
When you install The Events Calendar it creates a main page called the Events Archive Page where it displays all of the events on your website. Buy default, this page is always located at the URL slug of “yourdomain.com/events/.” This page is auto-generated and it impossible to use the Divi Builder to change the design or layout of this page without our plugin.
Override The Main Events Archive Page
Since you cannot edit this page, you may be tempted to just create a new regular page and ignore this default /events/ page. But this is not recommended, as now you would have two different pages on your website showing events and visitors could accidently find the wrong one. Instead, you should use the Divi Theme Builder to override and replace this default page with a template. This allows you to build and customize the events archive page using the Divi Builder. Without our plugin, this would be impossible. But now you can use our custom event modules along with any other Divi modules to create the perfect event layout!
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.
NOTE: Any time you make changes like this, make sure you go to WordPress Settings>Permalinks and click the blue save button. This will reset the permalinks and amke sure everything updates to the new slug.
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.
2. Create A Divi Theme Builder Template
Go To The Divi Theme Builder
To begin, head on over 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
Start by adding 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 main Events Archive page, so scroll down to the “Events” section and click on “Events Archive Page.”
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.
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 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.
3. Build The Events Archive Page Divi Layout
At this point, you can build the page however you want. You can use any Divi modules you want, and of course you will want to use at least one of our modules, like the Events Feed module or Events Calendar module.
Do NOT use the Dynamic Events toggle on the Events Archive template!
