Fully Editable Top Bar Sections with the Beaver Builder Theme

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.

 

Beaver-Builder-Modules

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) 

Shortcode-Beaver-Builder

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?

DWcircle

I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.

12 Comments

  1. Dan Dan on 12th June 2016 at 5:25 pm

    Fantastic post and great video. Clear, concise, and well done overall. I appreciate it!

    • David Waumsley David Waumsley on 12th June 2016 at 6:47 pm

      Many thanks Dan and for your comment over at Facebook too.

      I must say I get a bit worried putting out content when there are so many good folks out there. I can’t tell you how much means to get some reassuring feedback. See you over at THE group very soon.

  2. Miguel Kieling Miguel Kieling on 11th September 2016 at 4:37 am

    Dear David,
    Nice post. Highly appreciated!
    I’m new to Genesis, and I’ve got the Eleven 40 child theme. What would be the best way to customize the top bar of this theme? I’m thinking of buying Beaver Builder but it seems I can’t edit the top bar of Eleven 40 with it. Do you know of a work around? Many thanks!!

    • David Waumsley David Waumsley on 11th September 2016 at 5:11 pm

      Hi Miguel,

      Thanks for nice comment and stopping by. The code way with Genesis would be to so something like this http://www.carriedils.com/widget-area-above-header-genesis/ but just registering on one widget area.

      But much easier (and untested ) is to download the Genesis simple hooks https://wordpress.org/plugins/genesis-simple-hooks/ and there is an option there called genesis_before_header hook. There you can paste your BB shortcode and tick the execute shortcodes box and you should be good.

      Hope that helps. Let me know if you have a problem .. or if it works ok.

  3. Jean Johnson Jean Johnson on 24th April 2017 at 11:58 am

    Thanks for this tutorial David.

    I am going to add the top row to my functions php – but how do I exclude the home page?
    Is that possible?

    • David Waumsley David Waumsley on 24th April 2017 at 1:02 pm

      Hi Jean

      This is not my strong point, but you will need a conditional to exclude the home page:

      Something like this.

      add_action( ‘fl_before_top_bar’, ‘my_custom_topbar’ );
      function my_custom_topbar() {
      if ( ! is_home () ){
      echo do_shortcode(‘ *insert your shortcode here’);

      }

      It is different if using a blog as a homepage. You may need to do a google search on WP conditionals as I’m not 100% the above is right. The “!” means “not”.

  4. Jean Johnson Jean Johnson on 24th April 2017 at 1:35 pm

    This did not work – got an error.
    But (should have tried this first!!) – I just set the home page to no header/footer and am using your original Top Bar Code above.
    It works. Thanks a million!!

    • David Waumsley David Waumsley on 24th April 2017 at 2:24 pm

      Opps sorry Jean. I must get a snippet library sorted for myself.. And course !! I’m pleased you sorted. it :-)

  5. Gavin Gavin on 18th July 2019 at 8:09 am

    Hi David.

    I am trying to use method#1 but this short code is not displaying the Template (with slug /top-bar)

    The shortcode (but not (not the template design) appears in the top bar preview when editing the “Column 1 Text” in “Top Bar layout” but when saved the top bar does not display any content.

    This is the top-bar template: https://feedsy.com.au/fl-builder-template/top-bar/

    • Gavin Gavin on 18th July 2019 at 8:12 am

      Whoops the shortcode did not appear in my message…
      Maybe this will work:

      /* Shortcode

      */

      • Gavin Gavin on 18th July 2019 at 1:53 pm

        Hang on… Option#1 worked! It must have cached or something.
        Thank you!

        • David Waumsley David Waumsley on 18th July 2019 at 5:39 pm

          Phew! Such a relief. Thanks Gavin.

Leave a Comment