Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Before completing this tutorial, you will need to create a Termageddon account on their website and purchase one or more site licenses.
FREE SET OF POLICIES FOR AGENCIES OR FREELANCERS: If you are an agency or freelancer building sites for clients, you get a free set of polices for your own website, and then you can resell policies to your clients! Win-win!
(Click the link or image to go to their home page and then click the “Agency Partners” link in the footer to learn more).
If you are not an agency creating sites for others, no worries! You can use their affordable pricing plans to set up legal policies on your own website!
1. Create Pages For Each Policy
The first step is to create the pages on your website where the legal policies will be embedded. You will need to add a new page for each of the policies you are using. In my case, these are the following pages to create:
- Terms Of Service
2. Prepare The Polices
The next steps are to prepare and copy the legal policies and embed them into your Divi website.
Reminder: This tutorial is not about how to create the policies in Termageddon, but rather how to embed the policies into Divi. Please consult with their helpful resources about anything related to creating the policies.
In your Termageddon account, click on the “View Embed Code” link on each policy, one at a time.
On the next screen, click on the “Advanced” button. This reveals some checkboxes that I find very useful.
I tend to hide the title, and then just add a Text module for my page title instead. You can choose any of these options. I also like to use accordions and left align headings. Anything here is optional, and selecting a checkbox affects the embed link, so just note if you do make changes to these later, you will need to update the embed code.
When you are finished, click the “Copy” button.
3. Embed The Polices On Each Page
Now go back to the corresponding page you created in step #1.
- Enable The Divi Builder
- Add a Text module
- Click the Text tab inside the body text area
- Paste the embed code from Termageddon
- Save and exit the page
Don’t worry if you cannot see a visual preview – it will show when you save and exit the Visual Builder. It will Provide a placeholder message like “Please wait while the policy is loaded. If it does not load, please click here.”
PRO TIP: I like to add my page title as an H1 heading using dynamic content. To do this, check our other tutorial How To Change The Divi Post/Archive Title To An H1 Heading.
Repeat step #3 for each policy before proceeding.
4. Set Up Your Legal Navigation Menu
I prefer to use a WordPress navigation menu with a Divi Menu module when adding legal links to my website footer. For this tutorial, this is the method I will use.
- Go to your WordPress dashboard to Appearance>Menus.
- Click on the “create a new menu” link
- Name it “Legal Menu.”
- Add the pages from step #1
Now your legal menu should look like this:
5. Add The Legal Menu To Your Divi Website Footer
Go to Divi>Theme Builder and edit the global footer template. Most likely you already have a “Global Footer” template set up, but if not, you will need to create one. This is where we will add the Menu module with the legal links.
Add the Divi Menu module to your layout. Typically, this is placed at the very bottom of your site, above or below your auto updating copyright text.
Select the “Legal Menu” you set up in step #4.
You may need to do some minor adjustments to the design of the menu, such as centering the text, adding an underline, and adjusting the color and hover color of the text links.
- Design>Menu Text>Underline
- Design>Menu Text>Text Color (and hover color)
6. Install The Termageddon + Usercentrics Plugin
There are still some very important things to set up, but it will be easy! Thankfully, Termageddon provides a very convenient free WordPress plugin with all the features and settings we need to take our Divi website legally compliant.
Go to your WordPress Dashboard to Plugins>Add New and search for “Termageddon” in the search field.
Click the “Install Now” button and “Activate” button.
The settings can be accessed by clicking the “Settings” link in the plugin listing in the installed plugins list, or from under the Tools menu. I find it easiest to access from the WordPress Dashboard click on Tools>Termageddon + Usercentrics. This brings you to the settings area, which has three main tabs.
7. Configure The Plugin Settings
Embed Code Tab
First, enable the “Administrator” and “Logged-in Users” toggles. Basically this prevents you from seeing the cookie consent screen as the site admin or when logged in, which would be super annoying.
IMPORTANT: Notice that since we are using Divi, at least one of these toggles is required in order to use the Divi Builder. If you are an admin and this is disabled, you will not be able to load the Divi Builder.
Next, enable the toggle for “Hide Privacy Settings Link when cookie consent tool is disabled.” This means the option to edit the cookie consent settings will also be hidden if the cookie consent tool is hidden.
Take notice to the explanation under the Privacy Settings Link heading. The shortcode mentioned here will be used in step #8 and #9.
The last settings are related to showing the cookie consent screen based on the location of the user. This is really not related to this tutorial, but in general you would want to enable this to ensure that you are in compliance with all applicable privacy laws in the locations where you do business.
8. Provide A Cookie Settings Link
The next important step is to provide a way for users to edit their cookie consent settings. This needs to be accessible from any page, so placing it in the global footer Theme Builder templates makes the most sense.
The cookie consent settings link can be added in at least two different ways. One option is the shortcode Privacy Settings which can be placed in a Text module. But wait on that for now. The other method is to use simple HTML link <a id=”usercentrics-psl”>Privacy Settings</a> This works fine, but it is not my recommended method.
I’m excited to share a trick I have discovered that makes integrating Termageddon legal policies into Divi much easier! I think you will like this method, and if you do, be sure to leave a comment below! Note that there may be others ways to do this, but I do believe this will be the best and easiest. To do this trick, continue with steps #9 and #10.
9. Install The Shortcode In Menus Plugin
I have found the best way to handle this is to add the cookie settings link as an additional menu item in the Legal Menu (from step #4). The trick is to add the provided Privacy Settings shortcode as the “Navigation Label” text. I thought it was a long shot, but it actually works (if you install the Shortcode in Menus plugin)!
To do this, you need to install a plugin that enables the functionality of shortcodes in the WordPress navigation menus. Go to your WordPress Dashboard to Plugins>Add New and search for “Shortcode in Menus” in the search field.
Click the “Install Now” button and “Activate” button. There are no others settings, because the functionality is very simple and is automatically enabled.
10. Add The Shortcode To The Legal Menu
Now that the plugin is enabled, you can go ahead and add the shortcode. Go to the Legal Menu in the Appearance>Menus. This trick uses the “Custom Links” option.
- Add a hash # symbol to the URL field (this will be removed, but is required for adding the custom link to the menu)
- Paste the Privacy Settings shortcode in the Link Text field.
- Click the “Add to Menu” button.
- IMPORTANT: Remove the hash # symbol
After removing the hash # and adding the shortcode, your legal menu should look like this:
Save the menu, and you are done!