Create a Popup Section in Divi

Edit a page in the Visual Builder

Open the page that should display a Popup and start the Visual Builder of Divi.

Open the Section Settings

Scroll down to the «Get in Touch» section and click on the Settings icon to open the Section Settings panel.

Add a CSS class and ID

Open the «Advanced» tab in the Section Settings and enter the CSS class «popup» the ID «contact»

Good to know

The class «popup» turns a regular Section into a Popup. You will see an instant change in the Visual Builder: The Section shows a box-shadow and a grey margin.

When you do not see this visual change, then your Popup will not work. Either the Popups for Divi plugin is not activated, you made a typo or you mixed up the ID and Class fields. Also, you can only turn Divi Sections into a Popups, not rows, modules, or anything else.

The ID can be anything you w

Edit the Section in Divi

Box Shadow

Out of the box, each Popup has a default shadow applied. You can use the Divi Builder to override this default and define a custom shadow effect.

Border Radius

Also a Border or Border-Radius that is applied to the Divi Section is displayed correctly inside the Popup.

Custom Width

The default width of a Popup is 90% of the initial window width.

You can define a custom width by changing the Sizing options f the Divi Section.

Pro-Tip

For best display on all devices, set the Width to 100% and configure the size via the Max Width setting.

Remember to always preview your Popup with the Tablet and Mobile Preview options of the Visual Builder.


Use built-in options (CSS classes)

There are multiple layout options built into the plugin that can be enabled by applying CSS classes to your Popup Section.

Hint: You can combine more than one of those layout classes!

Default shadow (default)

When you did not define a custom box-shadow in the Visual Builder, a light shadow effect is applied to your Popup

no-shadow: Enable default shadow

To disable the box shadow and create a flat Popup, add the class «no-shadow» to your Popup.
There are multiple built-in styles of the Close button which is displayed in the top corner of every popup. Here is a complete list of your options:

Standard Close button

By default every popup shows a dark close button with light background

no-close: Hide the Close button

Add the CSS class «no-close» to the Popup Section to completely hide the Close button.

close-alt: Only show the Icon

With «close-alt» you can turn off the square background color of the close button. Only the Icon is displayed.

dark: Invert the Close Button colors

The «dark» class makes the Close button compatible with a dark background color or a dark background image.

dark close-alt: Only a white Icon

The combination «dark close-alt» changes the color of the Close button and hide the background color.

Here’s a shortlist of all the CSS classes we have covered so far:

popup
no-shadow
no-close
close-alt
dark

How to trigger your Popups in Divi

Divi Element Links

This is the most common way to trigger a Popup: Simply point a Module Link URL to the Popup ID.

We have done this in our first part when we set the Module Link URL to «#contact»

You can actually use any Link URL that a Divi Module provides. Here’s a brief overview of the most common Modules to use:

Button

Buttons are by far the most common option to trigger a Popup!

Simply set the Button Link URL.

Call To Action

In a Call To Action Module, you can set a «Button Link» and a «Module Link».
 
It’s best to only set one of both Links, to not confuse your users. Both Links will work as a Popup Trigger.

Blurbs

Blurbs also offer two Links, very similar to the CTA Module above.

And again: You can use both Links to trigger a Popup, but I recommend to only use one Link.

Images

Many people oversee the flexibility of the Image Module.

You can use the Image Link URL as a Popup Trigger. The image could be a product image or some CTA/banner.

Other URLs in your Content

Divi offers many Modules that have a Link URL attribute that you can use to create a Popup Trigger. But sometimes you want more flexibility and display a Popup via a Link inside your content.

That’s also possible, and actually very easy as well!

Select text in the Visual Builder

Click the «Link» Icon and enter the Popup ID
You can also insert a Link via the classic editor in the Module Settings Panel.

Set the Link URL to the Popup ID

Or you can insert the link directly into the HTML code of the Module.

Pro-Tip

You can even add the trigger-URL to elements that are outside the post-content: You could change an item in your main menu or page footer into a Popup Trigger!


