Building Site-wide Modal Popups in Beaver Builder & UABB

Popups and opt-in forms are a trend now! Although Google has announced a lower ranking for websites displaying intrusive popups, you can still make sure your popups perform well without distracting your audience.

With the increase in the demand for popups, there are many well-known popup builders available online.

Standing by our words of making the Ultimate Addons the ONLY addon you’ll need to build a wonderful website using Beaver Builder, we give you an easy to use modal popup module that helps you design and display popups in minutes. All this without having to purchase another popup building plugin for your website.

Whether you want to share updates, promote videos, distribute coupons, or simply attract subscribers and build an email list, you can do all this using a single module.

Like those in Beaver Builder and the UABB modules, the Modal popup module can be dragged and dropped with easy settings to display it in minutes.

Creating a Modal Popup

The very first step to create a modal popup, is to simply drag and drop the UABB modal popup module on the page.

You will find the settings window as shown below.

This is where you can design the popup and control its behavior on a page. You can refer to the article here to see the various settings you can work with for the modal popup module.

Save the Modal Popup as a Template

Note: Since this includes saving a module as a template, it won’t be possible to use site-wide Modal popups with Beaver Builder lite. You need to have a paid version for this.

Once you are done designing and building this module, you can save it as a template too.

If you are planning to use the above created popup on the entire website, you can delete the popup from the above page, once you have saved it as a template on your site.

You can always re-edit your modal popups through the Saved Modules section in the Page Builder.

Embedding the Modal popup site-wide

In order to be able to embed a popup and make it compatible with all your themes, we will use the ‘wp_footer‘ hook with a PHP function. You can paste the following code in the functions.php file of your theme / child theme.

function ultimate_modal_popup() {
    echo do_shortcode('');
}
add_action('wp_footer', 'ultimate_modal_popup');

And if you’re looking to add a Modal Popup having Exit intent on certain pages you can add the same using the above code with some changes as shown below –

function ultimate_modal_popup() {
     if( is_page( 89, 90, 91, 107, 168 ) ) { // 89, and other Page IDs can be replaced by your page IDs where you require the Exit Popup to be displayed.
         echo do_shortcode('');
     }
 }
 add_action('wp_footer', 'ultimate_modal_popup');

Note:- You can either use Page IDs or Slugs of the pages where you require the Popup to be displayed.

All set!

This assures that the modal popup you just created, will be displayed on all the pages of your website!