Design Header and Footer

Overview

The header is the navigation area at the very top of your website. Visitors use it to recognize your brand, switch between pages, or click your main call to action. The footer is the information area at the bottom of your site, typically containing contact details, social media links, legal terms, and supplementary navigation.

These two modules are usually set to be site-wide, meaning a change made in one place will update all pages using that same header or footer. This ensures consistency in your logo, navigation, and contact information.

Where to Set Them Up

Open "Layout" at the top of the editor. The header appears at the top of the list, and the footer at the bottom. Click "Edit" to open their respective settings forms. You can also click directly on the header or footer in the editor preview to open the form.

If your current page doesn't have a header or footer, "Layout" will provide an option to add one. After adding, it's recommended to confirm if it should be site-wide before filling in content.

Designing Your Header

1. Set Up Your Brand Logo

Your header can use an image logo or an icon logo. The logo is your most frequently seen brand identifier, so choose a version with clear edges that remains recognizable when scaled down.

For image logos, use a clean background with sufficient contrast. If the logo text is very thin or the color is too light, check its clarity in both desktop and mobile previews.

2. Create Navigation Items

Navigation items are the links within your header. They don't automatically generate from your page list; you need to add, name, and order them one by one in the header form. This gives you control over which options visitors see first.

Each item can link to:

• A page within your site, such as "Services" or "Contact Us."
• A specific section on the same page, like "Pricing" or "FAQ."
• An external URL, such as your booking system, store, social media, or partner platform.

External links can be set to open in a new tab. It's recommended to open external links in a new tab so visitors don't leave your site.

3. Add a Primary Button

Your header can include one primary button, such as "Book Now," "Free Consultation," or "Shop Now." This is your Call to Action (CTA) – the next step you most want visitors to take.

First, create a custom button in "Settings" → "Content", then select it in your header settings. Using a single custom button across your site means you only need to update the URL or text in one place if it changes, reducing inconsistencies.

4. Organize Navigation Order

Place the most important items first. A typical website might use an order like "Home, Services, Portfolio, About Us, Contact." If your primary goal is bookings, ensure the button text is clear and its position is consistent.

Designing Your Footer

The footer is suitable for information that doesn't need prime real estate on the homepage but might still be needed by visitors. It can display your brand logo, website name, a brief brand description, social media links, contact information, custom navigation, and legal terms.

1. Decide What Brand Information to Display

You can choose whether to show your logo, website name, and social media links. The URLs for social media links must be entered in "Settings" → "Content"; the footer only determines whether to display them.

2. Add a Description and Custom Navigation

A footer description is ideal for a one- or two-sentence restatement of your brand. Custom navigation can link to important pages that don't necessarily belong in the header, such as FAQs, refund policies, partnership information, or career opportunities.

3. Display Contact Information

The footer can optionally display your address, phone number, email, and business hours. This data comes from "Settings" → "Content". Ensure your phone number includes the correct country code, your email has no typos, and your business hours are easy for visitors to understand.

4. Add Legal Links

The footer can optionally display links to your terms, privacy policy pages, and a Cookie settings portal. Manage the content and visibility of your legal pages in "Pages" → "Legal Pages".

5. Fill in Copyright Text

The copyright text in the footer is manually entered, for example, "© 2026 Brand Name." The system won't automatically update the year or brand name; you'll need to check and update this text annually or after a brand name change.

Site-Wide vs. Page-Specific

Headers and footers are best suited for site-wide use by default. When "Site-wide" is enabled, any changes will affect all pages using that module. This is ideal for main site navigation, shared contact details, and legal links.

If a specific page requires a completely different navigation, like a standalone event page, you can disable "Site-wide" in the form. The system will ask for confirmation and convert the content used by other pages into individual copies. This approach should be reserved for exceptions; too many different headers can confuse visitors and increase future maintenance costs.

Hiding Your Header or Footer

You can temporarily hide your header or footer using the eye icon in "Layout." Before hiding, ensure visitors can still access essential navigation, contact information, or legal links. To restore them, simply re-enable their visibility.

Tips

• Keep your header navigation to 4-6 clear items; too many options can overwhelm visitors.
• Use the header's primary button for a single, focused action (e.g., "Book" or "Contact"), not multiple competing goals.
• Ensure your footer contact information matches your Google Business Profile, social media, and business cards.
• Before publishing, check each page to confirm navigation links point to the correct destinations and external links open in a new tab.

Related Documents

• Managing Website Pages
• Site-Wide Settings and Management
• Drafting, Saving, and Publishing