--- title: "How to Create Page Header and Footer" slug: "how-to-create-page-header-and-footer" description: "Learn how to create and customize page headers and footers to improve navigation and highlight key information. " tags: ["editor", "header", "footer"] updated: 2024-11-27T14:18:15Z published: 2024-11-27T14:18:15Z canonical: "support.myclickfunnels.com/how-to-create-page-header-and-footer" --- > ## 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. # How to create page header and footer Headers and footers are the top and bottom sections of a page that add structure and consistency to your funnel. A well-designed header and footer can enhance your page’s appearance, keep visitors oriented, and reinforce your brand. This guide will show you how to create and customize headers and footers, either by starting with a predesigned template or building them from scratch, to keep your audience focused on your main offer. --- ## Requirements 1. An active ClickFunnels account. 2. A page created in your workspace. --- ## How to Create a Page Header and Footer You can create a page header or footer by using predesigned templates or building one manually. Follow the steps below for each method. ### Option 1: Using Predesigned Templates 1. In your page editor, click on **Add Section** to open the section library. 2. In the **Categories** menu, select **Header** or **Footers** to view pre-designed section templates that you can use as headers or footers for your page. 3. Choose a **template** that fits your design needs, and click on it to add it to your page. You can fully customize these templates to match your brand.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(249).png) ### Option 2: Building a Header or Footer from Scratch 1. In your page editor, click on **Add Section** and select **Blank** from the section options. This will add an empty section to your page where you can start building a custom header or footer. For more details, visit the [article on Section Settings](/v1/docs/page-editor-adding-sections). 2. **Add Rows**: Inside the section, click **Add Row** to structure the layout. For example, in a header, you might have a row for the logo and navigation links. In a footer, you might use rows for links, social media icons, and contact information. Read the [article on Adding Rows](/v1/docs/page-editor-adding-rows). 3. **Add Elements**: Click **Add Element** within each row to insert components like: - **Logo** (using an image element) - **Navigation Menu** (links to important pages) - **Social Media Icons** - **Buttons** (for call-to-action, like "Contact Us" or "Shop Now") - **Text** (for contact information, disclaimers, or copyright) For more details, check out the [article on Adding Element](/v1/docs/page-editor-adding-elements). --- ## Configure Header and Footer Settings When configuring your header or footer, you can adjust settings at multiple levels: **section**, **row**, **column**, and **element**. Each level offers different options to control the appearance and functionality of your header and footer, so it’s helpful to understand how each one works. - **Section Settings**: These settings control the overall header or footer area. You can adjust options like **background color**, **padding**, **margins**, and **visibility** on different devices. To access section settings, hover over the section and click the **gear icon** in the top-right corner. - **Row Settings**: Rows help structure your header or footer by organizing content. - **Column Settings**: Columns allow you to divide rows into sections. You can adjust **width**, **alignment**, and **spacing** within column settings to create the desired layout. Check out the [article on understanding Column.](/v1/docs/page-editor-understanding-columns) - **lement Settings**: Each individual element, such as text, buttons, or icons, has its own settings. Customize **font style**, **color**, **size**, and **alignment** within element settings. --- ## Best Practices for Headers and Footers - **Draw Attention with a Focused Header**: Use the header to highlight key information or calls-to-action that capture visitors' attention, such as a special offer, a limited-time discount, or an important announcement. Keep the design clean and avoid overcrowding, so your message stands out. - **Organize Footer Information**: Use the footer to provide links to secondary pages (e.g., Terms of Service, Privacy Policy) and social media profiles. Group related information into rows to improve readability. - **Optimize for Mobile**: Ensure your header and footer are mobile-friendly. Test on different devices to confirm that links are clickable and the layout adjusts properly on smaller screens. - **Use Clear, Readable Fonts**: Select fonts that are easy to read and size them appropriately, especially in the header where users look for navigation links. ## Related - [Page Editor: Adding Sections](/page-editor-adding-sections.md) - [Page Editor: Understanding Columns](/page-editor-understanding-columns.md) - [Page Editor: Adding Rows](/page-editor-adding-rows.md) - [Page Editor: Adding Elements](/page-editor-adding-elements.md)