Our favorite WordPress visual builder is Oxygen Builder. We use it not only for our website but on the websites of our clients too. Just like any other WordPress development agency, we use other WordPress visual builder plugins including Elementor, Beaver Builder and Divi but we can't help ourselves by keep coming back to Oxygen Builder. Today, we are going to show you how to create popup using Oxygen Builder a.k.a how to create a popup without using WordPress plugin.
And if you are wondering about the Oxygen Builder ...
Oxygen Builder is an intuitive WordPress builder plugin that allows you to customize the design and layout of your WordPress site. While most drag and drop builders only allow you to do that much, Oxygen Builder gives you full access to the entire site. In the hands of a WordPress developer, it is like having an empty canvas with superuser abilities.
Here are some of the advantages of using Oxygen Builder:
Drag element edges to set spacing, or drag & drop to re-order
Get visual control of every part of your WooCommerce store
Create custom website headers visually, including sticky and overlay headers
Edit colors in one place with Global Colors. Changes take effect everywhere the color was used.
Build with fundamental HTML elements. Write PHP, CSS, and JS live.
Flexible builder elements. Dynamic data with repeaters and loops. And more.
Instead of installing lead popup plugins, Oxygen Builder users can create popup (easily) in just a fraction of the time. The module for creating popup is called Modal.
A Modal is a popup or dialog that overlays a page's content and, typically, must be interacted with in some way in order to return to the page.
Here's how you can create a popup in Oxygen Builder using Modal element below.
Here's how you add Modal to your existing WordPress setup. Add a Modal to your design from +Add » Helpers » Modal.
How to configure and style the modal element in Oxygen Builder?
There are several ways you can configure and style the modal element to create popup in Oxygen Builder.
1. In-editor behavior
This setting determines how the Modal is previewed in the builder.
Inline- The Modal will be displayed inline with the rest of the design's content.
Live preview - The Modal will appear as if it were live, overlaying the design's content.
Hidden- The Modal will be hidden completely in the Builder preview.
This setting determines the condition that causes the Modal to appear.
After number of clicks - Specify a number of clicks after which the Modal will be shown.
After number of page views - Specify a number of page views after which the Modal will be shown.
On page scroll - Specify whether the Modal is shown after the user scrolls down a specific percentage of the page, or when the user scrolls up.
After specified time - Specify a number of seconds after which the Modal will be shown.
After time inactive - Specify a number of seconds of user inactivity after which the Modal will be shown.
On exit intent - Show the Modal when the user attempts to leave the page.
On scroll to element - Specify an element that will trigger the Modal when the element comes in to the viewport. Use the Choose button and then click on the element that should trigger the Modal, or type the element's ID in the field.
User clicks element - Specify an element that will trigger the Modal when the element is clicked. Use the Choose button and then click on the element that should trigger the Modal, or type the element's ID in the field.
You can also specify the frequency with which the Modal should be shown to a given user with the After Modal is Shown dropdown.
Show again on every page load - The Modal will be shown every time the page is reloaded and the given trigger occurs.
Never show again - The Modal will be shown once to a user, and then never shown to that user again.
Show again after - Specify a number of days after which the Modal will be shown to a user again.
3. Content Styles
The Content Styles area allows you to set the Modal's child element layout, horizontal item alignment, vertical item alignment, text color, and background color.
4. Modal Styles
Width - Set the overall width of the Modal container element. This defaults to %, but may be set to PX or VW by clicking the % symbol and choosing a different unit.
Backdrop Color - Set the color of the backdrop. If you want no backdrop, move the alpha slider to 0.
Modal Position - Set the position of the Modal container element.
This setting allows you to determine the closing behavior of a Modal.
Close Modal Automatically - If yes, allows you to specify a number of seconds after which the Modal will be closed automatically.
Close on ESC key - If yes, pressing the ESC key will close the Modal.
Close Modal On Backdrop Click - If yes, clicking the backdrop of the Modal will close it.
Insert Close Button - Inserts a button that, when clicked, will close the Modal.
The Modal element in Oxygen Builder is very sweet. It allows us (website developers) to do quite a lot of things, especially in customization of the popup in your WordPress site.
Looking for an easier option to create a popup in Oxygen Builder? Thrive Leads and OptinMonster are two great alternatives to Oxygen Builder's Modal element. These plugins are beginner-friendly and help you to create interactive popups in just a few clicks.