Divi 5 brings powerful new tools for those who want deeper control over their page markup without leaving the Visual Builder. The latest addition, Semantic Element and Custom HTML Wrappers, lets you assign meaningful semantic tags to any element for better accessibility and SEO. At the same time, the dedicated Custom HTML fields add two precise code areas called HTML Before and HTML After.
These fields let you insert valid HTML directly around any Divi element, acting like two built-in Code Modules that attach exactly where you need them. This unlocks advanced customization, such as creating custom parent wrappers in areas a standalone Code Module can’t reach.
In this post, we’ll walk through everything you need to know about Custom HTML wrappers, including where to find them, how they work, and a step-by-step example to get you started right away.
Let’s dive in.
Custom HTML In Divi 5
While Semantic Elements help define what your content is, Divi 5’s Custom HTML wrappers give you the power to add arbitrary markup around it. This feature unlocks advanced customization options directly within the Visual Builder.
Subscribe To Our Youtube Channel
What Are Custom HTML Wrappers?
In Divi 5, two new code fields let you add custom HTML before and after any element. These act as precise wrappers, letting you insert opening and closing tags, attributes, and other valid HTML directly around the element’s output.
These wrappers are found in the same new HTML Option Group in the Advanced tab, right alongside the Element Type selector for semantic tags.
Where To Find Custom HTML Wrappers
In Divi 5, the Custom HTML Before and After fields are part of the brand new HTML Option Group in every element’s settings.
Open the Visual Builder and select any element. Navigate to the Advanced tab.
Scroll to the HTML Option Group. Expand the menu to reveal Element Type (which is used for assigning semantic tags), HTML Before, and HTML After. The HTML Before field allows you to insert custom HTML immediately before the element’s main output on the fronted, while the HTML After field is for placing code immediately after the element’s main output.
Implementing Custom HTML In Divi 5
In this section, I’ll show you how to create an image label using custom CSS at the Page level, then inject the code into the custom HTML fields in the Advanced tab of an Image module.
Step-By-Step Guide To Using Custom HTML
First, I’ll add some custom CSS at the page level that will set the styling for an image label.
Use Divi 5’s Breadcrumbs feature to select the Page Settings.
Navigate to the Advanced tab and expand the Custom CSS dropdown menu.
Enter this CSS snippet into the field:
.custom-label-wrapper {
position: relative; /* This keeps the badge inside the image box */
display: inline-block;
}
.image-badge {
position: absolute;
top: 10px; right: 10px;
background-color: #3A6351;
color: #fff;
padding: 12px 35px;
font-size: 14px;
font-weight: bold;
z-index: 10;
border-radius: 50px;
}
Next, open the settings panel for an Image Module. Navigate to the Advanced tab. Scroll down to the new HTML Option Group and expand it.
To display the image label, you’ll need to add code to the HTML Before and HTML After fields. In the HTML Before field, add the following code:
<div class="custom-label-wrapper"> <span class="image-badge">Learn More</span>
Finally, add a closing div tag to the HTML After field. Once completed, the label will appear in the top right corner of the Image module.
This method differs from the Code module in that it allows precise, embedded injections that wrap or extend existing Divi elements without requiring isolation.
Custom HTML Wrappers vs The Code Module
Divi users have long relied on the Code Module for inserting custom HTML, CSS, and JavaScript. It’s excellent for standalone content, like embedding an iframe, creating new modules, or a custom HTML section that doesn’t need to interact with surrounding Divi elements.
However, the Custom HTML wrappers solve a different problem. They shine when you need precision and integration with existing Divi elements, rather than adding isolated blocks.
Here’s a breakdown of the key differences and why wrappers often win for advanced, targeted customizations.
Structural Placement And Wrapping
The Code Module inserts itself as its own separate block in the layout. Because Divi 5 is built with modules, rows, and sections as distinct, individual elements, a Code Module cannot always wrap around or inject directly into another module’s output.
Custom HTML wrappers, on the other hand, are attached directly to the element you’re editing. They let you add opening tags in HTML Before and closing tags in HTML after, effectively wrapping the module’s content in custom markup.
Wrapping Modules For Effects Beyond Native Options
Custom HTML wrappers let you add a true enclosing parent div (or other tag, like span) that serves as a perfect target for advanced CSS pseudo-elements like ::before and: ::after. This opens up creative possibilities that go far beyond Divi’s native positioning, overflow, shadows, or borders applied directly to the module itself.
Adding a custom parent div or other tag around a module to apply advanced CSS effects like complex clip path shapes or gradient effects that need to target a true enclosing parent. This goes beyond what native positioning or overflow can achieve on the module itself.
For example, you can create a custom clip-path animation on an Image Module by wrapping the module with an HTML class and placing custom CSS at the page level.
You can also apply a neon gradient effect to a Button Module for a little extra flair.
These wrapper-based techniques give you perfect control over effects that feel custom, all without cluttering your layout with extra modules.
Cleaner HTML Output And Layout Simplicity
Using a Code Module means adding additional modules just to place your code, which can clutter the Builder and introduce unnecessary nesting in your page’s HTML. Wrappers keep everything contained within the target element. This results in cleaner, more semantic output on the front end, leading to better performance, easier maintenance, and more control over the final markup.
In short, the Code Module is your go-to for independent custom code sections. Custom HTML wrappers are the precision tool that unlocks deeper integration, giving you more freedom to create custom wrappers and inject code into specific areas of the page that a Code Module can’t access.
Tips And Best Practices
Custom HTML wrappers in Divi 5 are a lightweight yet powerful tool for advanced customization. To get the most out of them while keeping your site clean and performing at a high level, follow these tips.
Always Pair Before And After Correctly
If you open a tag in HTML Before, make sure you close it in HTML After. Mismatched tags are the number one cause of broken layouts, invalid HTML, and strange rendering issues. Double-check every time, and preview the front end after saving.
Use Descriptive, Reusable Class Names
Give your wrappers meaningful classes like neon-glow-wrapper or clip-shape-parent instead of generic ones like div1. This makes your CSS easier to read, debug, and reuse across projects. Prefix with your project name for even better organization.
Keep Injected Markup Minimal And Semantic
Only add what you need in the Before and After fields. Extra empty divs or unnecessary spans can bloat your HTML output. Use them primarily for structural wrappers, helper tags, or pseudo targets. Avoid heavy content; it’s better suited to Divi’s Code Module.
Test Thoroughly On The Front End
Some effects may look different in the Visual Builder versus the live site. Always save, clear your browser cache, and test on all device sizes. Tools like browser dev tools (inspect element) or Sizzy are your best friends for debugging wrapper-related issues.
Prioritize Performance
Avoid overloading wrappers with too many heavy elements or complex animations on every module. Use them selectively on key components, like CTAs. For site-wide effects, consider custom CSS in Divi 5’s Theme Options instead of per-module wrappers.
Know When To Use Wrappers
If the effect can be achieved with Divi 5’s native Design tab options, Nested Modules, or simple page-level CSS, use those first. Reserve Custom HTML wrappers for precision cases, like custom parent targets for complex effects.
By following these guidelines, you’ll harness the power of Custom HTML wrappers while maintaining clean code, fast sites, and frustration-free maintenance. They are a small feature with an oversized impact. Use them wisely, and your designs will stand out.
Custom HTML Is Easy In Divi 5
Divi 5‘s Custom HTML wrappers are a great addition that finally gives Divi users the precision they’ve always wanted, right inside the Visual Builder. What used to require workarounds, extra modules, or custom child theme hacks can now be accomplished more easily, resulting in cleaner code, better performance, and designs that push the boundaries of what’s possible with Divi.
I encourage you to download the latest Divi 5 Public Beta, experiment with custom HTML, and let us know what you think in the comments below.
Leave A Reply