{"id":49997,"date":"2017-10-05T04:12:17","date_gmt":"2017-10-05T11:12:17","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=49997"},"modified":"2017-10-05T04:15:53","modified_gmt":"2017-10-05T11:15:53","slug":"custom-header-beaver-themer","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/custom-header-beaver-themer\/","title":{"rendered":"How to Create a Custom Header layout with Beaver Themer?"},"content":{"rendered":"

The key to making a good looking website is having perfectly complementing parts including the Header. The header plays a very important role for a website as it is the primary navigation option for the user.<\/p>\n

Having your custom-made Header can improve the appearance of your website multiple folds. While the Beaver Builder<\/a> takes care of the customization of the Content Area, the header can be easily edited with the Beaver Themer Addon<\/a> Custom Header<\/strong> feature which lets you design the header by simple drag and drop operation.<\/p>\n

Let’s understand how you can design your custom header using the Beaver Themer add-on.<\/p>\n

Note:<\/strong> Since this an addon to the Beaver Builder, you are going to need both (Beaver Builder and Beaver Themer) to make your custom header.<\/p>\n

New to Beaver Themer? Check out our Beginner’s guide for Beaver Themer<\/a>.<\/p><\/blockquote>\n

How to Create custom Header with Beaver Themer?<\/h2>\n

Step 1:<\/strong> Click on the Builder<\/strong> option in the WPadmin and select the Add new<\/strong> button.<\/p>\n

\"\"<\/p>\n

Step 2:<\/strong>\u00a0Give the Header a proper name.Now, from the Type<\/strong> drop-down, select Theme Layout<\/strong> from the list and select the Header<\/strong> as the Layout<\/strong>. Once you are done, click on the Add Theme Layout Button.<\/p>\n

\"\"<\/p>\n

Step 3:<\/strong> Here we will be creating\u00a0a similar header to our website. So for that, from the options, select sticky header as No\u00a0<\/b>and Overlay as No<\/strong>\u00a0as well. (you can change them depending on your preferences)<\/p>\n

Step 4:<\/strong>\u00a0Since we are making a Header that will work on every page of our website, we will select the Location<\/strong> as Entire Site<\/strong>. Also, we do not want to restrict the header’s appearance; we can simply select the All Users<\/strong> from the Users<\/strong> option.<\/p>\n

Once you have done all that, click on the Launch Page Builder<\/strong> Button.<\/p>\n

\"\"<\/p>\n

Step 5:\u00a0<\/strong>Once you click on the button, you will go to the Builder Page, where you can design your Header design details and style.<\/p>\n

Step 6: <\/strong>Click on the little wrench icon at the corner of the row to enter row settings. Here I made these changes in Row settings.<\/p>\n