Header and Footer Builders Overview

Pro's Header and Footer Builders provide users with a similar building interface to that of its Content and Layout Builders, allowing designers to take advantage of a drag and drop interface for crafting custom assets.

One primary difference is that Headers and Footers are powered by a different set of Structural Elements that are used to layout your designs. Instead of Sections, Rows / Columns, Grids / Cells, et cetera, you will take advanage of Bars and Containers, which utilize unique controls specific to the needs and requirements of modern headers and footers.

On top of that, you can assign your Headers and Footers that you have created to different pages or posts on your website, allowing you to create complex site layouts that respond to the contextual needs of a particular area of your site.

Getting Started

To begin working with the Header Builder or Footer Builder, click on the main menu and select the Builder you want to work with (the interface and workflow for both Builders is exactly the same, so from this point forward we will only show screenshots from the Header Builder to keep things more streamlined):

Once selected, you will see the following submenu if you have not already created an asset for your site:

To begin, click on the + icon in the upper-right corner of the submenu, which will reveal the following form:

This form is where you will create all new assets for your site. Upon clicking Create Header / Footer, you will be taken back to the main Header / Footer Builder submenu, which will now feature an index of all assets you have created. To begin editing your asset, click the Edit button:

Designing Your First Header / Footer

Once you have entered the asset you wish to work on, if it is completely empty (i.e. does not have any Bars) you will see the following group of selection to start from in the live preview:

Clicking on From Scratch will simply add your first Bar to the design, just like clicking anywhere in the Outline pane of an empty design. Clone Exiting will allow you to copy over an existing asset if you did not already start from a saved template in the submenu above. Finally, selecing Use Template will bring up the following modal:

This is meant to give you a handful of quick start options to get you going with a new asset and help connect some of the dots in the building process. Let's say we start with the first “Hero” option at the bottom of the image above. Doing so would output something like the following in your install:

What is important to keep in mind here is that what you see in the above screenshot is composed with Elements you already know from the Content Builder (with the exception of the general layout being constructed using Bars / Containers rather than Sections and their constituent child Structural Elements). If you wanted to change the look of that layout you could simply alter the styling of the Bars and their child Elements, or delete them altogether and start from scratch.

At this point, hopefully you're starting to connect some of the dots for the huge role that the Header / Footer Builders serve in the site building process. Having full control over the base layout and design for global or specific asset opens up many functional and design possibilities.

Assigning Your First Header / Footer

Now that we've created our asset, all that we have left to do is assign the asset to the appropriate context on your site. To do this, click on the Settings tab in the workspace and find the Assignments → Conditions control:

Clicking on that control will reveal the following popup:

To get started, click Add Condition Group to specify a context in which you would like your asset to be used. For example, if you wanted your asset to show up for your entire site, you would select “Entire Site” in the first dropdown (which is the default selection when adding your first condition, as most will want to assign their assets globally):

There are other helpful preset selections you can choose from as well such as “Front Page,” which will assign your asset to the home page on your site only. The second control after the dropdown will default to “is being viewed,” which can be changed to “is not being viewed” by clicking on the button to quickly give you the inverse if desired:

Another option you may wish to explore with assignments is placing an asset on a specific page or post in your installation. To do this, select “Page (Specific)” from the first dropdown, set the middle toggle to “is,” and then specify the page you want in the final dropdown:

You can also assign to multiple specific pages or posts by adding new condition groups, which will function as an or statement:

The Assignment Control is incredibly powerful and there are many ways you can leverage it to accomplish unique outcomes on your site. To learn more about this control, check out our Assignment Control article.

Videos

We've put together several videos exploring various concepts when building Headers and Footers for your install, so we definitely recommend checking those out! We also routinely add new videos to our YouTube Channel so be sure to subscribe to get the latest.

Summary

We've covered an introduction to the Header and Footer Builders, how to design and assign assets, in addition to video tutorials you can explore for more concepts. We hope you enjoy these powerful additions to our family of website builders!