Fully Editable Top Bar Sections with the Beaver Builder Theme

• 12 June 2016
• beaver-builder,
• website-building

This video shows three easy ways to add a subscription form (or anything you like) above the header in the Beaver Builder theme.  The code snippets and the pros and cons of each are below the video.

#

Option 1#

Is to place a save Beaver Builder template (row or module) via a Beaver Builder Shortcode in the theme options.  Go to:

Customise > Header > Top Bar Layout (Layout = 1 Column – Column 1 Layout = Text)

Important Note: You will need save for the template content to show (this is not shown in the video – sorry).

To make the container a 100% width with no padding add the following CSS to either:

1. Customise > Code > CSS Code  or
2. Page Builder > Tools > Global Setting > CSS or
3. In the Child theme’s’  style.css file.

/\*Removes Top Bar (section) padding and sets to 100% width (within the site's container)\*/
.fl-page-bar-container
{
padding: 0;
}
.fl-page-bar-text
{
width: 100%;
padding: 0;
}
/\*Removes border bottom lines - not mentioned in the video above\*/
.fl-page-bar
{
border-bottom: 0 transparent;
}
.fl-page-header .fl-page-header-wrap
{
border-bottom: 0 solid transparent;
}

Pros#

• Easy to do everything in the customiser.
• Clients can change template names and can’t break the site.
• Some styling can be done using the Beaver Builder Top Bar Styling options.

Cons#

• No full width content.
• You might not want client to have easy access.

Option 2#

Is to place the code snippet below in the functions.php file in your Beaver Beaver Child theme.

// Adds BB shortcode template above the header top bar
 add_action( 'fl_before_top_bar', 'my_custom_topbar' );
 function my_custom_topbar() {
 echo do_shortcode(' *insert your shortcode here'); }

* WP is removing the shortcode it should look like this (working on a fix)

Pros#

• Full width content.
• Can use the background options in the saved row templates (ie, parallax effects could be used).

Cons#

• Have to mess with php if needing to make changes (often needed with top bar content).
• Not client friendly as a php mistake can break a site.

Option 3#

Use Beaver Tunnels (No longer recommended. Please take a look at Beaver Themer).

Pros#

• Can perform everything in a few clicks (and much much more).
• A client could be trained to make changes and manage more complex displays with conditions.

Cons#

• It costs money and is another yearly commitment.
• You might like to learn to do this yourself (hint see this post from Beaver Child Themes).

Over to you …. are you getting into the Beaver Builder template shortcode. Do you see any issues with the 3 options?#

• ← Previous
  What's the Best Theme for Beaver Builder?
• Next →
  5 ways to lose business with your website.