Via a CSS class

This feature is a hidden gem in the plugin! You can turn an entire Module into a Popup trigger by adding a custom class to the Module.

The class name must use the prefix «show-popup-» followed by the Popup ID (without the hash). For example, to show the Popup «#contact» you need to set the class name to «show-popup-contact».

How to design a Popup once and reuse it in many pages

Global Popups

To re-use the same Popup on multiple pages, just save the Popup Section in your Library, as a global item:
Remember to save your page, after you added the item to your Library.

Now you can insert your global Popup on any other Divi page. Use the «Load From Library» tab to re-use your Popup:

Attach styles and logic to the Popup

One thing you need to keep in mind is custom Code: CSS and JavaScript code must be inserted into the Popup Section itself – as I’ve recommended in the past emails. Though, in this case, it’s not a recommendation but a requirement.

Make sure that the Code Module is inside your global Section
When you edit the code, it must have the green title bar

Custom close buttons

Did you know that Popups can be extended with custom close buttons?

It’s possibly easier than you might think. Create a button (or a different Module) that has the CSS class «close». Like this button:

About modal Popups

Another behavior pattern is the so-called «modal» Popup.

By default, you can close each Popup in five ways:

Click on the dark background outside the Popup
Click the Close Icon
Click on a custom close Button inside your Popup
Hit the ESC key on your keyboard
Use the JS API (we’ll explore this soon)

Making a Popup «modal» means, that it cannot be closed by clicking the background.

is-modal

Creating modal Popups is simple:

Add the CSS class «is-modal» to the Popup Section. Done!

To make the modal behavior even more emphasized by removing the default close button from the top right corner.

In that case, you might want to add a custom close button to the Popup. It

is-modal no-close

To emphasize the Popup contents, remove the default close button and make the Popup modal.

The user needs to click your custom close button.

How to control your Popups using the powerful JS API


The JS API

All Divi Popups are triggered via Javascript. The plugin provides a JS library with a public API to control all Popups.

We have talked about Triggers before and how to create one: It’s as simple, as adding a «#popup-id» link target to a Button.

Behind the scenes, the plugin scans the entire document for links that point to a popup. When clicking on such a link, the plugin calls the API function "DiviPopup.openPopup('#popup-id')".

The two most important API functions are «DiviPopup.openPopup( id )» to open the specified Popup. And the opposite function is «DiviPopup.closePopup( id )» that closes the defined Popup again.

How to use JS API

Using the JS API is very similar to adding custom CSS to your Popup:

Add a Code Module into the Popup Section and paste your Javascript code into it.

Good to know

Most API functions take a Popup ID. This ID is case sensitive but the #-prefix is optional. Following two commands are identical:

