Popup Builder is one of the features offered by the pro version of Brizy. You can use it to create popups on your WordPress site in a visual way, without coding. Depending on your purpose and needs, you can use the Brizy popup builder to create any type of popup. From a marketing popup to collect leads or just an announcement popup. Thanks to its on-click trigger support, you can even use the popup builder to create a full-screen menu or off-canvas menu on your Brizy-powered WordPress site.
Basically, creating a popup using the Brizy popup builder feature is not different from creating a page or a template using Brizy. You can add any element you want, without exception. For instance, you can add a form element and connect it with HubSpot to collect leads. Or, you can display a featured product on your WooCommerce store. Whatsoever.
How to create a popup in WordPress using the Brizy popup builder
Since the popup builder is only available on the pro version Brizy, you need to upgrade your Brizy to the pro version in case you haven’t done so. There are three plans offered by Brizy, including a lifetime plan if you hate the subscription-based option.
The Brizy popup builder supports the following trigger types:
- On page load
- On click
- After inactivity
- On page exit intent
- Show after X
- On scroll
- Arriving from
In addition, the Brizy popup builder also supports display conditions. Meaning that you can set the popup you create to appear on specific pages on your website. You can either create the popup from scratch or from a premade template. Brizy offers over 40 premade popup templates you can choose from.
To start creating a popup using Brizy, go to Brizy -> Popups on your WordPress dashboard. Click the Add New button to create a new popup.
Give your popup a name and click the Publish button on the right side then click the Edit with Brizy button to edit the popup using the Brizy editor.
You will be taken to the Brizy editor after clicking the Edit with Brizy button above. Click the plus button on the canvas area to start editing the popup. As you can see, there are tens of popup templates you can choose from. Simply select the one you like to import it to the Brizy editor. Or, you can click Create your own if you want to create the popup from scratch. In this example, we will create the popup from scratch.
Before adding any content to the popup, you can set set alignment of the popup first as well as the popup size (height and width). To do so, you can click the mixer icon on the upper-right corner to open the settings bar. To set the alignment (vertical and horizontal), you can click the align icons. To set the size, you can click the gear icon.
Once done setting the popup size and the alignment, you can start adding the content. Simply drag the element you want from the left panel to canvas area. As we mentioned, you can add the content to the popup just like when you are creating a page or template with Brizy. New to Brizy? You can read this article to learn how to use Brizy.
Setting the trigger and display condition
Once you are done adding and editing the content, you can set how and where the popup to appear by setting the trigger type and display condition. To do so, open the settings bar by clicking the mixer icon on the upper-right corner. Click the popup icon (leftmost) followed by the Display Conditions link.
Under the TRIGGERS tab, select a trigger type you want to use from the dropdown menu (you can add multiple trigger types). To set the display conditions, you can switch to the CONDITIONS tab. Same as trigger, you can also add multiple display conditions. Click the Save button to apply the changes.
Customizing the popup
To make your popup more compelling, you can customize it. You can set things like the overlay color, popup background, entrance animation, close button, and so on. Here are some customizations you might want to make.
Settings the popup background
To set the popup background, hover your mouse over the popup and click the grey tiny arrow icon on the top-left corner of the popup area. If you want to use an image as the background, you can click the Background tab. If you want to use a solid color as the background, you can click the Colors tab. From the Colors tab, you can also set the border color — as well as the border size –, and box shadow.
Setting the overlay color
If you create the popup from scratch, your popup will have a purple overlay with a certain opacity level. To change it, click the mixer icon to open the settings bar. Click the Colors tab to open the color picker. Simply select a color you like and set the opacity level accordingly.
Setting the entrance animation
You can also apply an entrance animation to your popup to make it looks not clumsy. To do so, hover your mouse over the popup and click the tiny grey icon on the top-left corner of the popup area. Click the gear icon followed by the More Settings link to open the settings panel.
You can set the entrance animation on the Entrance Animation option under the Advanced tab on the settings panel. There are also options to set the animation duration as well as the delay beneath the Entrance Animation option.
Customizing the close button
By default, your popup has a white close button. To customize it, you can click the close button to open the settings bar. To disable/enable the close button, you can click the third icon (from the left) on the settings bar. To set the position, you can click the last icon. To set the size, you can click the star icon. To set the color, you can click the Colors tab to open the color picker.
The bottom line
Brizy (the pro version) comes with a popup builder feature, allowing you to create popups on your WordPress site without installing an additional plugin. When creating a popup using Brizy, you can add any element just like when you are creating a page. The Brizy popup builder supports a wide range of trigger types as well as display conditions to allow you to control the behavior of the popup you create.
One minor thing. The popup you created with Brizy will only appear on the Brizy-powered pages and templates. The popup won’t appear on the pages or posts you created with WordPress block editor (Gutenberg) unless you create a custom template for the single post and page using Brizy.