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
An active ClickFunnels account.
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
In your page editor, click on Add Section to open the section library.
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.
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.
.png "image(249).png")
Option 2: Building a Header or Footer from Scratch
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.
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.
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.
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.
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.