How To Create A Custom Header With Beaver Builder In Genesis

Banner - 728 x 90

Everyone who has used Genesis knows that creating a custom header can be time consuming and a daunting task.  I used to create my header area by adding  a second widget area via a function and adding css to style it. I have discovered a faster way that has saved me many hours of of development and has allowed me to spend my time styling rather than developing.

After viewing a post on facebook about a method of inserting Beaver Builder page  content via shortcode, I decided to give it a try! I was surprised and rather happy with the results I achieved in an hour, rather than a day of coding and tweaking.



Saves tons of time!
Concentrate on design..
rather than development!
Drag and Drop~ Easy
Advanced Design Layout


Add extra plugins
Small learning curve
Change of perspective

What you need!
Banner - 728 x 90

Ok you have installed all the plugins you need, now what? Activate all the plugins except  Better WordPress Minify, you will do this last! Create a page called header, i recommend using dambuster and setting the page to full width(dambuster will appear at the bottom of your page editor) and uncheck all the other options(!important).

Once you create your header page click update to save. Now click launch page builder! Ok now is the time to create your header layout and add your content!  Ok now that you are done playing and have created your header layout, be sure to click done and click publish changes. Ok click edit page and you will see a number in your address bar url( it will look like post=238&action=edit) But it will have another #

Now go to Genesis- Simple Hooks, and scroll down to

genesis_header Hook

insert [    fl_builder_insert_layout id="238"     ]


put a check mark beside (Unhook genesis_do_header() function from this hook?)

Put a check mark beside ()

Click save!!

Ok, go to your homepage and your new header should be there! Ok you see it load unstyled, don't freak out! To fix the style issue, activate Better WordPress Minify and you will move your script for your fl-builder-layout-238 to your header. By default it loads in the footer and that is why you get the unstyled content!

(Updated , Beaver Builder just fixed the unstyled header issue with the latest update!)

Ok hope this helps you get started creating headers with Beaver Builder. To create a footer with Beaver you pretty much follow the same idea! Name your page Footer and use your footer hook in the same manor!


Banner - 728 x 90

Leave a Comment