Header and Footer Builder Overview

What is the Header/Footer Builder

Utilizing a drag and drop builder to create the header and the footer of the website has been always a dream come true scenario for the website builders and designers in the WordPress community. That dream has come true with the introduction of the Pro theme Header and Footer builders. The Header/Footer builder is an innovative way to build completely custom headers and footers. Giving you the ultimate flexibility with your website. You can use the somewhat similar Content Builder elements, curated for headers and footers, to build astonishing designs for your website. And of top of that, you can assign the headers and footers you have created to different pages or posts on your website.

How to Access Header/Footer Builder

To access the header builder you need to go to Pro > Headers:

To access the footer builder you need to go to Pro > Footers:

Header/Footer Builder Environment Introduction

The header builder consists of four main areas including:

• The Preview area - The preview area is where you'll be able to see your changes in real-time as you modify your headers. Allowing you to build your header with ease without having to keep entering and exiting the builder.
• Create Header - This area allows you to select a header template or to start with a blank template and start creating your header.
• Header Selection - In the center are all the headers that you've created so far, this is a scrollable list that allows you to go through your headers one by one. Clicking on a header will load it in the preview area then if you'd like to work on that header you can just click Edit.
• Header Assignment - On the right-hand side, we have the header assignments manager. Click on a header, and you'll be able to manage the pages that header is assigned to within that pane.

All the areas mentioned above are also available in the Footer Builder.

Header/Footer Builder Templates

To start building the header you can either create a blank header and start from scratch or you can use the Template Manager to select a template that you have created before. You can also import creative header designs from our Design Cloud.

To create a header from scratch, click Create at the left-hand side of the screen and enter a desired name for the header.

Now you've created your header, you'll see it in the list of headers you've already created, go ahead and hover over the header and you should see a set of buttons Edit, Copy, Delete, Save as template. Clicking the Edit button will redirect you to the main header builder screen.

Every header or footer built within their respective builders is made up of three main parts. Bars, Containers, and Elements.

How Bars Work in Header/Footer Builder

Bars are the main part of your header or footer, both headers and footers must always have at least one bar, though a header and footer can be made up of multiple bars.

You can select, duplicate or delete a bar using the respective icons at the right-hand side of each bar. If you try to delete a bar you will be prompted to make sure you will not accidentally delete something that you do not intend.

Hover your mouse over the bar and you will see the corresponding area in the preview section will show how the bar is laid out on the screen.

Clicking the magnifying glass icon will take you the Inspector which is ultimately the same principles for every part of the header builder or footer builder, but the actual controls within the inspector will be different from bars, to containers to elements. For bars, the controls look like this:

Use the controls available to customize the bar however you want. You need to scroll to left or right to see the rest of the controls, or you can use the breadcrumbs section to select the proper grouping of the controls and the screen will auto scroll to show that grouping:

How Containers Work in Header/Footer Builder

Containers exist within bars and contain the elements. You can have multiple containers in a bar which allows you the ultimate flexibility in creating your headers and footers.

The same kind of controls is available for containers. Clicking the magnifying glass icon will take you to the main container editing screen:

Elements in the Header/Footer Builder

The Bars and Containers are there to help you create the main layout of the headers and footers. But to actually have the header and footer built you need the elements. Elements in the header and footer builders serve the same purpose as the normal Content Builder - you can use them to build different aspects of the header or the footer. The header/footer builder elements are curated for header/footer building purposes, you will see unique elements such as the Navigation Inline element which are available only in the Header and Footer builders.

Click the Element tab to see the list of elements which you can use and choose from:

You can drag an element to the preview area, or you can access the element selection screen by clicking the plus icon at the right-hand side of the layout pane:

Depending on the element selected you will see proper controls to customize that element. Here is an example of Text element controls:

How to Assign the Header/Footer

To assign a header or footer click on the header/footer you want to assign. And on the right-hand side you'll see new options to assign your header like this:

You can assign headers globally. Which means the header/footer will show up everywhere on your site that doesn't have a specific header/footer applied. For example, you have one global header and then a specific header for your about page. Your global header shows on every page apart from your about page as that has a specific one assigned.

You can also assign headers or footers to individual pages, posts, and custom post types, the front page, the posts page (your blog) or all pages, all posts or all custom post types and archives. This gives you the ultimate flexibility in creating headers and improving the user experience of your website with specific headers for specific pages.

Summary

We've introduced the Header and Footer builders in the Pro theme and talked about the building blocks of those builders including Bars, Containers, and elements. We've also described different areas of the builders and how you can utilize them to achieve the desired design. We are going to delve deep into each element of the header/footer builders in the upcoming articles.