How to Create Beaver Builder Popups (2 Methods)

Getting your website’s visitors to take action can sometimes be challenging. While you may have strong Calls To Action (CTA) or prominent buttons, some users will overlook these elements and focus on what they originally came for. Fortunately, popups can be an effective way to drive conversions on your WordPress site. 

In this post, we’ll discuss the benefits of using popups. Then we’ll show you how to create them in Beaver Builder. Finally, we’ll look at some best practices for using popups. Let’s get started!

Best Practices for Using Popups on Your Website

Popups can be effective, but they can also annoy your visitors and drive them away. If you want to create powerful popups on your website, there are a few best practices to keep in mind.

First, you’ll want to avoid using entry popups. These are windows that appear as soon as a visitor lands on your page. They can be intrusive and might prompt users to leave your site.

Additionally, you might want to avoid using the same message for everyone. Personalizing your popups can help you generate more conversions.

You can do this by segmenting your visitors based on their locations, interests, and other factors. This way, you can show them the most relevant messages:

Pixel Happy Studio is build with Beaver Builder and uses a popup to capture emails

You’ll also want to keep your popups on brand. They should fit into your website’s overall look and feel. Using popups that do not align with your visual brand can make your site appear unprofessional.

Moreover, it’s important to keep your content up to date. Visitors may leave your site without converting if a popup contains expired offers or outdated information.

Finally, remember that less is more. Displaying multiple popups can be a little overwhelming for your visitors. You’ll also want to make sure that each popup has a single focus. Trying to accomplish too many things with one popup will only confuse your visitors.

The Benefits of Using Popups on Your Website

Creating popups can be a powerful way to promote your content, engage customers, and increase conversion rates. They can be used for a variety of purposes, such as:

If you’re trying to gain more subscribers, you can create a popup with an opt-in form. You may also want to highlight the benefits of joining your email list (e.g., regular offers or freebies) to boost conversions.

Popups can be hard to ignore. If you want to promote a particular product or offer, they can help you make more sales on your site.

How to Create Beaver Builder Popups (2 Methods)

Now, let’s look at two ways to create high-converting popups for your site.

1. Popup Maker

The first method for displaying popups on your Beaver Builder site is to use a tool like Popup Maker. Once activated, this plugin will give you the option to create your first popup:

Popup Maker welcome screen

You can start by entering a name for your popup. Then you can create the content:

Creating a new popup in Popup Maker

Additionally, you can insert a saved Beaver Builder module or layout with a shortcode. For instance, you might create a popup design in the builder, and then add it here.

You can use Beaver Builder shortcodes for saved rows, columns, layouts, and posts. Navigate to Beaver Builder > Saved Modules and select Add New. Give your module a name, then choose Saved Module under Type and Modal Box under Module:

Next, click on Add Saved Module and select Launch Beaver Builder to create your popup:

Creating a popup as a saved template in Beaver Builder.

When you’re ready, click on Done and Publish. Then, go back to Beaver Builder > Saved Module and locate your popup. Here, you’ll see a shortcode for your module:

Getting the shortcode for the saved module.

You can now go back to your popup in the Popup Maker, and copy/paste that shortcode:

Entering shortode in Popup maker.

If you scroll down to the Popup Settings, you can set the triggers for your popup:

Triggers section of Popup Maker

In the Targeting section, you have the option to show your popup to particular users, based on a selected condition:

Targeting options of Popup Maker

In the Display section, you can select a popup type, modify its appearance, change the size, and more:

Display presets of Popup Maker

If you go to the Close tab, you’ll find some settings for the close button:

Close options of Popup Maker

Once you’re happy with your changes, click on Publish!

2. The PowerPack Addon

Our Beaver Builder plugin comes with a wide variety of modules to choose from. For even more options, however, you can check out an extension like the PowerPack Addon. It adds various new features to the builder, including a popup module. You can choose from various pre-designed templates or build your popup from scratch.

To get started using the second method, you’ll need to have Beaver Builder and the PowerPack Addon installed and activated on your site. Then open a page in WordPress, and select the Launch Beaver Builder option.

Click on the + button in the top-right corner of your screen. In the Modules tab, select PowerPack Modules and search for the Modal Box:

Searching for the Modal Box in Beaver Builder

Drag and drop the Modal Box into the page, and navigate to the settings panel on the left:

The PowerPack Modal Box in Beaver Builder

In the General tab, you can change the width and height of the popup. If you scroll down to the Content section, you can select the type of content you want to display:

Choosing the type of content to display in the Beaver Builder popup

For this tutorial, we’ll be creating an opt-in form. Simply change the Type to Content and enter the shortcode for your form. Alternatively, you could add the Subscribe Form module to your popup:

Insert your opt-in shortcode

In the Settings tab, you can set some conditions for your popup. For example, you can make it appear on the page after 10 seconds:

Adding a time delay for the popup in Beaver Builder.

You might also trigger it upon exit intent, or when a user scrolls down 50 percent of the page.

Under Exit Settings, you can enable the user to close the popup with a button or by pressing Escape on their keyboard:

Editing the settings of the modal box in Beaver Builder

In the Modal Style tab, you can alter the appearance of your content, including the background color:

Changing the styling of the popup in Beaver Builder

You can also customize the close button to make it more visible. If you click on the three ellipses, you can add animation to your popup. For instance, you might make it fade in and out of the page:

Adding animation to Beaver Builder popups

When you’re ready, hit Save, then select Done > Publish. That’s it: you’ve created your first popup with Beaver Builder!


If you’re struggling to engage with your visitors and get them to act, popups might be the answer. A popup can be difficult for users to ignore, and if presented correctly, it can bring positive results.

In this article, we looked at two ways to create Beaver Builder popups:

  1. Install a plugin like Popup Maker: You can use this tool to create a variety of popups and add Beaver Builder modules, rows, and more with shortcodes.
  2. Use the PowerPack add-on: This gives you access to the Modal Box module, which lets you create different popups and customize their settings.

Related Questions

How Can I Trigger a Modal Box via a URL?

To trigger a Modal Box via a URL when using Beaver Builder and the Modal Popup Box module found in the PowerPack Add-on plugin, simply go to Modal Box Settings > Settings > Trigger > Trigger Method > Other, and copy the CSS Class from the field. Then, append the CSS class to the existing URL. For example:[pasted CSS class]

Can I Stop Converted Leads From Seeing the Popups?

There is an option to stop converted leads from seeing the popups. You can do this via the cookie settings in the Popup Maker WordPress plugin. By applying various cookie control options for popups after a visitor fulfills an action, you can stop them from seeing the original popup again. 

It would be totally gnaw-some if you could share this post with your friends.

About Will Morris

Will Morris is a staff writer at WordCandy. When he's not writing about WordPress, he likes to gig his stand-up comedy routine on the local circuit.

Our Newsletter

Our newsletter is personally written and sent out about once a month. It's not the least bit annoying or spammy. We promise.

Try Beaver Builder Today

It would be totally gnaw-some if you could share this post with your friends.

Related articles

ACF Blocks for Beaver Builder and Gutenberg

Have you ever wanted to create a custom module or block that works in both Beaver Builder and Gutenberg? Well,…


What’s New in Beaver Builder 2.7?

The Beaver Builder 2.7 update is already here! So, you might be wondering what new features to expect from our…

How to Display an Instagram Feed in WordPress

How to Display an Instagram Feed in WordPress (In 4 Steps)

Since WordPress discontinued oEmbeds in 2020, you’re not able to insert your Instagram feed into content simply by pasting a…


Join the community

We're here for you

There's a thriving community of builders and we'd love for you to join us. Come by and show off a project, network, or ask a question.