Thomas Barregren

<p>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 <em>Beaver Builder Page Builder</em>.</p>
<h4>How to use the plugin</h4>
<p>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.</p>
<p>Start by creating the row with as you usually do in Beaver Builder’s Page Builder. Add two columns. Put a <em>Text</em> module with the message in the column to the left. Put a <em>Button</em> 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.</p>
<p>Next, open the settings page of the row, click on the <em>Advanced</em> tab and scroll down to the <em>Visibility</em> section. Click on the drop-down menu <em>Display</em>. 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.</p>
<p>Below the <em>Display</em> drop-down should more settings appear now appear. Fill them out as follows:</p>
<ul>
<li><strong>Closing trigger selector:</strong> 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><strong>Close time:</strong> 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><strong>Cookie expiration:</strong> 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><strong>Cookie domain:</strong> 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>
<p>Finally, save the row and publish the layout.</p>
<h4>Technical description</h4>
<p>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.</p>
<p>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.</p>
<p>The reason for this two-step check is caching.</p>
<h3>Credits</h3>
<p>The plugin uses Scott Hamper’s JavaScript library <a href="https://github.com/ScottHamper/Cookies" rel="nofollow ugc">Cookies</a>.</p>


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 …

Russell Jamieson

<p>IMPORTANT: This plugin can ONLY be used with Genesis Child Themes</p>
<ul>
<li>Tweak your theme template on a page by page or post by post by post basis </li>
<li>Allow the page content to be full width (edge to edge)</li>
<li>Remove the header, the primary and secondary navigation menus</li>
<li>Remove the post title, entry header, post info and breadcrumbs at the top of the post</li>
<li>Remove the post meta, entry footer, author box, comments and after entry widget area at the foot of the post</li>
<li>Remove the footer widgets and the footer</li>
<li>Remove the custom background image and color</li>
</ul>
<p>You will typically use this plugin for landing pages, portfolio pages, etc where you want to remove extra clutter from the page because you have a specific purpose in mind and  want to remove any distractions.</p>
<p>The full width setting allows you to have edge-to-edge backgrounds so you can make the page look more like a home page than a standard internal page</p>
<h3>How to Use The Plugin</h3>
<ol>
<li>Select the page or post of interest and click to Edit it in the WordPress Editor</li>
<li>Scroll down to the Genesis Dambuster section and make the required tweaks to the page sections, check the Enable Tweaks checkbox and finally click the Update button in the sidebar to save your changes.</li>
<li>If you are using Beaver Builder, switch to the Beaver Builder Editor, and edit the section of interest and change it from Fixed Width to Full Width</li>
</ol>
<h3>How to Set Up The Plugin Defaults</h3>
<p>If you don’t want to specify all the settings for every post then you can set up default values</p>
<ol>
<li>Go to the “Genesis” section, and choose “Dambuster”</li>
<li>Set your preferred defaults</li>
<li>Changing the defaults only affects new pages; it will not affect existing pages that have Dambuster settings</li>
</ol>
<h3>Links</h3>
<p>Here are some other  useful Genesis Dambuster Plugin links:</p>
<ul>
<li>Overview and Videos –  https://www.genesisdambuster.com/</li>
<li>Plugin Features – https://www.genesisdambuster.com/features/</li>
<li>Supported Themes – https://www.genesisdambuster.com/supported-genesis-child-themes</li>
<li>Supporting Custom Themes –  https://www.genesisdambuster.com/hooks</li>
</ul>


Genesis Dambuster

Timesaver when using Genesis with BB

I spent hours coding a landing page template that I wasn't happy with. I discovered this plugin, added Beaver Builder, and 15 minutes later I had a clean looking landing page that I'm thrilled with. Thanks!!

Why Didn't I Know About This Sooner?

A Genesis only WordPress plugin that makes it easy to set up your pages for edge to edge content. Ideal for full width Beaver Builder templates.

Kntnt's Row Closer for Beaver Builder Page Builder vs Genesis Dambuster