Thomas Barregren

This WordPress plugin extends the functionality of both the <a href="https://wordpress.org/plugins/beaver-builder-lite-version/" rel="ugc">free</a> and the <a href="https://www.wpbeaverbuilder.com/" rel="nofollow ugc">paid</a> versions of the Beaver Builder Page Builder.
<h4>How to use the plugin</h4>
To illustrate how the plugin works, let’s suppose that you shall create a row with a message and a button. The row should be visible to each new visitor until she presses the button. When the visitor presses the button, the row will be closed smoothly. The row shall then remain hidden for that particular visitor for a period of time. When the time period is over, the message will be displayed again to the visitor.
Start by creating the row with as you usually do in Beaver Builder’s Page Builder. Add two columns. Put a Text module with the message in the column to the left. Put a Button module in the column to the right. Enter <code>javascript:void(0)</code> as link in the settings of the button; this prevents the button from doing anything at all.
Next, open the settings page of the row, click on the Advanced tab and scroll down to the Visibility section. Click on the drop-down menu Display. Provided you have installed this plugin, you should now see an option named <code>Row has not been closed</code>. It means te row will be visible if it has not been closed. Choose that option.
Below the Display drop-down should more settings appear now appear. Fill them out as follows:
<ul>
<li>Closing trigger selector: Enter a <a href="https://www.w3schools.com/jquery/jquery_ref_selectors.asp" rel="nofollow ugc">JQuery selector</a> (or a <a href="https://www.w3schools.com/cssref/css_selectors.asp" rel="nofollow ugc">CSS selector</a>) that targets the button. To assist you, this plugin adds the class <code>.closing-row</code> the row, so it is easier to target elements in the row. For this example, <code>.closing-row .fl_button</code> will do.</li>
<li>Close time: Enter the number of milliseconds the closing animation should take. For a short row, you should probably choose a relative small number, e.g. <code>500</code>. For a tall row, you should consider to increase the number to get a smooth transition.</li>
<li>Cookie expiration: Enter the number of days you want the message to be hidden. Enter <code>0</code> to just hide it during the current session. to hide it “for ever”, enter a big number, e.g. <code>36525</code> that corresponds to 100 years.</li>
<li>Cookie domain: Enter the domain of your site. If the home page of your site has the address <code>https://www.example.com/</code>, then enter <code>www.example.com</code>. If you enter <code>.example.com</code> (with a dot at the beginning), you allow all subdomains (e.g. <code>dev.example.com</code>). You can also leave the field completely blank, which all common browsers interpret as the same domain as the visitor are visiting.</li>
</ul>
Finally, save the row and publish the layout.
<h4>Technical description</h4>
This plugin prevents Beaver Builder’s page builder to render a row that has the visibility set to <code>Row has not been closed</code> if the visitors browser are returning a previous set cookie named <code>row_5967cca712431_closed</code> with <code>5967cca712431</code> replaced with the node id of the row.
If rendered, the row is initially hidden by the CSS property <code>display</code> set to <code>none</code>. This property will be changed to display the row if the cookie is not set. This last check is carried out by JavaScript.
The reason for this two-step check is caching.
<h3>Credits</h3>
The plugin uses Scott Hamper’s JavaScript library <a href="https://github.com/ScottHamper/Cookies" rel="nofollow ugc">Cookies</a>.

Kntnt's Row Closer for Beaver Builder Page Builder

WordPress plugin that allows a row in a layout created with Beaver Builder's Page Builder to be visible for a visitor until she clicks on a confi …

Kirit Dholakiya

NJBA Team

