Header & Footer Customization

Header & Footer Customization

Headers and footers are crucial elements that appear on every page of your website. A well-designed header provides clear navigation and brand identity, while a thoughtful footer offers important links, contact information, and trust signals. This guide covers everything you need to create professional headers and footers.

Understanding Headers

The header is the top section of your website that typically contains:

• Logo: Your brand identifier, usually linked to homepage
• Navigation Menu: Links to main pages and sections
• Call-to-Action: Buttons like "Contact Us" or "Get Started"
• Search: Site-wide search functionality
• Language Selector: For multi-language sites
• User Account: Login/signup or account menu

Header Layout Options

Customizing the Header

Changing the Logo

1. Click on the current logo in the header
2. Click Replace or the image icon
3. Upload your logo (recommended: SVG or transparent PNG)
4. Adjust size using the corner handles
5. Set the link destination (usually homepage)

Logo Best Practices

Navigation Menu Configuration

Menu Structure

The navigation menu is managed through the Website menu editor:

1. Go to Website → Site → Configure Menu
2. Or click Edit then the menu icon in the header
3. Drag and drop to reorder items
4. Nest items to create dropdowns

Menu Item Types

Creating Dropdown Menus

1. Add a parent menu item (e.g., "Services")
2. Drag child items underneath and indent them
3. Child items appear in dropdown on hover
4. Set dropdown alignment (left, right, center)

Mega Menu Setup

Mega menus display rich content in columns:

1. Create a menu item and set type to Mega Menu
2. Click Edit Menu Content
3. Use building blocks to create columns
4. Add images, icons, descriptions, and links
5. Save the mega menu content

Header Behavior Settings

Setting Header Behavior

1. Click on the header while in Edit mode
2. Open the Options panel on the right
3. Find Header Behavior section
4. Choose your preferred behavior
5. Adjust additional settings (scroll trigger, animation)

Header Call-to-Action

Add prominent buttons to drive conversions:

CTA Button Placement

• Right Side: Most common, easy to find
• After Navigation: Natural flow after menu items
• Contrasting Color: Stand out from navigation links

CTA Button Options

• Contact Us: Link to contact form
• Get Started / Sign Up: Registration flow
• Request Demo: Sales inquiry
• Shop Now: E-commerce store
• Download: Lead magnet or app

Understanding Footers

The footer appears at the bottom of every page and typically includes:

• Company Information: About, mission, address
• Navigation Links: Quick links to important pages
• Contact Details: Phone, email, address
• Social Media: Links to social profiles
• Legal Links: Privacy policy, terms, cookies
• Newsletter Signup: Email subscription form
• Trust Signals: Certifications, payment methods, awards

Footer Layout Options

Footer Content Sections

Company Section

• Logo (usually smaller than header)
• Brief company description (1-2 sentences)
• Social media icons

Quick Links Section

Organize important links by category:

• Company: About, Team, Careers, Press
• Products/Services: Main offerings
• Resources: Blog, Help Center, FAQs
• Support: Contact, Documentation

Contact Section

• Phone number (clickable for mobile)
• Email address (mailto: link)
• Physical address
• Business hours
• Contact form link

Newsletter Section

1. Add a Form block to the footer
2. Configure for email subscription
3. Connect to your mailing list
4. Add privacy notice text

Legal Section

Usually in a separate row at the bottom:

• Copyright notice: © 2024 Company Name
• Privacy Policy link
• Terms of Service link
• Cookie Policy link
• GDPR compliance notice (if applicable)

Adding Social Media Links

Social Icons in Header

1. Click on the header while editing
2. Add a Social Media Links block
3. Select which platforms to display
4. Enter your profile URLs
5. Choose icon style (color, monochrome, outline)

Social Icon Options

Mobile Header/Footer Optimization

Mobile Header Considerations

• Hamburger Menu: Navigation automatically collapses
• Logo Size: May need smaller version for mobile
• CTA Button: Ensure its visible and tappable
• Sticky Behavior: Consider height impact on mobile

Mobile Footer Considerations

• Columns stack vertically on mobile
• Keep content concise
• Make phone/email links tappable
• Ensure buttons are full-width for easy tapping

Header/Footer Styling

Background Options

• Solid Color: Theme colors or custom
• Gradient: Subtle transitions
• Image: Background image with overlay
• Transparent: Content shows through

Borders and Shadows

• Bottom Border: Subtle line separating from content
• Box Shadow: Adds depth when sticky
• No Border: Seamless look

Spacing

• Padding: Internal space around content
• Compact: Smaller padding for less prominent header
• Spacious: Larger padding for emphasis

Best Practices