View Categories

Divi Popup Overview

6 min read

The Divi Popup plugin is the latest addition to the DiviGear website. It can be used to create a popup for Divi. Let’s explore all the features this plugin has.

First of all, you need to install the plugin. Here is our guide to installing a plugin in WordPress By DiviGear.

After installing and activating the DiviGear Popup plugin, you will find a new menu item in your WordPress dashboard navigation bar.

Clicking on ‘DG Popups’ will take you into the DiviGear Popup arena. From here, you can-

  • Create a new popup
  • Manage Popups
  • Import & Export Popups

Let’s Create & Explore all the features of this plugin-

DiviGear Popup Editor

In the DiviGear popup editor, We divided setting options into three parts.

  • Title: Give a title to your popup. It wouldn’t show in the front end.
  • Content: The content area shows the WordPress classic editor. You can also use Divi Builder. Whatever you create here will appear as the content inside the popup.
  • DiviGear Popup Settings: Here is the popup control. Customize and functionized the popup from here. All the settings are divided into four categories – General, Display, Design, and Cookie.

General Settings

Popup Status: Toggle ON to activate the popup display on your website.

Popup Target ID: Assign this auto-generated ID to your targeted element/content as like link or URL.

Trigger Type: Choose from six trigger types as the website visitor’s action to show the popup.

  • Click: Use this trigger type to show a popup with a click action.
    • CSS Selector: You have to define the CSS class or ID for the click trigger type selector. Don’t forget to add that CSS class or ID in the Advanced tab of the module settings.
  • On Load: Use this trigger type to show the popup upon page load.
    • Delay: Set the duration (in seconds) between the after-page loading and the before-popup trigger.
  • On Scroll: Use this trigger type to show the popup after scrolling a specific point on a web page. This value can be set in pixels or percentages.
    • Scrolling Trigger Offset: Enter the scrolling length in pixels or % based on the targeted point of your website.
  • Scroll To Element: Use this trigger type to show the popup when hovering over a certain part of the website.
    • Scroll To Element Trigger Selector: Define the CSS class or ID for the targeted element selector. Don’t forget to add that CSS class or ID in the Advanced tab of the module settings.
  • On Exit: Use this trigger type to reveal the popup while the visitor going to exit the page.
  • On Inactivity: Use this trigger type to show a popup when visitors have been inactive for some time.
    • Inactivity Duration: Enter the duration in seconds of user inactivity.

Prevent Page Scroll: Disable the page scrolling option when the popup is in the viewport.

Popup Content Scroll: Enable this button when popup content is larger than the window height.

Display Settings

Specify User Role: Set the custom role type to show the popup. By checking the ‘All’ checkbox, all selected types of visitors will see the popup.

Specify User Device: Set popup display based on desktop, tablet, and mobile devices. You have the option to check them all as well.

Condition Settings: You can apply conditions here to display your popup. Use include or exclude conditions for the entire site or for specific posts, pages, or projects. 

If you select a specific post type, such as post, page, project, or category, you’ll see another box. You can leave that box blank if you choose all post types. But if you want the popup to appear on specific pages, you must write the post title there.

Design Settings

Popup Position: Select one of nine different positions to display the popup.

Animation Style: Choose from 8 different animation styles for popup opening effects.

Animation Duration: Set the popup animation speed in milliseconds. (1 sec = 1000 ms)

Animation Delay: Define the animation revealing speed in milliseconds. (1 sec = 1000 ms)

Animation Timing Function: Here you can control the animation timing function styles from multiple options.

Close Animation: Clicking this button will enable popup close animation.

  • Close Animation Style: Choose an animation style from 8 options to enable close animations.
  • Close Animation Duration: Adjust the duration of your animation to speed it up or slow it down. Here units are in milliseconds.
  • Close Animation Timing Function: Here several options are available for changing the close animation timing function styles.

Overlay Background Color: Set the overlay background color.

Overlay Background Gradient: Add a gradient to the overlay background.

Hide Close Button: Enable this option to hide the popup close button.

Note: Enabling this button, will not let you access the next Close Button Position, Move Close Button Inside Popup Area, and Close Button Design settings.

Clickable Outside Popup Area: This option enables direct interaction with the content displayed outside of the popup container.

Note: Enabling this button, will not let you access the next Close On Overlay Click button

Close On Overlay Click: Enable this option to let visitors turn off the popup by clicking outside the popup content area.

Close Button Position: Display the close button in nine different positions.

Move Close Button Inside Popup Area: Use this option to place the close button inside the popup.

  • Close Button Position in Inside Popup: Control the popup Close Button display position from multiple options

Close Button Design: Enabling this button will allow you to design the close button.

  • Button Color: Choose the color for the close button.
  • Button Font Size: Set the close button font size in pixels.
  • Button Font Weight: Specify the close button font-weight from multiple options.
  • Button Line Height: Define the close button line height in pixels.
  • Button Background Color: Choose the button background color.
  • Button Padding: Apply padding around the close button.
  • Button Margin: Adjust the margin around the close button.
  • Button Border: Set the width of the close button border.
  • Button Border Radius: Set the border radius to determine the roundness of the close button border.
  • Button Border Color: Give color to the close button border.

Cookie Settings

You can set the popup displaying the activity period in the Cookie Activity attribute. There are three options to play –

Never: To keep the default popup settings, select ‘Never’. It does not generate cookies for the user.

Per Period: If you want to schedule it according to a period (hour/day/month), choose this option. Selecting this opens up the following options –

  • Period Type: Define the popup run time according to hour/date/month.
  • Period Value: Add the period value according to the previous option’s choice. Such as – 6 hours, 7 days, or 1 month.

Once Only: Will display the popup only once.

Submit a Comment

Your email address will not be published. Required fields are marked *