How to Use the Header Logo Widget

The Logo widget is used to display your brand identity in the header. It is one of the most important visual elements of your website and is typically placed in the left or center column of the main header row.

The logo usually acts as a visual anchor for visitors and is commonly linked to the homepage, helping users quickly reorient themselves anywhere on the site.

⚠️ Important limitation

You can only have one Logo widget in the header.

If a logo already exists in any of the header rows, it will not be an option to add another logo widget .

What the Logo Widget Is Used For

Use the Logo widget to:

  • Display your brand logo or site name
  • Reinforce brand recognition across all pages
  • Provide a clickable link back to the homepage
  • Maintain consistent branding in both regular and fixed (sticky) headers

Typical use cases:

  • Company or brand websites
  • Membership sites and dashboards
  • Landing pages with simplified navigation
  • Campaign headers with custom branding

Logo Type Options

The Logo widget supports two mutually exclusive logo types. You must choose one.

Image Logo

Use an uploaded image file as your logo.

Best for:

  • Established brands with a visual logo
  • Custom typography or symbol-based logos
  • High brand recognition

How it works:

  • Upload an image file (SVG, PNG, or JPG recommended)
  • The image is rendered inside the header
  • The logo automatically scales to fit the defined maximum height

💡 Best practices

  • Use SVG for the sharpest results on all screen sizes
  • Use transparent backgrounds when possible
  • Keep extra whitespace around the logo minimal

Text Logo

Use editable text instead of an image.

Best for:

  • Minimal or text-first designs
  • Early-stage projects without a finalized logo
  • Personal brands or name-based sites

How it works:

  • Enter and edit the logo text directly in the editor
  • Text styling follows font and color settings
  • The text behaves like a logo element, not a regular text widget

💡 Tip

A text logo can be styled to match your brand typography and later replaced with an image logo without changing layout structure.

Logo Size Control

Maximum Logo Height

This setting controls the maximum height of the logo in pixels.

How it behaves:

  • The logo scales proportionally
  • Width adjusts automatically to maintain aspect ratio
  • Prevents the header from becoming too tall

Recommendations:

  • Compact headers: 30–50px
  • Standard headers: 50–70px
  • Large or visual headers: 70–90px

💡 Tip

When using a fixed (sticky) header, consider using a smaller logo height there than in the top header for a cleaner scroll experience.

Behavior Across Header Types

The Logo widget:

  • Appears globally wherever the header is enabled
  • Is shared across all pages using that header
  • Can be styled differently in:
    • The main header
    • The fixed (sticky) header
    • Alternative headers

This allows you to:

  • Use a large logo in the top header
  • Use a smaller or simplified logo in the sticky header
  • Change logo appearance for landing pages via alternative headers

Placement and Alignment

You can place the Logo widget in:

  • Left column (most common)
  • Center column (balanced or minimal layouts)
  • Right column (less common, but possible)

You can also:

  • Adjust spacing by dragging the widget
  • Combine with Menu, Button, or Search widgets
  • Align visually with other header elements

Common Design Patterns

Classic navigation

  • Logo (left)
  • Menu (center or right)

Minimal header

  • Logo (center)
  • Menu hidden or compact

Conversion-focused header

  • Logo (left)
  • Primary CTA button (right)

Transparent hero header

  • Large logo on top header
  • Smaller logo in fixed header on scroll

Limitations to Be Aware Of

  • Only one Logo widget is allowed per header
  • You cannot display both Image Logo and Text Logo at the same time
  • Logos are header-specific and cannot be added as regular page widgets

Summary

The Logo header widget allows you to:

  • Display a single, global brand identifier
  • Choose between image-based or text-based logos
  • Control logo size and visual hierarchy
  • Maintain consistent branding across all pages
  • Adapt logo appearance for fixed and alternative headers

Used correctly, the Logo widget anchors your entire site experience and reinforces brand recognition at every interaction point.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.