Ever wanted to make your website more interactive without diving into complex coding? You’re in luck! Beaver Builder‘s buttons can do more than just look pretty – they can trigger popups too.
In this quick guide, we’ll show you how to turn a simple click into a popup powerhouse. It’s easier than you might think. Let’s get started!
What You’ll Need
For this tutorial, you’ll only need one thing: Popup Maker. It’s a free WordPress plugin that helps you create and trigger popups. It’s packed with features to help you grow your email list, boost sales, and improve conversion rates.
Here’s how to install Popup Maker.
Log into your WordPress dashboard. Navigate to Plugins > Add New from the sidebar:
Search for “Popup Maker” in the search field and hit enter:
Click the Install button next to Popup Maker:
Once installation is complete, click the Activate button:
And you’re done! You’re now ready to create your first popup.
Create Your Popup
To create a popup with Popup Maker:
Go to Popup Maker > Create Popup in your WordPress dashboard:
You’ll see the popup customization page where you can adjust everything from appearance to triggers and visibility:
Give your popup a name (for your reference only).
(Optional) Enter a title for the popup, which will appear above the content.
In the content editor, add your desired content, including shortcodes for popular form plugins or Popup Maker’s built-in form.
Scroll to the bottom of the page to the “Popup Settings” section:
Click the “Add New Trigger” button:
Select “Click Open” from the dropdown menu to make the popup open when a Beaver Builder button is clicked:
Note the class name of the popup – you’ll need this later:
Click “Add” to finalize the trigger.
Finally, click the “Publish” button to make your popup live:
Your popup is now ready to be linked to a Beaver Builder button!
Add The Trigger to Your Beaver Builder Button
Now that you’ve created your popup, it’s time to link it to a Beaver Builder button. Here’s how:
Open any page in Beaver Builder where you want to add the popup-triggering button. Either add a new button to the page from the Modules sidebar, or edit an existing button:
In the Button Settings popup, go to the Advanced tab and scroll down to the Class field:
Enter the class name of the popup you created earlier in the Class field.
Click the Save button to apply the changes.
Click Done in the top right corner and then publish the page:
That’s it! Now when you visit the page and click the button, you’ll see your newly created popup in action.