Ninja Beaver Add-ons for Beaver Builder features professional looking, easy to use highly functional extensions that can be used in a Beaver Builder page builder. This is really a premium plugin that you can get for free.
There are 40 modules (in lite version) easy to use, drag & drop, sections will speed up your website development process. You will be able to build professional websites without writing code.
We will offer 65+ modules in pro version. And we currently working on more modules and improvement in existing modules. We provide page templates and row/section templates in pro version. You can also try our woocommerce modules and woocommerce themer features. For more detail visit our <a href="https://www.woobeaveraddons.com/" rel="nofollow ugc">woo beaver addons</a> site.
Woo Beaver Addons Features
<ul>
<li>Single Product Module – You can show single product with short description, add to cart button and price on any pages/post.</li>
<li>Add To Cart Module – You can add any product add to cart button anywhere on site.</li>
<li>Product Grid/Carousel – You can show latest product, best sale product, Features Products in grid mode or carousel mode with nice styles.</li>
<li>Cart Module – You can style the cart page</li>
<li>Checkout Module – You can style the checkout page</li>
<li>Woo Beaver Layout (woocommerce themer) – Using this option, you can create templates for single product or category product pages. For more info, <a href="https://www.woobeaveraddons.com/" rel="nofollow ugc">please check our site.</a></li>
</ul>
NJBA Lite Add-ons for Beaver Builder Features:-
<ul>
<li>Accordion <a href="https://www.ninjabeaveraddon.com/modules/advanced-accordion/" rel="nofollow ugc">demo</a></li>
<li>Alert Box <a href="https://www.ninjabeaveraddon.com/modules/alert-box/" rel="nofollow ugc">demo</a></li>
<li>Button <a href="https://www.ninjabeaveraddon.com/modules/buttons/" rel="nofollow ugc">demo</a></li>
<li>Call To Action <a href="https://www.ninjabeaveraddon.com/modules/advanced-call-to-action/" rel="nofollow ugc">demo</a></li>
<li>Contact Form <a href="https://www.ninjabeaveraddon.com/modules/contact/" rel="nofollow ugc">demo</a></li>
<li>Facebook Button <a href="https://www.ninjabeaveraddon.com/modules/facebook-button/" rel="nofollow ugc">demo</a></li>
<li>Facebook Comments <a href="https://www.ninjabeaveraddon.com/modules/facebook-comments/" rel="nofollow ugc">demo</a></li>
<li>Facebook Embed <a href="https://www.ninjabeaveraddon.com/modules/facebook-embed/" rel="nofollow ugc">demo</a></li>
<li>Facebook Page <a href="https://www.ninjabeaveraddon.com/modules/facebook-page/" rel="nofollow ugc">demo</a></li>
<li>Flip Box <a href="https://www.ninjabeaveraddon.com/modules/flip-box/" rel="nofollow ugc">demo</a></li>
<li>Gallery <a href="https://www.ninjabeaveraddon.com/modules/gallery/" rel="nofollow ugc">demo</a></li>
<li>Google Static Map <a href="https://www.ninjabeaveraddon.com/modules/google-static-map/" rel="nofollow ugc">demo</a></li>
<li>Heading <a href="https://www.ninjabeaveraddon.com/modules/headings/" rel="nofollow ugc">demo</a></li>
<li>Highlight Box <a href="https://www.ninjabeaveraddon.com/modules/highlight-box/" rel="nofollow ugc">demo</a></li>
<li>Icon Image <a href="https://www.ninjabeaveraddon.com/modules/icon/" rel="nofollow ugc">demo</a></li>
<li>Image Hover <a href="https://www.ninjabeaveraddon.com/modules/image-hover/" rel="nofollow ugc">demo</a></li>
<li>Image Hover 2 <a href="https://www.ninjabeaveraddon.com/modules/image-hover-2/" rel="nofollow ugc">demo</a></li>
<li>Image Panels <a href="https://www.ninjabeaveraddon.com/modules/image-panels/" rel="nofollow ugc">demo</a></li>
<li>Image Separator <a href="https://www.ninjabeaveraddon.com/modules/image-separator/" rel="nofollow ugc">demo</a></li>
<li>Info List <a href="https://www.ninjabeaveraddon.com/modules/info-list/" rel="nofollow ugc">demo</a></li>
<li>InfoBox <a href="https://www.ninjabeaveraddon.com/modules/infobox/" rel="nofollow ugc">demo</a></li>
<li>InfoBox 2 <a href="https://www.ninjabeaveraddon.com/modules/info-box-two/" rel="nofollow ugc">demo</a></li>
<li>Logo Grid Carousel <a href="https://www.ninjabeaveraddon.com/modules/logo-grid-carousel/" rel="nofollow ugc">demo</a></li>
<li>Opening Hours <a href="https://www.ninjabeaveraddon.com/modules/opening-hours/" rel="nofollow ugc">demo</a></li>
<li>Post Grid <a href="https://www.ninjabeaveraddon.com/modules/content-grid/" rel="nofollow ugc">demo</a></li>
<li>Post List<a href="https://www.ninjabeaveraddon.com/modules/content-list/" rel="nofollow ugc">demo</a></li>
<li>Price Box <a href="https://www.ninjabeaveraddon.com/modules/price-box/" rel="nofollow ugc">demo</a></li>
<li>Quote Box <a href="https://www.ninjabeaveraddon.com/modules/quote-box/" rel="nofollow ugc">demo</a></li>
<li>Separator <a href="https://www.ninjabeaveraddon.com/modules/separator/" rel="nofollow ugc">demo</a></li>
<li>Slider <a href="https://www.ninjabeaveraddon.com/modules/slider/" rel="nofollow ugc">demo</a></li>
<li>Social Share <a href="https://www.ninjabeaveraddon.com/modules/social-share/" rel="nofollow ugc">demo</a></li>
<li>Spacer </li>
<li>Subscribe Form <a href="https://www.ninjabeaveraddon.com/modules/subscribe-form/" rel="nofollow ugc">demo</a></li>
<li>Tabs <a href="https://www.ninjabeaveraddon.com/modules/advanced-tabs/" rel="nofollow ugc">demo</a></li>
<li>Teams <a href="https://www.ninjabeaveraddon.com/modules/teams/" rel="nofollow ugc">demo</a></li>
<li>Testimonials <a href="https://www.ninjabeaveraddon.com/modules/testimonials/" rel="nofollow ugc">demo</a></li>
<li>Twitter Button <a href="https://www.ninjabeaveraddon.com/modules/twitter-button/" rel="nofollow ugc">demo</a></li>
<li>Twitter Grid <a href="https://www.ninjabeaveraddon.com/modules/twitter-embedded-grid/" rel="nofollow ugc">demo</a></li>
<li>Twitter Timeline <a href="https://www.ninjabeaveraddon.com/modules/twitter-embedded-timeline/" rel="nofollow ugc">demo</a></li>
<li>Twitter Tweet <a href="https://www.ninjabeaveraddon.com/modules/twitter-embedded-tweet/" rel="nofollow ugc">demo</a></li>
</ul>
Check the <a href="https://www.ninjabeaveraddon.com/modules/" rel="nofollow ugc">demo here</a>.
NJBA Addons Pro Features
<ul>
<li>Creative 45+ modules that make building websites, easy to use.</li>
<li>46 Predefined templates,135 Predefined Row Section.</li>
<li>100% CSS , no JavaScript on frontend for all devices</li>
<li>Easy enable and disable options for modules; to reduce unnecessary server requests.</li>
<li>Unlimited usage on your own or client’s websites.</li>
<li>World class professional support directly from the developers.</li>
<li>Annual and Lifetime Licenses.</li>
<li>Multisite support.</li>
<li>Multi-language Support</li>
<li>World class professional support directly from the developers.</li>
<li>Built with responsive designs.</li>
<li>Real time-saver addons.</li>
</ul>
Pro Modules
<ul>
<li>Advanced Accordion <a href="https://www.ninjabeaveraddon.com/modules/advanced-accordion/" rel="nofollow ugc">demo</a></li>
<li>Advanced Tabs <a href="https://www.ninjabeaveraddon.com/modules/advanced-tabs/" rel="nofollow ugc">demo</a></li>
<li>Animated Headlines <a href="https://www.ninjabeaveraddon.com/modules/animated-headlines/" rel="nofollow ugc">demo</a></li>
<li>Audio <a href="https://www.ninjabeaveraddon.com/modules/audio/" rel="nofollow ugc">demo</a></li>
<li>Before After Slider <a href="https://www.ninjabeaveraddon.com/modules/after-slider/" rel="nofollow ugc">demo</a></li>
<li>Breadcrumb <a href="https://www.ninjabeaveraddon.com/modules/breadcrumb/" rel="nofollow ugc">demo</a></li>
<li>Column Separator <a href="https://www.ninjabeaveraddon.com/modules/column-Separator/" rel="nofollow ugc">demo</a></li>
<li>Contact Form <a href="https://www.ninjabeaveraddon.com/modules/contact/" rel="nofollow ugc">demo</a></li>
<li>Content Carousel</li>
<li>Content Grid <a href="https://www.ninjabeaveraddon.com/modules/content-grid/" rel="nofollow ugc">demo</a></li>
<li>Content List <a href="https://www.ninjabeaveraddon.com/modules/content-list/" rel="nofollow ugc">demo</a></li>
<li>Content Tiles <a href="https://www.ninjabeaveraddon.com/modules/content-tiles/" rel="nofollow ugc">demo</a></li>
<li>Countdown <a href="https://www.ninjabeaveraddon.com/modules/countdown/" rel="nofollow ugc">demo</a></li>
<li>Counter <a href="https://www.ninjabeaveraddon.com/modules/counter/" rel="nofollow ugc">demo</a></li>
<li>Dual Button <a href="https://www.ninjabeaveraddon.com/modules/dual-buttons/" rel="nofollow ugc">demo</a></li>
<li>Gravity form <a href="https://www.ninjabeaveraddon.com/modules/gravity-form/" rel="nofollow ugc">demo</a></li>
<li>Grid Box <a href="https://www.ninjabeaveraddon.com/modules/grid-box/" rel="nofollow ugc">demo</a></li>
<li>Hover Box Carousel<a href="https://www.ninjabeaveraddon.com/modules/hover-box-carousel/" rel="nofollow ugc">demo</a></li>
<li>Image Carousel <a href="https://www.ninjabeaveraddon.com/modules/image-carousel/" rel="nofollow ugc">demo</a></li>
<li>Logo Grid Carousel <a href="https://www.ninjabeaveraddon.com/modules/logo-grid-carousel/" rel="nofollow ugc">demo</a></li>
<li>Login Form <a href="https://www.ninjabeaveraddon.com/modules/login-form/" rel="nofollow ugc">demo</a></li>
<li>Modal Box <a href="https://www.ninjabeaveraddon.com/modules/modal-box/" rel="nofollow ugc">demo</a></li>
<li>Polaroid <a href="https://www.ninjabeaveraddon.com/modules/polaroid/" rel="nofollow ugc">demo</a></li>
<li>Polaroid Gallery <a href="https://www.ninjabeaveraddon.com/modules/polaroid-gallery/" rel="nofollow ugc">demo</a></li>
<li>Price Box <a href="https://www.ninjabeaveraddon.com/modules/price-box/" rel="nofollow ugc">demo</a></li>
<li>Quote Box <a href="https://www.ninjabeaveraddon.com/modules/quote-box/" rel="nofollow ugc">demo</a></li>
<li>Row Separator <a href="https://www.ninjabeaveraddon.com/modules/row-separator/" rel="nofollow ugc">demo</a></li>
<li>Subscribe Form <a href="https://www.ninjabeaveraddon.com/modules/subscribe-form/" rel="nofollow ugc">demo</a></li>
<li>Search Form <a href="https://www.ninjabeaveraddon.com/modules/search-form/" rel="nofollow ugc">demo</a></li>
<li>Switch Toggle <a href="https://www.ninjabeaveraddon.com/modules/switch-toggle/" rel="nofollow ugc">demo</a></li>
<li>Timeline <a href="https://www.ninjabeaveraddon.com/modules/timeline/" rel="nofollow ugc">demo</a></li>
<li>Testimonials Pro <a href="https://www.ninjabeaveraddon.com/modules/testimonials/" rel="nofollow ugc">demo</a></li>
<li>Teams Pro <a href="https://www.ninjabeaveraddon.com/modules/teams/" rel="nofollow ugc">demo</a></li>
<li>Toggle <a href="https://www.ninjabeaveraddon.com/modules/toggle/" rel="nofollow ugc">demo</a></li>
</ul>
For more information to know about our premium version, <a href="https://www.ninjabeaveraddon.com" rel="nofollow ugc">visit our website.</a>
For Woocommerce Addon, Visit our <a href="http://woobeaveraddons.com" rel="nofollow ugc">Woo beaver addon website.</a>

Kntnt's Row Closer for Beaver Builder Page Builder vs Ninja Beaver Add-ons for Beaver Builder