Popup

These fields will allow you to create and customize a popup.

Additionally, if you choose the popup content to be custom, these fields will be available to add and style the popup custom content.

Content Tab > Popup > Trigger On

Choose here how the popup should be triggered. These are the available options.

Page Load (default)

The popup will be triggered on page load.

Page Scroll

The popup will be triggered after a page scroll. You can enter the page ofsset value in the Page Percentage field.

Image/Icon

If you selected the Image/Icon trigger option, an image or icon will be rendered and the popup will be triggered when either hovering over or clicking on it.

Also, a new toggle field will appear in the design tab called Trigger Element so you can style the image or icon.

Button

If you selected the Button option, a button will be rendered and the popup will be triggered when either hovering over or clicking on it.

You can use the Button field to customize the button text.

This field is responsive from DonDivi Builder 1.0 (Divi 4), meaning that you can choose different text for different devices.

Same applies for the custom content text (title, body and button text) in order to be able to create fully responsive content.

Also, a new toggle field will appear in the design tab called Trigger Element so you can style the trigger button.

Element

If you selected the Element option, the popup will be triggered when either hovering over or clicking on the page element that you choose.

In order to choose a page element, you need to enter the element CSS class in the Element CSS Class field.

Exit Intent

If you select the Exit Intent option, the popup will be triggered when the user attempts to navigate away from the page.

Content Tab > Popup > Delay

The popup will be triggered right away. In case that you want to add a delay, please enter here the time in miliseconds.

Content Tab >  Popup > Show On Hover

This field will be available iif you have selected the Image/Icon, Button or Page element options in the Trigger On field.

If enabled, the popup will be triggered when the user hovers over the element.

Content Tab >  Popup > Show Close Icon

Want to show a close icon to dismiss the popup? If so, enable this field. A new field will appear that will allow you to change the default close icon.

Content Tab >  Popup > Close On Icon Click Only

If you enable this option. The user won’t be able to close the popup by clicking ouside it. Also, the cursor will change from a cross to the default one.

This field is responsive, so you can have different close behaviors in different devices.

Please, remember that the user will always be able to close the popup by pressing the ESC key.

Content Tab > Content > Disable Page Scroll

This toggle field will prevent the user to scroll the page while the popup is open.

Content Tab > Content > Preview in the Builder

Enable this helpful module field to temporary view how the popup will be displayed in the front-end.

We recommend that you disable this field after previewing/editing the popup, so the popup does not distract you while editing other elements of your website

Content Tab > Content > Content

Here you can choose what content the popup should display.

Custom

The popup will display custom content.

All the custom content fields are documented here.

Divi Layout

The popup will display a Divi Layout. You can choose the Divi Layout from the Layout select field.

Disclaimer: Divi messes up the styles when injecting a module inside the same module, as explained here. For this reason, we recommend that you don’t select a layout that includes a DonDivi Popup module.

Although it can work under certains circumstances, chances are that you run into style issues.

Design Tab >  Popup> Location

This responsive field will allow you choose the popup location.

You can place the popup in nine screen positions: top-left, top-center, top-right, left-center, center, right-center, bottom-left, bottom-center and bottom-right.

Since this field is responsive, you can choose different locations for different devices.

Design Tab >  Popup > Popup Max Width

Here you can change the maximum width that the popup content should take up.

For example, if you content takes up all the screen width, you might want to decrease the popup width by entering a value here.

Default is 80% and you can set different maximum width values to different devices.

Learn more about this field and see some examples in the Popup Link Type documentation that is based in DiviMenus, but explains common popup fields that you will find in DonDivi modules that offers popups.

Design Tab >  Popup > Popup Max Height

You can change the popup maximum height as well. Default is 80% and you can set different maximum heights to different devices.

Design Tab > Popup > Background Color

This responsive field will allow you to set a background color to the popup. This is more useful when using content popups, but you can use it in layout popups as well.

Design Tab > Popup > Overlay Color

Here you can change the color of the page content around the popup. This field is responsive as well, meaning that you can have different colors for different devices.

Design Tab > Popup > Close Icon Color and Width

These two responsive fields are available if you are showing a close icon and will let you change the icon color and width styles.

Design Tab > Popup > Border and Padding

You can here add a custom border to the content popup, as well as set the border radius and the popup padding.

Note: The border fields are available if the popup is displaying custom content.

Custom Content

