All Collections
FAQ's and Troubleshooting
Is there a popup option within the Divi theme?
Is there a popup option within the Divi theme?

Create custom popups in Divi

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

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

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

  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 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 divi_show_custom_popup

  16. Under the Display on section, check the Everything checkbox

  17. Click on the Save & Exit button

    Optin Display Settings

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

  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 #

  4. 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 it is set, clicking on the module that has the divi_show_custom_popup set will trigger and show the Bloom Custom HTML opt-in.

Using the Popups for Divi extension to create custom popups

  1. Download and Install the Popups for Divi 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 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 here.

Did this answer your question?