Creating the site header using Beaver Builder Plugin

How do you replace the default theme header with Beaver Builder Plugin (Standard/Pro/Agency) without any third party plugin or Beaver Themer? In this tutorial I am showing the full procedure.

Creates Site Header using Beaver Builder Plugin

  1. Navigate to Settings -> Page Builder
  2. Click on User Access vertical tab
  3. Enable the Builder Admin
  4. Save the settings and you will get new menu “Builder” at right side
  5. Navigate to Settings ->Permalink and flush it clicking on the save button
  6. Navigate to Builder -> Templates
  7. Click on “Add New” button
  8. Create the template as per your requirement
  9. Click on Done button and publish the template

Using Beaver Builder Theme

Disables the default header

You will get a normal site header when you activate the bb child theme. At first you will disable it for whole site. Beaver Builder theme customizer have a option for it.

  1. Navigate to Appearance -> Customize
  2. Click on Header panel
  3. Click on Header Layout
  4. Select “None” from Layout drop down list
  5. Click on Save&Publish button and save the settings

Adds Beaver Builder template at Header

Now we’ll add the newly created Beaver Builder template to site header. Open the functions.php file of your bb child theme and drop this PHP snippets at end of the file:

add_action( 'fl_after_header', function(){
	echo '<header class="fl-page-header fl-page-header-primary';
	echo '"';

	echo ' itemscope="itemscope" itemtype="">
			<div class="fl-page-header-wrap">';

			'post_type' 	=> 'fl-builder-template',
			'p' 			=> 1006

	echo '</div></header>';
}, 1 );

1006 is my template ID. You will replace it with your own header template ID.

Using Genesis Framework

Adds Small PHP codes

Open the functions.php of your Genesis child theme and add this PHP codes there

remove_action( 'genesis_header', 'genesis_do_header' );
add_action( 'genesis_header', 'frame_do_bb_header' );
function frame_do_bb_header()
		'post_type' 	=> 'fl-builder-template',
		'p' 			=> 649

Line no 1: Removes the default Genesis Header
Line no 2: Creates new header by Genesis Hook
Line no 3-9: Renders the Beaver Builder template which you are already created for your site. 649 is my BB template ID. You will replace it with your one template ID.

Adds Custom CSS

Sometimes you need small CSS. It is totally depending on the child theme’s structure. You will edit the following CSS based on your child theme.

.site-header .wrap {
	max-width: 100%;
	width: 100%;
	padding: 0!important;

.site-header .fl-builder-content {
	width: 100%;


Leave a Comment

You must be logged in to post a comment.


Get free weekly PRO Beaver Builder Tutorials