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:
- Customise > Code > CSS Code or
- Page Builder > Tools > Global Setting > CSS or
- 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?
I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.
Fantastic post and great video. Clear, concise, and well done overall. I appreciate it!
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.
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!!
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.
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?
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”.
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!!
Opps sorry Jean. I must get a snippet library sorted for myself.. And course !! I’m pleased you sorted. it :-)
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/
Whoops the shortcode did not appear in my message…
Maybe this will work:
/* Shortcode
*/
Hang on… Option#1 worked! It must have cached or something.
Thank you!
Phew! Such a relief. Thanks Gavin.