Adding a Universal Header and Footer to Your Site

Headers and Footers are essential for any site, providing consistent navigation and branding across all pages. In ClickFunnels, you can create universal header and footer sections, ensuring that updates to these sections are reflected across your entire site. This article explains how to create universal headers and footers, import them into different pages, and use the Navigation Element effectively.

Requirements

1. An active ClickFunnels account

2. The Site app is added to your workspace

What is a Universal Section

A Universal Section is a reusable content block that can be saved and added to multiple pages on your site. It’s perfect for maintaining consistency across your site by using the same header, footer, or other repeated elements without manually recreating them on each page.

When saved, Universal Sections appear with a purple highlight in the editor, making them easy to identify. Any updates made to a Universal Section will automatically reflect on all pages where it is used, saving time and ensuring uniformity in design.

Creating a Universal Header and Footer

1. From your workspace, navigate to the Site app and select the Overview menu.

2. Click Edit Site in the top-right corner.

3. Under Site Theme Pages, select the Home Page option to edit the site home page in the page editor.

4. Click the green “+ Add Section” icon to add a new section.
   

   • For the header: Browse the Navigations category and pick a suitable header template with navigation menus.

   • For the footer: Browse the Footers category and select a footer template.

5. Use the page editor to customize the selected template by adding or editing elements such as logos, navigation menus, links, and icons to match your branding.

6. Once your design is complete, hover over the section and click the Save icon.

7. In the Section Name field, provide a descriptive name like "Website Header" or "Website Footer."

8. Enable the “Make Section Universal” option to ensure this section can be reused across other pages.

9. Click Save Section to finalize and save it as a universal section.
   

Importing a Universal Section to Different Pages

Universal sections allow you to reuse the same header and footer across multiple pages without redesigning them. Here’s how to import them:

1. Open the Page Editor for the page where you want to add the universal header or footer.

2. Click the green “+ Add Section” icon to add a section.

3. Navigate to the Universal tab in the section library.

4. Select your saved universal header or footer from the list or search the name of the universal section.

5. Drag and drop the section into the desired location on the page.
   

By using universal sections, any updates made to the header or footer in one location will automatically reflect across all pages where the section is applied.

Using the Navigation Element

The Navigation element is vital to creating an intuitive browsing experience for your visitors. It allows you to organize and display menus that link to different sections or pages of your site. Here's how to effectively use it:

When Using a Pre-Designed Template

• If you have imported a header section from a pre-designed template, the Navigation element is already included. You do not need to add it again unless you want to customize it further.

Creating a Header or Footer from Scratch

• When building a header or footer section from scratch, you must manually add the Navigation element.

  1. Click the + Add Element icon in the page editor.

  2. Navigate to the Navigations category in the elements library.

  3. Drag and drop the Navigation element into your desired location.
     

• The Navigation element is versatile and can be used in both headers and footers.

  • Header Navigation: Arrange menus horizontally to match traditional header designs.

  • Footer Navigation: Use vertical or horizontal layouts to organize links such as “Privacy Policy” or “Terms of Service.”

Adding and Customizing Menu Items

To configure the menus in your Navigation Element:

1. Access Navigation Settings: Click on the Settings icon for the Navigation element in the editor.

2. Modify Navigation Links: Under the Navigation Links setting, you’ll find three default menu items: “Shop,” “Blog,” and “About Us.”

   • Click on each menu item to edit the text and link it to the appropriate page.

   • Use relative paths for linking, e.g., /shop or /about-us. Relative paths make navigation links dynamic and adaptable, ensuring they work seamlessly even if your domain changes.
     

For a detailed guide on customizing the Navigation Element, including adding new menu items and styling, refer to the article Navigation: Add Navigation Menus to Pages.