These fields are available if you chose the the popup to display custom content and will allow you to add and style the popup custom content.

Content Tab >  Content > Image/Icon

You can choose here whether an image or icon should be displayed in your content.

Default is none and this field comes with responsive options, so you can display different content in different devices. You can even display the content for specific devices only!

If you select either an image or an Icon, a new toggle called Content Image & Icon will appear in the Design tab (which we will document later).

Content Tab > Content > Title

This field, that comes with responsive options too, will allow you to display a title to your content.

The responsive options will let you choose different titles for different devices. You can even choose which devices should display a title!

Also, you can enter a URL in the Title Link URL field in case you want the title opens a destination URL. You will be able to also choose whether the URL should be opened in the same tab or not.

Content Tab > Content > Body

Here you can add the main content. This field offers responsive options too, which is very cool and helpful when it comes to tooltips.

You can even choose which devices should display the body!

Content Tab > Content > Button

Add a text here if you want to display a button. This will be the button text.

This field, same as all the custom content fields, comes also with responsive options. Meaning that you can choose different content for different devices. You can even choose which devices should display a button!

Note: You need to enter a URL in the Button Link URL field so that the button is displayed.

Design Tab > Popup Image & Icon > Icon Color

This responsive field will allow you to set a custom color for the icon.

Design Tab > Popup Image & Icon > Image/Icon Width

This responsive field will allow you to set a custom size for the image or icon. Default is 50px if you selected an icon and 100% in case you are displaying an image.

Design Tab > Popup Image & Icon > Image/Icon Placement

This responsive field will allow you to choose whether the image or icon should be displayed above the tile, body and button (default) or should be placed at the left.

Design Tab > Popup Image & Icon > Image/Icon Alignment

This field will align your image or icon to the left, right or center when you are displaying the image or icon above your content. Otherwise, it will vertically align the image or icon.

This field, same as all the custom content fields, comes with responsive options.

Design Tab > Popup Image & Icon > Image/Icon Offset

This responsive field will allow you to set the distance between the image (or icon) and the content (title, body and button).

The default offset is 20px.

Design Tab > Popup Image & Icon > Image/Icon Margin & Padding

Finally, you can add some padding or margin to the icon or image.

Design Tab > Popup Text

These fields will allow you to style the title and the body text. For the title you can choose the heading level.

For both of them (title and body) you will be able to style the font, font size, font color, letter spacing, etc.

Design Tab > Popup Button

These toggle fields will allow you use custom styles for the button and will let you to align it to the left, right or center of your content.

Advanced Tab > Custom CSS > Image/Icon

Need further customization for the image (or icon)? Enter your custom CSS here.

Advanced Tab > Custom CSS > Title

Here you can enter additional CSS for the title.

Advanced Tab > Custom CSS > Body

Finally, you can enter additional CSS for the body as well.

Animation

You will be able to add transition animations to the popup.

In order to add a transition animation, we offer the DonDivi custom effects in this module.

Popup Animation > Enter Effect

You can choose an enter effect here. In other words, you will be able to animate the popup when it appears.

Default is none, meaning that no DonDivi effect will be applied.

If you don’t select a DonDivi effect, the content that is appearing is a layout popup and you have set a Divi animation in the Divi layout, then the Divi animation will run.

However, if you select a DonDivi effect, no Divi animation (if any) will run and the selected effect will be applied instead.

These are the available enter effects:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Popup Animation > Enter Effect Animation Intensity

Here you can choose how subtle or aggressive your enter effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Popup Animation > Exit Effect

You can choose an exit effect here. In other words, you will be able to animate the popup when it disappears.

Default is none, meaning that no DonDivi effect will be applied.

If you don’t select a DonDivi effect, no animation will run at all.

These are the available exit effects for this module:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom

Popup Animation > Exit Effect Animation Intensity

Here you can choose how subtle or aggressive your exit effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Popup Animation > Opacity

You can add opacity to the selected effect.

Note: this will not be aplicable if you have selected the fade effect for obvious reasons (the fade effects animate the opacity).

If you enable this field, a new field will appear called Opacity Intensity, where you will be able to choose how suble or aggresive the opacity will be. Default is 100%.

Popup Animation > Duration

Finally, you can set the effect duration in miliseconds. Default is 1000ms.

Resources

Developers

The dondivi-popup event is triggered when a popup is triggered. You can handle this event if needed.