Welcome to the header and Footer builders! An exciting new and innovative way to build completely custom headers and footers. Giving you the ultimate flexibility with your website. If you'd like to see a little more of the builders in action before diving into the article, check out the video below:
To access the header builder you need to go to Pro > Headers:
To access the footer builder you need to go to Pro > Footers:
Upon opening the header builder you'll be presented with a screen that looks like this:
The initial header builder screen is made up of four main areas which are the same for the footer builder, these areas are:
- 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!
- 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.
- Finally, 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. This is covered more in-depth below.
There are three buttons for each header or footer before you start editing which are:
- Edit - Clicking Edit will open the header builder interface to edit that specific header.
- Copy - Clicking on Copy will create an exact copy of that header, useful for if you wanted to test a specific change but didn't want to risk messing up your existing header or if you needed to create the same header with one tweak to be on a specific page, rather than doing all that work again just click Copy and it does all the heavy lifting for you!
- Delete - Clicking Delete will, of course, delete the header in question.
- Save as Template - Clicking on this button will open up a pop-up which you can add a name to the template and it will be available in the Template Manager.
Make sure you have the header builder open, and on the left-hand side you'll see an area that reads Create Header.
You either can start creating the header with a blank template or you can choose from the templates you already installed in the Template Manager.
Pro theme users have access to professionally designed headers, footers and other templates via the Template Manager which is called Design Cloud:
You should now see an input to enter the name of your header with a Create button.
Go ahead and enter any header name you want. For some naming tips, you may want to name it based on what page it's going to be used on or anything else you'd like. Once you're happy to go ahead and click on Create.
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. Click on Edit and you'll be entering the compelling world of the header builder!
You'll now see your header in the preview area along with the header editor itself at the bottom of your screen set to the fixed height like this:
The anatomy of a header and footer
Every header or footer built within their respective builders is made up of three main parts. Bars, Containers, and Elements. Let's explore through more in-depth.
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. As you can see in the header builder the template we used has one bar. If you click on Add.
You'll now see the new bar in the header builder, and in the preview area the new bar shows under the existing bar like this:
Don't want that bar? No problem just click on the trash can icon and a warning will come up asking if you are sure you want to delete that bar like this:
Go ahead and click on Yes, proceed and that gets you back to what you had already the one bar.
Go ahead and click on the magnify icon on the Bar. This is known as the inspector.
When you click that you'll be taken to 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:
With the controls, you'll need to play about with the various controls to configure the header exactly as you want it. Taking a look at how the pre-defined templates are setup is always a good place to start and should make you more confident in using the builder itself.
Controls available for the Bar are:
The setup controls all relate directly to positioning and backgrounds. On some controls like Background, you'll see an Advanced checkbox. If you check the Advanced checkbox additional controls will show the inspector like this:
when you set varying controls as you want, you may notice additional controls show up. For example just like the advanced option. If you set Sticky Bar to On you'll get an additional set of controls just for the Sticky Bar called Sticky Setup. Allowing you to set various options.
The dimension options specifically refer to the dimensions of the bar as a whole. You can control the height, outer spacing, content length and the content max length. By default, you'll see the values in EM, percentage, and PX. If you click on any of those, for example, click on the EM next to the Height control. A tooltip will show in this tooltip will be a set of values you can choose to use including:
- VH (Viewport Height)
- VW (Viewport Width)
If you select PX for the height value instead of EM you can now modify the height value in pixels. Setting VW to 100 would be 100% of the viewport width of the device being used and setting VH to 100 would be 100% of the viewport height.
The Header and Footer Builders use a CSS library called Flex Box. Flex Box allows you to have ultimate control over how the content displays and response. While FlexBox isn't the most straightforward thing to grasp, in no time at all, you'll be creating awesome headers and footers like a pro.
There are some fantastic resources for FlexBox around the web. One of the best being over at CSS Tricks. It's a lengthy tutorial though well worth having a read through and adding to your favorites.
Border controls do exactly as you'd think, control the borders of the bar. You can set the style, the width, and the color. That top option called Link Sides allows you to either link up every side, so the border is the same on all sides. Or if you disable Link Sides you can control the style, width, and color of the border individually per side.
The box-shadow controls allow you to set all parameters for a box shadow around your bar, from the X-offset to the Y-offset, how much blur to use and the color.
Once you have your bar configured exactly as you want to go ahead and click on Layout that will take you back to the main Header Builder screen, where you can see your bars, containers, and Elements like this:
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, from the template we're using all the elements are within the one container. But you can experiment to find the perfect setup for yourself.
Just like when we looked at Bars click on the Magnifying glass to access the inspector and controls for the container. Once you're in the container inspector you should see something like this:
Controls available for the Container are:
The Setup controls consist of:
- Max Width - Allows you to set the maximum width of the container. If your content expands the container width it'll start squishing together.
- Max Height - The maximum height that the container can be.
- Background - Allows you to set the Background color of the container. This is separate from the Bar background. Which allows you to set a unique background per container.
- Advanced - Checking the Advanced box shows the advanced background options which enable the Background lower layer controls, the background upper layer controls and the background border radius controls. Advanced backgrounds can be a color, an image or even video.
The Self Flex controls consist of:
- Preset - Presets offers Fill Space Equally, Fill Space, No Shrink and standard.
- Flex Grow - Flex grow allows you to set how that container should grow. For example, if you set Flex Grow to 1 and had another container set to Flex Grow 1. Both would take up equal space within the bar. If however, you set one container to Flex Grow 1 and the other container to Flex Grow 2. That container set to Flex Grow 2 will take up twice as much space as the container set to Flex Grow 1.
- Flex Shrink - Defines how much the flex items will shrink relative to the other containers within your bar.
- Flex Basis - If this is specified it determines the initial size of the flex item before any available space is distributed according to the other factors from the remaining flex controls.
The Flex Layout controls consists of
- Layout - Either set to Row or Column
- Reverse Layout
- Wrap Children
The Margin controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right-hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left-hand side margin.
The Padding controls consist of:
- Link Sides - Link sides allows you to link up every option within the padding controls so when you change one value all values change. Or you can unlink sides and set each padding option individually.
- Top - Sets the top margin.
- Right - Sets the right margin.
- Bttm - Sets the bottom margin.
- Left - Sets the Left margin.
The Border controls consist of:
- Link Sides - Allows you to link up the border control for all sides or unlink sides to control each border side individually.
- Style - Sets the style of the border such as dashed, dotted etc.
- Width - Sets the width of the border in pixels by default. Or click on PX to change the value to the units you'd like to use (EM, REM)
- Color - Sets the color of the border.
The Border Radius controls consist of:
- Link Sides - Link all sides of the border to control all border radius options at the same time, rather than configuring each value individually. If you unlink sides. You can set the border-radius controls individually.
- Top Left - Set the top left radius of the border.
- Top Right - Set the top right radius of the border.
- Bttm Right - Set the bottom right radius of the border.
- Bttm Left - Set the bottom left radius of the border.
Do note that you won't see any effect by changing the Border Radius values unless you have already set your Border controls.
The Box Shadow controls consist of:
- X-Offset - Set the offset of the border shadow for the X-axis.
- Y-Offset - Set the offset of the border shadow for the Y-axis.
- Blur - Set the blur of the box shadow.
- Spread & Position - Set the spread and position of the box shadow.
- Color - Sets the color of the box shadow.
Lastly, every header or footer has to have elements, they are after all that actually show the content. The elements in the template we're using are Image Scaling, Navigation Inline and Navigation Collapsed.
Click on Add and you'll see all Elements that are currently available:
The current elements in the Header and Footer Builder at the time of launching are:
- Cart DropDown
- Cart Modal
- Cart Off Canvas
- Content Area
- Content Area Dropdown
- Content Area Modal
- Content Area Off Canvas
- Global Block
- Navigation Collapsed
- Navigation Dropdown
- Navigation Inline
- Navigation Modal
- Search DropDown
- Search Inline
- Search Modal
- Widget Area
Elements are made up of multiple different controls each of which is covered in the above article.
Once you've created your header or footer as you want it with the elements all setup, don't forget to Save. Click on Headers to get back to the main headers screen like this:
Assigning a Header or 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.
Say you have a landing page and don't want your visitors randomly browsing around your site till they read that page. Create a new header, set up some anchor links. Assign the header to that page, and et voliá your custom header is set.
If you have hundreds of posts, pages or custom post types. You can use the search bar on the right-hand side to find the pages and posts you want to assign your header to. This searches in real time and returns the results instantly.
If we click on Make Global you'll see a new message that the header is currently assigned as your global header like this:
If you click on the three bars in the top left you'll be able to quickly navigate the font manager, content builder, header builder, footer builder and theme options.
Clicking on one of the available options will open that specific option and you'll leave where you currently are. For example from this screen:
If you click on Footers You'll be taken to the Footer builder like this:
The Footer Builder works in the exact same way as the Header Builder including assigning and un-assigning, bars, containers, and all elements. Think of the footer builder as the header builder flipped. Everything works the same, it's just displaying at the bottom of your website rather than the top.