Popups can effectively capture attention, promote offers, or gather user information on your website.
This article will guide you through the steps to create popups in Divi, including design tips and functionality options.
Use the Bloom plugin to create a custom HTML pop-up
Download and install the Bloom plugin
Go to WordPress Dashboard→ Bloom → Optin Forms → New Optin
Create a new opt-in and choose the Popup Style
Give the opt-in a name
Under Select Email Provider, choose Custom HTML Form
In the Insert HTML text area, add your custom HTML code that will be displayed in the opt-in form
Click on the Design Your Optin button
Choose any of the available templates and click on the Next: Customize button
Remove the Optin Title by deleting the Subscribe To Our Newsletter text
Remove the Optin Message text by deleting the Join our mailing list to receive the latest news and updates from our team. text
Set No Image for the Image Orientation option
Click on the Next: Display Settings button
Choose the Intro Animation, by default, that is set to Fade In
Uncheck the Trigger After Time Delay checkbox and the Trigger At The Bottom of Posts checkbox
Check the Trigger on click checkbox and set the following CSS selector:
.divi_show_custom_popupUnder the Display section, check the Everything checkbox
Click on the Save & Exit button
Notes:
For the Trigger on click option, you need to use the entire Class selector, which includes the .(dot) in front of the class name
.divi_show_custom_popupOn the Button module, you only need to add the class name, without the .(dot)
divi_show_custom_popup
Add the button that will trigger the opt-in to show
Edit the page layout or the Header Template or Footer template
Insert a Button module
Set the Text the button will display, and for the Button Link URL, use # or #0
Go to Advanced Tab → CSS ID & Classes → CSS Class and type in divi_show_custom_popup
Pro tip: The divi_show_custom_popup is a CSS class that can be added to any Divi module. Once set, clicking on the module with the divi_show_custom_popup set will trigger and show the Bloom Custom HTML opt-in.
Use the Popups for Divi extension to create custom popups
Download and Install the Popups for Divi extension (for free)
Define a Popup
Enable the Visual Builder on the page where the Popup will be displayed.
Add a new section to the page's layout.
In the Section → Advanced Tab, enable the option This is a Popup and set the popup ID to sample.
Trigger the Popup
Finally, add a new button in the page layout and set the Button Link URL to #sample
Done
Save your page, and load it on the Frontend
Click the button to see your Popup in action!
More details about the Popups for Divi extensions can be found on the Popups plugin's documentation page.