How to create and edit Popups

• Introduction
• How to import a premade popup
• How to create and edit a popup
• Edit popup content with WPBakery
• Edit popup content with Elementor
• How to link popup to a button in your page
• pixfort Popup Options
  • Display Conditions and Popup Size
  • Popup Triggers
  • Popup Design
  • Popup Launcher
  • Advanced options (Control visibility and custom CSS).

In order to start using Popups, you can either import one of the available premade popups using the Demo Importer and then edit it, or you can create your own popup from scratch.

You can find the available popups in your website from WordPress Admin Panel → Popups, for example:

Importing a premade popup is very easy, just go to Essentials → Demo Import → Popups tab, then choose the popup you want, make sure to import the right popup version depending on the page builder you are using (WPBakery or Elementor).

To create a new popup, go to Popups > Add New Popup, then enter a name for the new popup.

After that, you can find the pixfort Popup Options which allows you to control the popup options like (Display Conditions, Popup Design, Popups Triggers, Popup Launcher, etc…).

For more information about pixfort Popup Options you can jump to this section.

To add and edit the content of your popup you can open WPBakery or Elementor (depending on the page builder you are using on your website) by clicking on the page builder button:

You can edit the the content of your popup using WPBakery page builder (Frontend or Backend editor), where you can add any element you want from the Elements Library, the same way as building normal pages using WPBakery page builder.

After creating a new popup, you can start editing it using Elementor page builder (Frontend editor), where you can add any element you want from the Elements Library, the same way as building normal pages using Elementor page builder.

To link popup to a button in your page just open Button Settings and then choose from “Open Popup instead of link” the popup you want to link.

To open a popup from any link in your website, go to WordPress admin panel > Popups and then copy the Popup link:

You can also find and copy the Popup link from pixfort Popup Options of the popup → Triggers → Open from Link, for example:

After that you can use this link in any link on your website (for example: in Feature element, clients element, Simple links,…etc).

To close the Popup using a custom button inside the popup, first add a Button element inside the Popup, then add the class “pix-close-popup“ in the Extra Classes field (in WPBakery) or the CSS Classes (in Elementor) in the Button Settings and set the button link to #.

You can find the pixfort Popup Options in the Popup Edit page, for example:

In the Triggers Tab, you can find the following popup triggers:

• Show Popup on Page Load: Popup will show after loading the page.
• Show Popup on Page Exist: Popup will show when the user cursor exit the browser window.
• Show Popup on Scroll: Popup will show when scrolling the page.
• Show Popup on Scroll to Element: Popup will show when the user reaches a specific element in the page.
• Open from Link: Copy this popup link to open it from any link in your site.

The Design Tab offers extensive customization options for popups, including positioning, style, backdrop, and close button settings. Users can control the popup’s appearance, animation, backdrop color and blur effects, and the close button’s alignment, position, and icon. These features allow for a highly customizable popup experience.

In the Launcher Tab, if you enable the popup launcher, you will have customization options for the popup launcher button, including positioning, style, and the launcher logo.

In the Advanced Tab, you can find the following options:

• Display on Devices: Customize the popup triggers to only execute on certain screen sizes (Desktop, Tablet and Mobile).
• Custom CSS: Add custom CSS to be loaded with the Popup.