{"id":6435,"date":"2016-10-03T23:19:33","date_gmt":"2016-10-04T06:19:33","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=6435"},"modified":"2016-10-13T12:26:09","modified_gmt":"2016-10-13T19:26:09","slug":"site-wide-popup-box-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/site-wide-popup-box-beaver-builder\/","title":{"rendered":"How to Create a site-wide Popup Box with Beaver Builder &#038; PowerPack"},"content":{"rendered":"<p>One of the\u00a0best and unique features of PowerPack Beaver Builder addon\u00a0is its <a href=\"https:\/\/wpbeaveraddons.com\/demo\/modal-box\/\">Modal <\/a><a href=\"https:\/\/wpbeaveraddons.com\/demo\/modal-box\/\">Popup<\/a> Box module. This module allows you to create popup box on your site using Beaver Builder. This popup box can be used to display special offers, discounts, signup forms, contact form, page content, video etc.<\/p>\n<p>Creating a site-wide popup box can eliminate the need of using a popup maker plugin. Site wide popup can also help you generate more leads. The Modal Popup Box module for Beaver Builder allows you to create auto-load, exit-intent and 2-step popup box. Here&#8217;s a video by Colin Cartwright that will give you insights into the capabilities of Modal Box Module.<\/p>\n<p><iframe width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/ZXFVM0DwNTA?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>In this tutorial, I am going to share how a Modal Popup Box can be\u00a0used\u00a0across all the pages of a site.<\/p>\n<h3>Create a Popup Box with PowerPack<\/h3>\n<p>First of all, you will need to create a popup box using PowerPack&#8217;s Modal Box module. To do this, drag the module to a page and adjust the settings for modal popup box as per your requirements.<\/p>\n<p>For this demo, I am using a simple modal popup box with a Photo and auto load duration of 2 seconds. You can check the settings in the screenshots below.<br \/>\n<img decoding=\"async\" class=\"aligncenter wp-image-6436 size-full\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-1-e1475560860740.png\" alt=\"modal-popup-box-module-beaver-builder-1\" width=\"698\" height=\"563\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-1-e1475560860740.png 698w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-1-e1475560860740-300x242.png 300w\" sizes=\"(max-width: 698px) 100vw, 698px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-6437\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-2.png\" alt=\"modal-popup-box-module-beaver-builder-2\" width=\"700\" height=\"561\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-2.png 700w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-2-300x240.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Now, we will need to save this module. To do this, click the &#8220;Save As&#8230;&#8221; button and give it a name. I use small letters and hyphen in the name so that it&#8217;s easy to re-use it within a shortcode.\u00a0<img decoding=\"async\" class=\"aligncenter size-full wp-image-6438\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-3.png\" alt=\"modal-popup-box-module-beaver-builder-3\" width=\"700\" height=\"250\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-3.png 700w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-3-300x107.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>After the module is saved, you can delete it from the page as we will be embedding the Popup on all the pages using custom code.<\/p>\n<p>If you ever need to re-edit the Popup Box, you can do that from &#8220;Saved Modules&#8221; section in Page Builder.<\/p>\n<p>Next, let&#8217;s embed the\u00a0Popup Box. To do this, we will use\u00a0a hook from the Beaver Builder theme along with a PHP function. Please paste the code shared below in your theme \/ child theme&#8217;s functions.php file<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/psahalot\/24bb6b28a7f2a59550e8e86a71fb6c2c.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/psahalot\/24bb6b28a7f2a59550e8e86a71fb6c2c\" target=\"_blank\" rel=\"noopener\">Gist<\/a>.<\/noscript><\/div>\n<p>The above code uses Beaver Builder Theme&#8217;s <strong>fl_after_content <\/strong>hook\u00a0to add our\u00a0Popup Box. We have\u00a0used Beaver Builder&#8217;s shortcode to insert the saved module after the page content.<\/p>\n<p>If you are using <strong>Genesis<\/strong> then you will need to replace <strong>fl_after_content<\/strong> with\u00a0<strong>genesis_after_content.<br \/>\n<\/strong>If you are using\u00a0<strong>GeneratePress\u00a0<\/strong>then you will need to replace <strong>fl_after_content<\/strong> with\u00a0<strong>generate_after_content.\u00a0<\/strong><\/p>\n<p><em>It is always recommended to load elements like popup box or other promotional stuff at the end of the page so that it gets lower priority in search engines.\u00a0<\/em><\/p>\n<p>That&#8217;s all! You will now see the Modal Popup Box auto load on every page of the site after a delay of 2 seconds (or whatever you have set.) Isn&#8217;t that cool? This just makes me love Beaver Builder even more. Don&#8217;t have PowerPack Beaver Builder addon yet? <a href=\"https:\/\/wpbeaveraddons.com\/pricing\/\">Get it now!<\/a><\/p>\n<h3>Bonus: 2 Free Popup Box\u00a0Templates<\/h3>\n<p>I am also sharing two templates that we built using PowerPack and Beaver Builder.<br \/>\nYou can download it from <a href=\"https:\/\/www.dropbox.com\/s\/pknkq04h21vb7gt\/popup-templates.xml?dl=0\" target=\"_blank\" rel=\"noopener\">here<\/a><\/p>\n<p>To use these templates, you will need to import the XML file using WordPress importer.<br \/>\nGo to WP admin &gt; Tools &gt; Import &gt; WordPress Importer &gt; Upload the XML file and import it.<\/p>\n<p>You can edit these templates from Page Builder&#8217;s &#8220;Saved Rows&#8221; section. To use these templates in Modal Box, simply set the content type to\u00a0<strong>Saved Templates\u00a0<\/strong>and select the template that you would like to use.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-6444\" src=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-4.png\" alt=\"modal-popup-box-module-beaver-builder-4\" width=\"993\" height=\"670\" srcset=\"https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-4.png 993w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-4-300x202.png 300w, https:\/\/wpbeaveraddons.com\/wp-content\/uploads\/2016\/10\/modal-popup-box-module-beaver-builder-4-768x518.png 768w\" sizes=\"(max-width: 993px) 100vw, 993px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the\u00a0best and unique features of PowerPack Beaver Builder addon\u00a0is its Modal Popup Box module. This module allows you to create popup box on your site using Beaver Builder. This popup box can be used to display special offers, discounts, signup forms, contact form, page content, video etc. Creating a site-wide popup box can&hellip;<\/p>\n","protected":false},"author":1,"featured_media":6261,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12,27],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/6435"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=6435"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/6435\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/6261"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=6435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=6435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=6435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}