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 of 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 😀
Link popup to a button in your page
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!
Open a Popup from any link
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: currently Automatic and Exit popups are applied globally on the site and the option to set an Automatic or Exit popup for specific pages is not available.
- Note: Automatic and Exit popups are designed to be shown once for the visitors, this prevents showing the same popup each time the visitor open a page.
- Note: make sure that you already have created popups in your website, otherwise, no popups will be available to choose from!
