What’s in This Tutorial

This tutorial walks you through the steps for creating Beaver Builder popups with Popup Maker.

Beaver Builder Popups in Action

You’ll see how quickly you can create beautiful and professional popups using Beaver Builder and Popup Maker. Check out this short demo to get a taste of what we’re after.

Beaver Builder Popups Created With Popup Maker

In the demo above, we created a simple page in Beaver Builder. The page has a button that launches a popup that displays a saved layout. Inside the popup, we click on a call to action (CTA) button that launches another popup also built with a Beaver Builder saved layout.

Note: You’ll need Beaver Builder Pro to use saved layouts.

Follow these simple instructions, and you too can enrich visitor experience and drive conversions on your site with engaging popups.

Let’s dive in!

Steps To Create Beaver Builder Popups With Popup Maker

1. Choose a saved Beaver Builder layout

Adding A New Beaver Builder Saved Layout

Start by creating a new layout or choosing a pre-made template.

2. Copy the layout’s shortcode

3. Edit a Popup Maker popup

Edit A Popup

Create a new popup or edit an existing one.

4. Paste the Beaver Builder shortcode into Popup Maker

Pasting The Beaver Builder Shortcode Into The Popup Maker Popup Editor

Paste the shortcode into the popup editor to add your Beaver Builder layout to your popup.

5. Set up a popup trigger

Creating A Popup Trigger And Css Class

Set up a popup trigger to make the popup appear on your website.

Be sure to add an Extra CSS Selector, e.g., .go-bb-popup. We’ll add that to your Beaver Builder button in a sec.

Optionally, add a cookie to control how often a visitor sees the same popup.

If needed, add a targeting rule to specify where the popup should appear (e.g., a specific post or page).

6. Save your popup edits

Update Popup

Update or publish your changes to make the popup live on your website.

7. Connect your Beaver Builder button to the popup

Adding The Popup Maker Trigger Css Selector To A Beaver Builder Button

Remember that Extra CSS Selector that you added back in step 5?

Edit the Beaver Builder page. Make sure you add a button for people to click to display your popup.

Copy that CSS selector and paste it into the CSS class for the button that’ll launch your popup.

8. Save your Beaver Builder edits

Clicking The Beaver Builder Done Button

Click Publish or Update to save your changes and make them live on your site.

That’s a Wrap!

This step-by-step tutorial taught you how to create Beaver Builder popups with Popup Maker. We covered 

  • Copying a Beaver Builder layout shortcode
  • Pasting the saved layout shortcode into a Popup Maker popup
  • Creating a popup trigger that’ll launch your popup using a button click
  • Connecting a Beaver Builder button to your popup trigger

You can now efficiently create stunning Beaver Builder popups with just a few clicks using Beaver Builder saved layouts and Popup Maker popups!

If you run into any questions or roadblocks, contact our friendly and knowledgeable support team.