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 …

Freemius

livemesh

Livemesh Addons for Beaver Builder features huge collection of premium, easy to use yet 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.
This plugin comes with addons for just about everything you need to build a professional website without switching to a premium theme – services, team profiles, counters, bar charts, piecharts, testimonials, clients list, portfolio/posts grid, posts carousels, pricing plan and much more in the <a href="https://livemeshwp.com/beaver-builder" title="Addons for Beaver Builder Premium Version" rel="nofollow ugc">PRO version</a>. All the addons that help turn your free theme into a premium one with just a few clicks. Every premium page builder element you need is available for easy drag and drop into your page by just activating this plugin.
<a href="https://wordpress.org/plugins/beaver-builder-lite-version/" rel="nofollow ugc">Beaver Builder</a> plugin must be activated to use this plugin. After you activate the required plugins, the elements should be available for use in Beaver Builder.
See the all of elements in action here –
<a href="https://livemeshwp.com/beaver-builder/addons-demo#demo-section" title="Livemesh Addons for Beaver Builder Demo Site" rel="nofollow ugc">LIVE DEMO</a> | <a href="https://livemeshwp.com/beaver-builder/pricing/" title="Livemesh Addons for Beaver Builder Premium Version" rel="nofollow ugc">PRO Version</a>.
The plugin comes with the following Beaver Builder addons or extensions. Almost all of the elements come with a dark version. –
<ul>
<li><a href="https://livemeshwp.com/beaver-builder/services/" title="Services Extension" rel="nofollow ugc">Services</a> that capture what you can offer for your clients/customers.</li>
<li><a href="https://livemeshwp.com/beaver-builder/portfolio-grid/" title="Portfolio Grid Addon" rel="nofollow ugc">Portfolio Grid addon</a> that displays portfolio/blog entries in a nice responsive grid in Beaver Builder. Masonry and packed options are supported.</li>
<li><a href="https://livemeshwp.com/beaver-builder/posts-grid/" title="Posts Grid Extension" rel="nofollow ugc">Blog Posts Grid</a> that displays portfolio/blog entries in a nice responsive grid. Masonry and packed options are supported.</li>
<li><a href="https://livemeshwp.com/beaver-builder/team-member-profiles/" title="Team Profiles Addon" rel="nofollow ugc">Team Profiles</a> extension to display all the team members.</li>
<li><a href="https://livemeshwp.com/beaver-builder/odometer-counters/" title="Odometer/Counters Extension" rel="nofollow ugc">Odometers/Counters</a> to show impressive numbers pertaining to your work or company.</li>
<li><a href="https://livemeshwp.com/beaver-builder/progress-bars/" title="Bar Charts" rel="nofollow ugc">Bar charts addon</a> to capture skills or any type of percentage stats with just a few clicks in Beaver Builder.</li>
<li><a href="https://livemeshwp.com/beaver-builder/piecharts/" title="Piecharts Extension" rel="nofollow ugc">Animated Pie charts</a> for visual depiction of percentage stats.</li>
<li><a href="https://livemeshwp.com/beaver-builder/testimonials/" title="Testimonials Addon" rel="nofollow ugc">Testimonials</a> to tell everyone the good things you often hear from your clients/customers.</li>
<li><a href="https://livemeshwp.com/beaver-builder/testimonial-slider/" title="Testimonial Slider Addon" rel="nofollow ugc">Testimonials slider</a> is a responsive touch enabled slider that cycles through testimonials.</li>
<li><a href="https://livemeshwp.com/beaver-builder/posts-carousel/" title="Posts Carousel Extension" rel="nofollow ugc">Post Carousel extension</a> for Beaver Builder that displays your posts as a highly responsive carousel.</li>
<li><a href="https://livemeshwp.com/beaver-builder/generic-carousel/" title="Generic Carousel Addon" rel="nofollow ugc">Generic Carousel</a> element that displays lets you present a list of HTML content in a carousel.</li>
<li>Heading styles to capture effective headings for your page sections.</li>
<li><a href="https://livemeshwp.com/beaver-builder/clients-element/" title="Clients List Element" rel="nofollow ugc">Clients List</a> extension to showcase the clients that you have handled.</li>
<li><a href="https://livemeshwp.com/beaver-builder/pricing-table/" title="Pricing Table Extension" rel="nofollow ugc">Pricing Plans</a> to help get more sales.</li>
</ul>
The <a href="https://livemeshwp.com/beaver-builder/" title="Livemesh Addons for Beaver Builder Pro" rel="nofollow ugc">PRO version</a> of the plugin comes with additional Beaver Builder addons and advanced features added to elements above –
<ul>
<li><a href="https://livemeshwp.com/beaver-builder/posts-slider/" title="Posts Slider Addon" rel="nofollow ugc">Posts Slider</a> that helps showcase your posts as a highly responsive, touch enabled slider.</li>
<li><a href="https://livemeshwp.com/beaver-builder/posts-gridbox-slider/" title="Posts Gridbox Slider Addon" rel="nofollow ugc">Posts Gridbox Slider</a> that displays your posts as a slider of tiled post grids.</li>
<li><a href="https://livemeshwp.com/beaver-builder/posts-multislider/" title="Posts Multislider Addon" rel="nofollow ugc">Posts Multislider</a> that helps showcase your posts as a highly responsive, touch friendly carousel.</li>
<li><a href="https://livemeshwp.com/beaver-builder/posts-block/" title="Posts Block Addon" rel="nofollow ugc">Posts Block</a> to help present your blog posts, events, news items or portfolio in a dozen creative ways. Comes with AJAX filtering, pagination and load more features to help visitors navigate your entire collection of blog posts or custom post types and their categories without reloading the page.</li>
<li><a href="https://livemeshwp.com/beaver-builder/tabs/" title="Tabs Addon" rel="nofollow ugc">Responsive Tabs</a> that function seamlessly across all devices and resolutions. The plugin features never before choice of over dozen styles of tabs to choosen from a simple Beaver Builder dropdown.</li>
<li><a href="https://livemeshwp.com/beaver-builder/accordion/" title="Accordion Module" rel="nofollow ugc">Accordion/Toggle</a> that capture collapsible content panels when space is limited.</li>
<li><a href="https://livemeshwp.com/beaver-builder/sliders/" title="Image Slider Extension" rel="nofollow ugc">Image Slider</a> to create a responsive slider of images with support for captions, multiple slider types like Nivo, Flex, Slick and lightweight sliders, thumbnail navigation etc.</li>
<li><a href="https://livemeshwp.com/beaver-builder/image-gallery/" title="Image Gallery Addon" rel="nofollow ugc">Image Gallery</a> addon that lets you create a grid of images with options for masonry or fit rows, pagination, lazy load, lightbox support etc. </li>
<li><a href="https://livemeshwp.com/beaver-builder/video-gallery/" title="Video Gallery Addon" rel="nofollow ugc">Video Gallery</a> to build a beautiful grid of videos to help showcase a collection of YouTube/Vimeo videos on your site.</li>
<li><a href="https://livemeshwp.com/beaver-builder/gallery-carousel/" title="Image Carousel" rel="nofollow ugc">Image Carousel</a> for a responsive carousel of images.</li>
<li><a href="https://livemeshwp.com/beaver-builder/gallery-carousel/" title="Video Carousel" rel="nofollow ugc">Video Carousel</a> for creation of a responsive carousel of YouTube/Vimeo videos.</li>
<li><a href="https://livemeshwp.com/beaver-builder/faq-element/" title="FAQ Element" rel="nofollow ugc">FAQ element</a> to display a set of Frequently Asked Questions in a page.</li>
<li><a href="https://livemeshwp.com/beaver-builder/features/" title="Features Addon" rel="nofollow ugc">Features Addon</a> for showcasing product features or services provided by an agency/business.</li>
<li><a href="https://livemeshwp.com/beaver-builder/buttons/" title="Buttons" rel="nofollow ugc">Flat style buttons</a> with rich set of customization options.</li>
<li><a href="https://livemeshwp.com/beaver-builder/icon-lists/" title="Icon List element" rel="nofollow ugc">Icon list addon</a> that lets you use either images or icon fonts to create custom social icons list, capture payment options etc.</li>
<li><a href="https://livemeshwp.com/beaver-builder/services-advanced/" title="Advanced Services" rel="nofollow ugc">Advanced Services</a> with additional styles and animations for services addon.</li>
<li><a href="https://livemeshwp.com/beaver-builder/portfolio-grid-pro/" title="Posts Grid" rel="nofollow ugc">Lazy Load</a> – The portfolio/post grid and image gallery addons incorporate option to lazy load posts/images with the click of a Load More button.</li>
<li><a href="https://livemeshwp.com/beaver-builder/portfolio-grid-pro/" title="Posts Grid" rel="nofollow ugc">Pagination</a> – Create a grid of posts or custom post types with AJAX based pagination support. </li>
<li>Lightbox Support – The premium version of Beaver Builder Addons plugin comes with support for Lightbox for grid and carousel addons.</li>
<li>Customizations – Ability to choose custom font size, color or hover color for certain addons. More coming.</li>
<li>Custom Animations – Choose from over 40+ animations for most Beaver addon elements (excludes sliders, carousels and grid). The animations display on user scrolling to the element or when the element becomes visible in the browser window.</li>
<li>Sample Data – Sample data that you can import into your site to get started quickly on the addons and some sample layouts.</li>
<li>Premium Support – The customers will be provided access to a dedicated support forum with searchable content, private tickets, with threads attended to within 24 hours.</li>
</ul>
You can view the change log for the Premium version of the plugin at <a href="https://livemeshwp.com/beaver-builder/change-log/" title="Livemesh Addons for Beaver Builder Premium Change Log" rel="nofollow ugc">https://livemeshwp.com/beaver-builder/change-log/</a>.
<h3>Support</h3>
The premium version of the plugin entitles you to quick support with replies posted within 24 hours (on week days).
Please submit your support query through our <a href="https://livemeshwp.com/beaver-builder/contact-us/" title="Livemesh Contact form" rel="nofollow ugc">website contact form</a>. This will create a support ticket in our support portal.

Livemesh Addons for Beaver Builder

A collection of 25+ beautifully designed premium quality addons or modules for use in Beaver Builder page builder.

Kntnt's Row Closer for Beaver Builder Page Builder vs Livemesh Addons for Beaver Builder