DiviPopup.openPopup(‘contact’);
DiviPopup.openPopup(‘#contact’);

This command will trigger a different (or no) Popup, due to the uppercase letters:

DiviPopup.openPopup(‘Contact’); // ‘contact’ is not ‘Contact’!

Example 1: Open Popup after Delay

The most basic example for a custom trigger, is a time-based one. Adding a timer in Javascript is one of the simplest things to do. So, we’ll start with this behavior.

This is a sample script, which opens the «#contact» Popup after 5 seconds:

<script>
window.setTimeout(function() {
DiviPopup.openPopup('contact');
}, 5000);
</script>

 

As promised, here’s a general template that you can copy-paste into your Popup. Only replace the first two variables with the ID of your Popup and the delay (in seconds):

<script>
(function() {
  var popup = 'contact'; // Your Popup ID.
  var delay = 5; // Delay [seconds].
  window.setTimeout(function() {
    DiviPopup.openPopup(popup);
  }, delay * 1000);
})()
</script>
 

Example 2: Open Popup on Scroll

The other Trigger which you’ll most likely want to use sooner or later is the «Show after scrolled down» behavior. This is a little bit more complex because we need to observe the window scroll event. But it’s still rather straight forward.
 
Here’s a copy-paste sample to show a Popup after scrolling X pixel:

 


<script>
(function($) {
  var popup = 'contact'; // Your Popup ID.
  var distance = 500; // Scroll distance [pixel].

  $(window).on('scroll.popup_' + popup, function() {
    // Check if the user scrolled far enough.
    if ( $(window).scrollTop() < distance ) {
      return;
    }

    // Remove the custom scroll event, so the Popup is
    // only displayed once.
    $( window ).off( '.popup_' + popup );

    DiviPopup.openPopup(popup);
  });
})(window.jQuery);
</script>


 

Also, you might want to show the popup after scrolling X percent instead of a fixed Pixel amount. This is what you are most likely to use in global Popups:
<script>
(function($) {
  var popup = 'contact'; // Your Popup ID.
  var distance = 25; // Scroll distance [percent].

  $(window).on('scroll.popup_' + popup, function() {
    var scrolled = 100 *
      $(window).scrollTop() / (
      $(document).outerHeight() -
      $(window).innerHeight()
    );

    // Check if the user scrolled far enough.
    if (scrolled < distance) {
      return;
    }

    // Remove the custom scroll event, so the Popup is
    // only displayed once.
    $( window ).off( '.popup_' + popup );

    DiviPopup.openPopup(popup);
  });
})(window.jQuery);
</script>

What else you can do using Popups for Divi

Popups within Popups

Yes, that’s right: You can trigger a Popup from within another Popup! Whenever a Popup is made visible, the plugin scans the entire Popup-contents and activates Popup Triggers.
 
The second Popup is opened in a new layer, above the first Popup. When you close the second Popup you will see the first Popup again.
 
That allows you to add inline help/tooltips to a Popup or even create some type of Wizard that’s build with Popups.
 
Here’s an example for a 2-step Wizard workflow:

The first step

Section ID: step1
Section class: popup no-close
 
Button 1 Text: Cancel
Button 1 URL: #
Button 1 Class: close
 
Button 2 Text: Next
Button 2 URL: #step2

The second step

Section ID: step2
Section class: popup no-close
 
Button 1 Text: Back
Button 1 URL: #step1
 
Button 2 Text: Finish
Button 2 URL: #
Button 2 Class: close

The single Popup workflow

The above example has one drawback: When you click on the «Finish» button in the second step, you’ll see that only the second Popup closes. The first Popup is still open in the background and becomes visible again.

To prevent this, add the class «single» to both Popups. That class enables the «Single Popup» mode for that Popup.

That Single-Mode ensures, that only a single Popup is visible. When other Popups were open before, the Single-Mode will close them first.

So, set the classes for both Popups to «popup no-close single» and you’re all set! That allows you building advanced workflows and Wizards on your pages.

Here’s a short example of both modes compared:

Class «popup no-close»
Class «popup no-close»

Embedd iframes in a Popup

It’s possible to add an iframe inside a Popup, using the Code-Module. However, iframes start loading only when the Popup is already visible:
 
First, it opens empty and starts loading the iframe. After a brief delay, the iframe content shows up.
 
There’s a solution for that case: Add the CSS class «with-loader» to the Popup. As the name suggests, this will display a loading animation until the iframe is fully loaded.

 

The Fallback-Technique

 

In the first email, I’ve explained, that a Popup Trigger will open a Popup, and do nothing else. So when a Popup is opened, the plugin prevents any other action from happening.

Try this, for example:

1. Edit your Sample Page and make sure that you have a Popup with the ID «#contact» in place. Save the page, when needed.

2. Now open your wp-admin panel and visit the «Appearance > Menus» page. In the top click on «Screen Options» and check the «CSS class» box.

3. Add a menu item that links to your Contact page (or any other page). Now the magic element: Set the CSS class of that menu item to «shop-popup-contact»

4. Save the menu and open your Sample Page. What happens when you click on your menu item?

This is what happens

  • When you are on the Sample Page, the menu item will trigger the Popup.
  • When you are on any other page, the menu item will simply follow the link to your Contact Page.

 

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies