How to Use Headers and Footers in Your Website

Headers and footers are essential parts of any website, especially for multi-page sites. They provide consistent navigation, branding, and important information across all pages. The website builder includes pre-designed headers and footers that can be customized and applied globally.

1. Adding a Header

1. Click the plus (+) icon to add a new block.
2. Open the Block Manager and select Headers.
3. Choose a pre-made header and insert it into your page.
4. To move the header to the top, open the Reorder Sidebar and drag it into position.

Even though headers are technically blocks, they come with special functionality for site-wide use.

2. Header Display Options

Once added, go to the menu settings on the left to adjust how the header behaves when scrolling.

• Sticky: The header stays at the top of the screen when users scroll down.
• Static: The header remains at the top of the page but disappears when scrolling.
• Fixed: The header stays in place at the top of the viewport, even while scrolling.

Choose the setting that best fits your design needs.

3. Applying a Header Globally

Instead of adding a header to each page manually, you can assign it globally:

1. Select the header settings.
2. Click Make It Global.
3. Choose which pages you want the header to appear on (e.g., All Pages).
4. Click Save to apply changes.

Now, the header will automatically appear on every page, including new ones you create.

4. Styling the Header

You can fully customize the header’s appearance:

• Change the background color or add an image.
• Adjust the width, padding, and margins.
• Add a border or drop shadow to create separation from the main content.

If using a sticky header, you can style it differently for when it appears after scrolling. For example:

• Make it transparent for a sleek effect.
• Use a darker color for contrast.
• Change the logo to a different version when scrolling.

5. Adding a Footer

Footers function similarly to headers, providing additional navigation and site-wide content at the bottom of each page.

1. Open the Block Manager and select Footers.
2. Choose a pre-made footer and insert it into your page.
3. Just like headers, footers can also be made global to appear across all pages.

Footers are a great place to include:

• Additional navigation links
• Social media icons
• Copyright information
• Contact details

6. Using Multiple Headers and Footers

The builder allows you to create and apply different headers and footers for specific pages. This is useful for:

• Landing pages with unique navigation needs.
• Membership sites that require different footers for logged-in users.
• Multi-language sites with language-specific headers or footers.

With the flexibility of global headers and footers, you can ensure a consistent and professional look across your entire website while maintaining easy navigation for users.