--- title: "Adding a Universal Header and Footer to Your Site" slug: "adding-a-universal-header-and-footer-to-your-site" description: "Learn to create universal headers and footers in ClickFunnels for consistent navigation and branding across your site, saving time and enhancing design." updated: 2025-03-27T15:34:51Z published: 2025-03-27T15:34:51Z canonical: "support.myclickfunnels.com/adding-a-universal-header-and-footer-to-your-site" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(745).png) --- ## Requirements 1. An active ClickFunnels account 2. [The Site & Blog app added to your workspace](/v1/docs/adding-apps-to-your-clickfunnels-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 & Blog** 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(738).png) - 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(740).png) --- ## 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(741).png) 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(742).png) - 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. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(744).png) 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](/v1/docs/navigation-add-navigation-menus-to-pages). ## Related - [Site Settings](/understanding-site-settings.md) - [How to Customize Your Site's Home Page](/how-to-customize-your-sites-home-page.md) - [Adding Universal Blocks](/adding-universal-blocks.md) - [Creating a Page Layout](/creating-a-page-layout.md)