How to Add a Popup Using the Modal Module
Popups (also called modals) are useful for displaying announcements, forms, or quick information without sending visitors to a new page. With the Modal Module in BeaverBuilder, you can easily add a popup anywhere on your site.
Open Your Page in BeaverBuilder
-
Log in to your WordPress dashboard.
-
Navigate to the page you’d like to edit.
-
Click Beaver Builder to launch the visual editor.
Add the Modal Module
-
In the top-right corner, click the plus (+) icon to open the modules panel.
-
Search for Modal.
-
Drag the Modal Module into your layout where you’d like the trigger (button, image, or text) to appear.
Configure the Trigger
The trigger is what users click to open the popup. You can choose:
-
Button – Add a call-to-action (e.g., “Learn More,” “Register Now”).
-
Image – Use an image as the clickable trigger.
-
Text – Use a word or phrase as the trigger.
Update the trigger text, button style, or image as needed.
Add Content to the Modal (Popup)
-
In the Modal settings, go to the Content tab.
-
Choose your content type:
-
Text/HTML – Add formatted text, links, or embed codes.
-
Saved Row/Module – Reuse an existing BeaverBuilder layout.
-
Template – Insert a saved template.
-
-
Add your content (e.g., an announcement, contact form, or schedule).
Style the Popup
-
Go to the Style tab.
-
Adjust the modal width, background color, and padding.
-
Customize the overlay (the shaded background behind the popup).
-
Update the close button style if desired.
Save and Publish
-
Click Save in the Modal settings.
-
At the top right, click Done > Publish.
-
Test your page to confirm the popup works properly.
Best Practices:
-
Keep popup text short and to the point.
-
Use for important notices (registration deadlines, schedule updates).
-
Don’t overwhelm users with too many popups—one per page is ideal.
-
Always include a clear close button.
