The Popup Editor – Introduction

The popup builder consists of the following sections:

Below we will introduce each section by providing a small description and a link to the documentation page for each section.

Gutenberg Editor

FireBox uses the Gutenberg Editor to help create your popups easily alongside the features provided by Gutenberg and the endless possibilities available by utilizing the block system.

Design

The design section allows you to set the look and feel of your popup. Below you can find the available settings:

  • Size of the popup (width and height) for desktop/tablet and mobile devices
  • Padding (space inside the popup)
  • Margin (space outside the popup)
  • Text color
  • Background color
  • Text Position
  • Popup shadow
  • Close button
  • Open/Close animations
  • Border styling
  • Background Overlay
  • Background Image

You can read more on the Design documentation page.

Behavior

The Behavior section allows you to set the popup's position, how it will trigger as well as how many times it should appear. Below you can find the available settings:

  • Popup Position
  • Trigger Point
  • Opening Behavior
  • Closing Behavior
  • Accessibility

You can find more on the Behavior documentation page.

Publishing Rules

The Publishing Rules section allows you to define where your popup should appear across your site. Below you can find the available settings:

  • Mirror Popup (Mirror Publishing Rules of another popup)
  • Matching Method (Whether all or any of the rules need to be valid for the popup to appear)
  • Show by
    • Page / URL
    • Date / Time
    • User / Visitor
    • WordPress Content
    • Visitor Platform
    • Geolocating
    • System / Integrations
    • Advanced

You can find more on the Publishing Rules documentation page.

Actions

The Actions section allows you to listen to popup events (open, close) and perform actions such as open/close another popup, closed all opened popups, redirect to a page, and more! Below you can find the available settings:

  • Action
    • Open/Close/Destroy Popup
    • Close all opened popups
    • Redirect to URL
    • Reload page
    • Run javascript
  • Event
    • Before Open/Open/After Open
    • Before Close/Close/After Close
  • Delay

You can find more on the Actions documentation page.

Advanced

The Advanced section allows you to add your own custom CSS/Javascript code as well as customize some miscellaneous popup settings such as test mode, RTL mode, etc... Below you can find the available settings:

  • Custom Javascript
  • Custom CSS
  • Test Mode
  • Enable RTL
  • Prevent Page Scrolling
  • Statistics
  • Class Suffix
  • Ordering (z-index)

You can find more on the Advanced documentation page.

Was this helpful?