Content#back to top

Live Preview

Once you've finished adding content to your popup, take advantage of the Popup Preview button. This handy feature allows you to see exactly how your popup will look and behave to your visitors before making it live on your website.

Adding Content to Popups

Popup Box Pro allows you to incorporate a wide variety of content into your popups, making them highly customizable and engaging. You have the flexibility to use either the classic editor or the text editor.

Shortcode Integration

The plugin supports shortcodes from other plugins. You need just insert the shortcode into the popup content.

Built-in Shortcodes

Popup Box Pro provides a set of pre-defined shortcodes for common popup elements:

  • videoBox: Embed a video from YouTube or Vimeo directly into your popup.
  • buttonBox: Create a button with a custom link or a close button for the popup.
  • iframeBox: Insert any iframe content, such as a PDF file or a map, within the popup.

Dynamic Content with Variables

For generating dynamic content that changes with each opening popup, Popup Box Pro supports the following syntax:

{{Variable1 | Variable2 | ... | Variable N}}

  • Replace Variable1, Variable2, etc., with your desired values.
  • Each time the popup opens, a random variable from the list separated by pipes (|) will be displayed.

Example

Let's create a popup that displays a random name and city combination in popup content:

{{David|John|Paul|Mark|James|Andrew|Scott|Steven|Robert}} from cities}} {{New York | Washington | Berlin | Kyiv | Vilnius | Paris | Tallinn }} just buy the product!

With this content, every time the popup opens, your users will see a notification with a randomly chosen name and city.

Style#back to top

Customize the appearance and behavior of your Popup Box Pro popups to perfectly match your website's design and user experience. This section guides you through the various styling options available.

Popup

Popup Box: Main Popup Style

Properties

  • Z-index: This property controls the stacking order of your popup. Higher z-index values ensure the popup appears on top of other elements on your page.
  • Popup Animation: Select an animation effect that defines how your popup appears and disappears.
  • Block Page: Choose whether you want to prevent users from scrolling the background page while the popup is visible.

Dimensions and Positioning:

  • Width & Height: Set the desired width and height for your popup.
  • Position: Specify the exact location of your popup on the screen using:
    • Top: Adjusts the popup's vertical position from the top of the page.
    • Bottom: Adjusts the popup's vertical position from the bottom of the page.
    • Left: Adjusts the popup's horizontal position from the left side of the page.
    • Right: Adjusts the popup's horizontal position from the right side of the page.

Visual Design

  • Radius: Define the curvature of the popup's corners for a smoother aesthetic.
  • Padding: Add space between the popup's content and its border.
  • Shadow: Apply a shadow effect to your popup and choose a custom shadow color.
  • Background Color: Select a solid background color for your popup.
  • Background Image: Optionally, set a background image for your popup.

Overlay

  • Overlay: Show or hide a background overlay behind the popup. This can help draw attention to the popup.
  • Overlay Animation: Choose an animation effect for the popup's overlay.

Content

Popup Box: Content Style

Control the visual presentation of your popup's text using these options:

  • Font Family: Choose the typeface that best complements your website's design and content.
  • Font Size: Set the desired size for the main text within your popup.
  • Padding: Specify the amount of space between the popup's content and its border. This creates visual breathing room.
  • Border Style: Select a border style (e.g., solid, dashed, dotted) to further define the content area.
  • Border Thickness: Control the width of the border around the popup's content.
  • Border Radius: Define the curvature of the content area's corners for a softer appearance.
  • Border Color: Choose a color for the border surrounding the popup's content.

Close Button

Configure the appearance and behavior of your popup's close button to match your design preferences and ensure a clear closing mechanism for users.

  • Close Button Type: Select the style you want for the close button:
    • Text: Displays a text label (e.g., "Close").
    • Icon: Uses an icon to represent the close action ("X").
    • Box: Creates a button with "X" and background
  • Size: Set the preferred size for the close button.
  • Text (For Text Type Only): If you chose the "Text" type, enter the text you want to display on the button (e.g., "Close").
  • Location: Specify where the close button should appear within the popup:
    • Top Left
    • Top Right
    • Bottom Left
    • Bottom Right
  • Placement: Determine whether the close button should be positioned:
    • Inside: Placed within the border of the popup content.
    • Outside: Placed outside the border of the popup content.
  • Color: Select a color for the close button.
  • Background: Choose a background color for the close button (applicable to "Box" and potentially "Text" types).

Mobile Devices

Popup Box: Mobile Devices

Set the popup width for mobile devices if you need

  • Enable on Mobile: Choose whether to display your popup on smaller screens (phones and tablets). You can also set a specific screen size breakpoint to define "mobile."
  • Width: Set a custom width for your popup on mobile devices to ensure optimal viewing and user experience.

Settings#back to top

Triggers

Popup Box: Triggers

Control exactly when and how your Popup Box Pro popups appear on your website using these trigger options:

Trigger Types:

  • Auto: Opens the popup automatically when the page loads. You can optionally set a delay in seconds to control display timing.
  • Click: Triggers the popup when a user clicks on a specific element:
    • Class: Use a class name within an anchor tag <a> or a span element <span> to target a button or element (e.g., <span class="ds-open-popup-11">Open Popup</span>).
    • URL: Opens the popup when a user clicks a link with a specific URL fragment (e.g., <a href="#ds-open-popup-11">Open Popup</a>).
  • Scrolled: Opens the popup when the user scrolls down the page a certain percentage (set using the Scroll Distance option).

Show Once:

Enable this option to set a option that prevents the popup from showing again to the same user for a specified period (in days).

Closing Popup

Determine how users can close your popups and what actions occur after closure with these settings:

Closing Triggers:

  • Overlay Click: Choose whether clicking the popup's background overlay should close the popup.
  • Esc Key: Enable or disable the ability to close the popup using the Esc key on the keyboard.

Targeting & Rules#back to top

This section empowers you to control exactly where and when your popup appears on your WordPress website. Utilize a combination of these targeting options to deliver a tailored user experience.

Display Rules

  • Everywhere: The item will be visible across all your website's pages.
  • All Posts: The item displays exclusively on post pages.
  • Selected Posts: Target specific posts by entering their unique IDs. Separate multiple IDs with commas.
  • Post Has Category: The item appears on posts belonging to the chosen category. Enter the category ID.
  • Post Has Tag: The item displays on posts with the selected tag. Enter the tag ID.
  • Page Type: Select the page types where the item will be displayed. Options include Homepage, Posts Page, Search Pages, and 404 Pages.
  • All Archives: The item appears on all archive pages.
  • All Categories: The item displays solely on category pages.
  • All Tags: The item displays solely on tag pages.
  • All Dates: The item appears exclusively on date archive pages.
  • All Authors: The item displays on all author pages.
  • Category, Tag, Author: Target the item to specific taxonomies by entering their IDs.