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:

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:

• Advertising a special offer
• Directing the visitor to a related blog post
• Building an email list

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:

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

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:

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:

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

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

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

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

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

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:

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

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:

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:

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:

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:

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

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:

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

Conclusion

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: https://www.mysite.com/#[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.