Site wide Header and Footer Sections

Header and Footer Sections have the same standard functionality as Sections with Columns. Header and Footer Sections offer the additional ability to sync across all pages of your site for a consistent experience.

Check out our video below to understand Headers and Footers

Add a Header or Footer Section

1. Click on the “Sections” tab within the Sidebar.
2. Click “Add Header” and “Add Footer” to add these Sections to the page.
3. The header and footer sections will appear on your page.
4. You can begin dragging content into your Header.
5. Click “Save” to save changes made to your Header and Footer Sections.
6. Click “View Live” to see the Header and Footer in action.

Once a Header or Footer Section is added to a page you can show or hide it from other pages on your site. By default it will be hidden on other pages.

Show or Hide Header and Footer Sections on Pages

1. Select the Sections tab in the Sidebar on the left of the page.
2. In the bottom left of the Header or Footer thumbnail, click the dropdown icon.
3. Select Hide or Show depending on if you would like to make the Header or Footer Section visible or invisible on the page.
4. Click “Save” to save changes to the page.

Set a new Section to be the Site Wide Header or Footer

1. Click on the “Sections” tab within the Sidebar.
2. Navigate to the Section you want to be the new Site Wide Header or Footer Section.
3. Select the drop down icon in the lower right of the Section thumbnail.
4. Click “Make Header” or “Make Footer”
5. Click “Save” to save the new site wide Header or Footer Section.

Set site wide Header Position - Normal, Sticky, or Fixed

The site wide header can be set to different positions to give a unique look to your site.

1. Ensure you have a site wide Header set up on your page.
2. Select the Header Section on your page.
3. Click Header Styles in the upper left of the Header Section.
4. In the Editing Menu select Position.
5. Choose a Position.

• Normal - Positioned at the top of the page.
• Sticky - Remains visible at the top of the page while scrolling.
• Fixed - Remains visible at the top of the page while scrolling and overlays the section below it.
• Overlap - Sits on top of the section below it (useful for transparent navigation over a hero image) but scrolls away with the page.

6. Click “Save” and “View Live” to see the Header Section in action.

Change the color or background image of a Header or Footer

1. While editing the page, Select the Header or Footer Section.
2. Click “Header Style” or “Footer Style” in the upper left corner of the Section.
3. In The Edit Menu click the “Section” tab.
4. Select Section background.
5. Click background color or image to set or edit the Section background.
6. Click “Save” to save your page.

Adjusting the color of header and footer sections in desktop mode will not adjust the color in mobile mode

Expand or shrink the height of a Header or Footer Section

The height of your Header or Footer Section can be expanded or reduced to add more or less content within a Section.

1. Select the small circles on the left and right of the bottom edge of the Section.
2. Drag the circle downwards to expand the Section, or up to reduce the Section.
3. Click “Save” to save changes to the page.

Use a different heading on each page

Keep only your logo and navigation in the Header, and put each page’s heading in its own Section below it. Everything inside the Header is shared, so a heading there changes on every page when you edit it.

These changes apply to every page that shows the Header. Until you add a heading Section to each page, those pages will have no heading, and the Header will sit on top of their first Section.

1. Click “Add section” at the bottom of the Header, choose a Section, and click “Add to Page”.
2. Give the new Section the same background image your Header uses.
3. In desktop mode, drag the heading and subtitle out of the Header and into the new Section. Content can’t be moved between Sections in mobile mode.
4. Remove the background image from the Header.
5. Drag the bottom edge of the Header up so it only fits your logo and navigation.
6. Set the Header position to “Overlap”. The Header now sits on top of the new Section, so the image shows behind your logo and navigation.
7. Make sure the heading sits below the logo and navigation, not behind them.
8. Click “Save”.

On each of your other pages, add a Section below the Header, give it the same background image, and add that page’s heading. For new pages, duplicate this page so the heading Section comes with it.

Custom fonts added to a header will not sync throughout all pages at this time. It is recommended to use standard fonts within your header section, or add the custom font file to each page on your site.