Elegant Themes

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 <a href="https://www.elegantthemes.com/preview/Bloom/" target="_blank" rel="nofollow noopener noreferrer">Bloom</a> plugin to create a custom HTML pop-up

Go to WordPress Dashboard→ Bloom → Optin Forms → New Optin

Create a new opt-in and choose the Popup Style

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: <code>.divi_show_custom_popup</code>

Under the Display section, check the Everything checkbox

Click on the Save &amp; Exit button

1. Download and install the Bloom plugin
2. Go to WordPress Dashboard→ Bloom → Optin Forms → New Optin
 
 Bloom - Create a new optin
 
3. Create a new opt-in and choose the Popup Style
 
 Popup style
 
4. Give the opt-in a name
5. Under Select Email Provider, choose Custom HTML Form 
 
 Optin configuration
 
6. In the Insert HTML text area, add your custom HTML code that will be displayed in the opt-in form
7. Click on the Design Your Optin button
8. Choose any of the available templates and click on the Next: Customize button
9. Remove the Optin Title by deleting the Subscribe To Our Newsletter text
10. Remove the Optin Message text by deleting the Join our mailing list to receive the latest news and updates from our team. text
11. Set No Image for the Image Orientation option
12. Click on the Next: Display Settings button
13. Choose the Intro Animation, by default, that is set to Fade In
14. Uncheck the Trigger After Time Delay checkbox and the Trigger At The Bottom of Posts checkbox
15. Check the Trigger on click checkbox and set the following CSS selector: <code>.divi_show_custom_popup</code>
16. Under the Display section, check the Everything checkbox
17. Click on the Save &amp; Exit button

- For the Trigger on click option, you need to use the entire Class selector, which includes the .(dot) in front of the class name <code>.divi_show_custom_popup</code>
- On the Button module, you only need to add the class name, without the .(dot) <code>divi_show_custom_popup</code>

Add the button that will trigger the opt-in to show

Edit the page layout or the Header Template or Footer template

Set the Text the button will display, and for the Button Link URL, use # or #0

Go to Advanced Tab → CSS ID &amp; Classes → CSS Class and type in divi_show_custom_popup

1. Edit the page layout or the Header Template or Footer template
2. Insert a Button module
3. Set the Text the button will display, and for the Button Link URL, use # or #0
4. Go to Advanced Tab → CSS ID &amp; 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 <a href="https://www.elegantthemes.com/marketplace/popups-for-divi/" target="_blank" rel="nofollow noopener noreferrer">Popups for Divi</a> extension to create custom popups

Download and Install the <a href="https://www.elegantthemes.com/marketplace/popups-for-divi/" target="_blank" rel="nofollow noopener noreferrer">Popups for Divi</a> extension (for free)

1. Enable the Visual Builder on the page where the Popup will be displayed. 
2. Add a new section to the page's layout. 
3. In the Section → Advanced Tab, enable the option This is a Popup and set the popup ID to sample.

1. Finally, add a new button in the page layout and set the Button Link URL to #sample

1. Save your page, and load it on the Frontend
2. Click the button to see your Popup in action!

1. Download and Install the <a href="https://www.elegantthemes.com/marketplace/popups-for-divi/" target="_blank" rel="nofollow noopener noreferrer">Popups for Divi</a> extension (for free)
2. Define a Popup
 1. Enable the Visual Builder on the page where the Popup will be displayed. 
 2. Add a new section to the page's layout. 
 3. In the Section → Advanced Tab, enable the option This is a Popup and set the popup ID to sample.
3. Trigger the Popup
 1. Finally, add a new button in the page layout and set the Button Link URL to #sample
4. Done
 1. Save your page, and load it on the Frontend
 2. Click the button to see your Popup in action!

More details about the Popups for Divi extensions can be found on the <a href="https://divimode.com/divi-popup/#tutorial" target="_blank" rel="nofollow noopener noreferrer">Popups plugin's documentation page</a>.

Learn how to create engaging popups in the Divi theme to capture attention and enhance user interaction on your website.

Use the Bloom plugin to create a custom HTML pop-up

Add the button that will trigger the opt-in to show

Use the Popups for Divi extension to create custom popups