Guide: How to Create and Customize Website Headers

Guide: How to Create and Customize Website Headers

By Michael Thompson

March 15, 2025 at 06:29 PM

A website header is the consistent top section that appears across all pages of your website, containing essential navigation and branding elements.

Core Header Elements:

  • Website title or logo
  • Navigation menu
  • Optional elements: shopping cart, social media icons, CTA buttons, language selector

Creating Your Header:

  1. Click "Edit" in the top-left corner
  2. Hover over header and select "Edit Site Header"
  3. Modify navigation links by:
    • Adding, editing, or deleting pages
    • Rearranging links using drag-and-drop
    • Customizing link appearance

Desktop Header Design:

  • Choose between full-width or indented layout
  • Adjust padding and spacing
  • Add visual effects:
    • Drop shadow
    • Border
    • Fixed position (stays at top while scrolling)
  • Set background style (solid, gradient, or adaptive)

Mobile Header Design:

  • Select mobile-specific layout
  • Customize menu appearance:
    • Expanded view styling
    • Collapsed menu icon
    • Link spacing and alignment
  • Adjust font sizes and colors

Adding a CTA Button:

  1. Click "Edit Site Header" > "Add Elements"
  2. Toggle button option on
  3. Customize:
    • Button text
    • Link destination
    • Design (shape, color, typography)

Header Background Options:

  • Solid: Single color background
  • Gradient: Smooth transition to first section
  • Adaptive: Transparent overlay showing section background

Pro Tips:

  • Ensure logo has appropriate sizing for both desktop and mobile
  • Keep navigation clear and concise
  • Test header visibility across different page types
  • Consider using fixed position for improved navigation
  • Maintain consistent branding in header design

You can hide the header on specific pages through Page Settings > Navigation to create focused landing pages or special content areas.

Related Articles

Previous Articles