How to create Popups

How to create Popups

In order to start using Popups, you can either import one of the available premade popup layouts using the Demo Importer, or you can create your own popup from scratch using WPBakery page builder or Elementor page builder.

Importing a premade popup using Demo Importer

Importing a premade popup is very easy, just go to 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).

Demo Import page (Popups tab)

Creating new popups 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, to edit the popup you can choose between WPBakery or Elementor depending on the page builder you are using .

Popups > Add New Popup

Enter popup name and choose between WPBakery or Elementor

You can also choose the size of the popup, there are 5 different sizes:

  • Extra small (4 Columns)
  • Small (6 Columns)
  • Medium (8 Columns)
  • Big (10 Columns)
  • Full width (12 Columns)
Building popups with WPBakery page builder

After creating a new popup, you can start editing it 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.

WPBakery page builder (Frontend editor)

  • Important: for better experience while using the popup builder it’s recommended to use Rows instead if Sections.
  • Also make sure to choose a background color for the Row to avoid having a popup with transparent background.

The result: a beautiful popup 😀

Building popups with Elementor 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.

Elementor page builder

  • Note: make sure to choose a background color for the Section to avoid having a popup with transparent background.

The result: a beautiful popup 😀

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.

Button Settings in WPBakery

Button Settings in Elementor

You can also link popup to a button in the header, to do that open the button settings (by clicking on the button element) from the Header Builder, then choose from the option “Open a popup instead of a link” the popup you want to link:

  • Note: make sure that you already have created popups in your website, otherwise, no popups will be available to choose from!
This feature requires Theme version 1.2.6 or newer

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

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

Close a Popup from a custom button inside the popup

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 the Button Settings and set the button link to #.

Add Automatic or Exit Popup

To add an Automatic or Exit popup to your website just open Theme options > General > Popups and then choose the type of popup you want to add.

Theme options > General > Popups

  • Note: make sure that you already have created popups in your website, otherwise, no popups will be available to choose from!
pixfort
pixfort
Essentials support team
hub.pixfort.com

Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub

Related Posts