Elegant Themes

Out-of-the-box pop-ups are not available in Divi. However, some plugins can create custom popups while using Divi.

Using the <a href="https://www.elegantthemes.com/preview/Bloom/" rel="nofollow noopener noreferrer" target="_blank">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 <code>Subscribe To Our Newsletter</code> text

Remove the Optin Message text by deleting the <code>Join our mailing list to receive the latest news and updates from our team.</code> text

Set <code>No Image</code> 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 on 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
 
 Create a new Bloom 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 <code>Subscribe To Our Newsletter</code> text
10. Remove the Optin Message text by deleting the <code>Join our mailing list to receive the latest news and updates from our team.</code> text
11. Set <code>No Image</code> 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 on section, check the Everything checkbox
17. Click on the Save &amp; Exit button
 
 Optin Display Settings

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 <code>#</code>

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

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 <code>#</code>
4. Go to Advanced Tab → CSS ID &amp; Classes → CSS Class and type in <code>divi_show_custom_popup</code>

Pro tip: the <code>divi_show_custom_popup</code> is a CSS class that can be added to any Divi module. Once it is set, clicking on the module that has the <code>divi_show_custom_popup</code> set will trigger and show the Bloom Custom HTML opt-in.

Using the <a href="https://www.elegantthemes.com/marketplace/popups-for-divi/" rel="nofollow noopener noreferrer" target="_blank">Popups</a> for Divi extension to create custom popups

Download and Install the <a href="https://www.elegantthemes.com/marketplace/popups-for-divi/" rel="nofollow noopener noreferrer" target="_blank">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 in the page's layout. 
3. In the Section → Advanced Tab, enable the option This is a Popup and set the popup ID to <code>sample</code>.

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

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/" rel="nofollow noopener noreferrer" target="_blank">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 in the page's layout. 
 3. In the Section → Advanced Tab, enable the option This is a Popup and set the popup ID to <code>sample</code>.
3. Trigger the Popup
 1. Finally, add a new button in the page layout and set the Button Link URL to <code>#sample</code>
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 <a href="https://divimode.com/divi-popup/#tutorial" rel="nofollow noopener noreferrer" target="_blank">here</a>.

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

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

Using the Popups for Divi extension to create custom popups