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.
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
Start by creating a new layout or choosing a pre-made template.
2. Copy the layout’s shortcode
3. Edit a Popup Maker popup
Create a new popup or edit an existing one.
4. Paste the Beaver Builder shortcode into Popup Maker
Paste the shortcode into the popup editor to add your Beaver Builder layout to your popup.
5. Set up a popup trigger
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 or publish your changes to make the popup live on your website.
7. Connect your Beaver Builder button to the popup
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
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.