DiviGear Popup comes with extensive features and gives you complete versatility in creating popups. It has several targeting, trigger, and customizing options and supports Divi visual builder functionality.
After installing and activating the DiviGear Popup plugin, you can easily navigate to it from the WordPress dashboard.
Next, clicking on ‘DG Popups’ will take you into the DiviGear Popup arena. After that tapping on the ‘Add New’ button will redirect you to the popup editor screen.
Note: As we are started from scratch that’s why ‘DG Popups’ appears with an empty list. But if you have existing popups, it will display a table listing all your popups.
DiviGear Popup Editor
Here in the DiviGear popup editor, you will get three options to add a title, content, and manage settings.
- Popup Title: Enter a title for your popup. It is required for your backend settings and won’t appear in the live popup.
- Popup Content: This content area provides all the facilities for creating popups. You can add text, links, images, videos, and more. It also supports Divi builder functionality to create popups.
- DiviGear Popup Settings: There are plenty of controlling and customizing features for the popup in the DiviGear popup Settings option. These are divided into four categories – General, Display, Design, and Cookie.
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.
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.
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.
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.