Divi Toolbox ➜ Global ➜ Enable Builder Overlays
This settings adds an option to use any Divi section inside an Overlay popup. To add a popup overlay to Divi page, you’ll need two elements with matching CSS classes.
1. Overlay section
Any section in the Builder can be placed inside an overlay. Navigate to section Settings ➜ Advanced tab ➜ CSS ID & Classes and add a custom CSS Class of: dtb-overlay-123
Please note, the number 123 is an example, you can use any number, multiple numbers for multiple overlays, but the number at the end of the CSS class needs to match the number inside the trigger – to connect the link with the popup.
2. Overlay trigger
Any element in the Builder can be used to trigger (show) the overlay. Navigate to Settings ➜ Advanced tab ➜ CSS ID & Classes and add a custom CSS Class of: dtb-show-123
Please note, the number 123 is an example, you can use any number, multiple numbers for multiple triggers, but the number at the end of the CSS class needs to match the number inside the overlay section class – to connect the link with the popup overlay. You can have multiple triggers enabling a single popup (e.g. a “Contact Us” section shown after clicking a link in the Menu and also a Button module).
Additional settings:
In the plugin dashboard, you’ll find following additional settings:
- Blur the background – once enabled, the website content when overlay is opened will be blurred out
- Close the overlay on background click – once enabled, popup will close if the background behind the section is clicked
- Close the overlay with Escape key – overlays can be closed by using Escape key on the keyboard
- Hide overlays in the Builder – when enabled, overlays will only be accessible in the Wireframe view or through the Layers panel in the Builder. This is useful if you don’t want to see the overlays when editing the page. You can also insert overlay section inside the Footer template, at the end of the page content, so it doesn’t interrupt the website design in the Visual Builder.
Custom Close button
By default, every overlay section will include a Close Button (X icon in the top right corner), that can be fully customized in the Toolbox Customizer.
You can also use your own custom close element: it can be an Icon module, a Button module – any Divi Module. It only needs a custom CSS class of dtb-close. If there is an element with that CSS class anywhere with the Overlay section, the default Close Button will be hidden.
Toolbox Customizer ➜ Builder Overlays
Here’s the list of all the settings you can easily change for the overlays:
- Overlay background color
- Close icon color (+ color on hover)
- Close button background color (+ color on hover)
- Button size
- Button border radius
- Button offset (top and right)
- Icon thickness
- Icon border radius
