This is How to Edit HTML in the Divi Theme Without Touching the Code
As a WordPress developer, one of the most common challenges I see with the Divi theme is the inability to directly edit the HTML structure of page elements. Divi is a visual, drag-and-drop page builder that simplifies the web design process, but this convenience can sometimes come at the cost of flexibility.
If you've ever wanted to add a custom title, button, or other HTML element to a Divi module, you've likely run into the frustration of not being able to directly edit the underlying markup. Divi's visual builders abstract away the HTML, making it challenging to make granular changes.
However, there is a workaround that allows you to add custom HTML and CSS to your Divi-built pages without ever touching the theme files. In this article, I'll show you a simple technique to edit the HTML structure of your Divi elements using only the WordPress Customizer.
The Problem with Editing HTML in Divi
Divi is designed to be a user-friendly page builder, which means it hides much of the underlying HTML structure from the end-user. This is great for beginners who want to build beautiful websites without getting their hands dirty in the code, but it can be a roadblock for more experienced developers who need greater control over the markup.
For example, let's say you want to add a custom title above a Divi video module. In a traditional WordPress theme, you might do this by adding an <h2>
element directly in the module's HTML. But in Divi, there's no obvious way to inject this custom HTML.
The Divi Builder does provide some options for adding custom CSS and JavaScript, but these are limited to global-level changes. If you want to make targeted modifications to individual page elements, you'll need to find a workaround.
The Solution: Using the WordPress Customizer
Fortunately, there's a simple solution that allows you to add custom HTML and CSS to your Divi-built pages without ever touching the theme files. This solution involves using the built-in WordPress Customizer, which provides a user-friendly interface for making theme-level changes.
Here's how it works:
-
Access the WordPress Customizer: In your WordPress dashboard, navigate to Appearance > Customize. This will open the Customizer interface.
-
Add a Custom CSS Section: In the Customizer, click on the "Additional CSS" section. This will allow you to write custom CSS that will be applied to your entire website.
-
Target Specific Divi Elements: Using CSS selectors, you can target specific Divi modules or elements and add your custom HTML and CSS. For example, to add a custom title above a video module, you might use the following CSS:
.et_pb_video_overlay_hover::after {
content: "My Custom Title";
position: absolute;
top: -30px;
left: 0;
font-size: 24px;
font-weight: bold;
color: #333;
}
This CSS targets the .et_pb_video_overlay_hover
class (which is used by the Divi video module) and adds an :after
pseudo-element with the content "My Custom Title". You can then style this title using additional CSS properties, such as the font-size
, font-weight
, and color
.
- Save and Publish Your Changes: Once you've added your custom HTML and CSS, simply click the "Publish" button in the Customizer to make your changes live on your website.
It's important to note that this technique is not limited to just adding custom titles or text. You can use the same approach to inject any kind of HTML element, such as buttons, links, or even entire sections of content. The key is to use the correct CSS selectors to target the specific Divi elements you want to modify.
Real-World Example: Adding a Custom CTA Button
To illustrate this technique further, let's consider a real-world example. Imagine you have a Divi-built landing page with a video module, and you want to add a custom call-to-action (CTA) button above the video.
Here's how you might implement this using the Customizer:
-
Target the Video Module: First, we need to find the CSS selector for the video module. Inspect the element in your browser's developer tools, and you'll see that the video module has the class et_pb_video
.
-
Add the Custom HTML: Next, we'll use the :before
pseudo-element to inject the custom HTML for the CTA button:
.et_pb_video::before {
content: '<a href="#" class="custom-cta-button">Click Here to Learn More</a>';
position: absolute;
top: -50px;
left: 0;
display: block;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #0077b6;
padding: 12px 24px;
border-radius: 4px;
text-decoration: none;
}
This CSS adds an :before
pseudo-element to the .et_pb_video
class, which contains the HTML for the CTA button. The content
property is where we specify the custom HTML. We've also added some additional styles to format the button, such as the background color, text color, padding, and border radius.
- Save and Publish Your Changes: Finally, save your changes in the Customizer and publish the updates to your website. The custom CTA button should now be visible above the video module on your Divi-built page.
Advantages of the Customizer Approach
Using the WordPress Customizer to edit HTML in Divi has several advantages over other methods:
-
No Theme File Editing: By making your changes in the Customizer, you can avoid the need to directly edit any Divi theme files. This helps maintain the integrity of your theme and makes it easier to update Divi in the future without losing your custom changes.
-
Easy to Implement: The Customizer provides a user-friendly interface for adding custom CSS, making it a straightforward process to implement your HTML and CSS changes.
-
Scope to Individual Pages: The Customizer allows you to make targeted changes to specific pages or sections of your website, rather than applying global modifications that may not be appropriate in all contexts.
-
Seamless Integration: Since the Customizer is a built-in WordPress feature, it integrates seamlessly with the Divi theme and provides a consistent user experience for your website's administrators.
Conclusion: Unlock the Power of Divi with Custom HTML and CSS
While the Divi theme is known for its visual, drag-and-drop page building capabilities, it can sometimes feel limiting when it comes to making granular HTML and CSS changes. However, by utilizing the WordPress Customizer, you can unlock the ability to add custom HTML and CSS to your Divi-built pages without ever touching the theme files.
This technique opens up a world of possibilities, allowing you to add unique and tailored elements to your website, such as custom titles, buttons, and calls-to-action. By leveraging the power of the Customizer, you can create a Divi-powered website that is truly your own, with a level of customization and control that was previously out of reach.
If you're a Divi user looking to take your website to the next level, I highly recommend exploring the Customizer as a tool for injecting custom HTML and CSS. With a little bit of CSS knowledge and the right approach, you can transform your Divi-built pages into unique, high-converting experiences that perfectly align with your brand and vision.
Flowpoint.ai can help you identify all the technical errors that are impacting conversion rates on your Divi-built website and directly generate recommendations to fix them, including custom CSS and HTML solutions like the one described in this article.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.