How to create a custom Pop-Up template

Who is this article for?

Anyone who owns Divi Den Pro and wants to know how to create a custom Pop-Up template.

See how to create other templates here: Create your own custom Divi Theme templates

• Skill level: Easy
• Time to complete: 5+ minutes

Video Tutorial

Creating the template

1. Go to Pages > Add New to create a new page:

Add your content by using the back-end or the front-end Divi builder.
You can add any content you would like.

2. Allow your visitors to close the pop-up by clicking the close button. To do this, create a button module, go to settings, select Advanced tab, and add this class: close_icon

3. Assign a class to the whole section. Go to section Settings > Advanced tab > CSS ID & Classes.

For the CSS class, type: ddp_pop_up

4. Add style

To add the background to the pop-up, do that in the row settings.
To add an overlay, assign the background colour to the entire section.

5. Save the layout and assign it to two categories: PHP Template and Pop-Up

6. Go to Divi Den Pro > Theme Builder > WordPress Customizer.
Toggle Divi Den Pro, then toggle Pop-up Customizer.

From the drop-down menu, choose the pop-up template you just created.

Select the option to show the pop-up on all site pages:

And finally, click the Publish button.

Optional: Trigger pop-up on click

You can also display the pop-up only when a visitor clicks a button.
To trigger the pop-up on the click event, add the class: ddp_pop_up_trigger for the element that is clicked (button).