How to Use the Header Text Widget

Header Text Widget

The Header Text widget works exactly like the standard Text widget, but it is placed specifically inside the header. This makes it ideal for short, high-impact text such as announcements, utility links, micro-navigation, or supporting information that should remain visible across your site.

Used thoughtfully, the Header Text widget adds clarity, flexibility, and context to your header—without overloading it with buttons or menus.

What the Header Text Widget Is Used For

Use the Header Text widget when you want to:

  • Display short informational messages
  • Add utility links (login, contact, support)
  • Create announcement or promo bars
  • Show opening hours, phone numbers, or locations
  • Add subtle CTAs without using buttons
  • Create a banner-style top row in the header

Common Use Cases

  • “Free shipping on orders over $50”
  • “Book a demo” or “Contact sales” (as a text link)
  • Login or registration links
  • Support or help links
  • Limited-time campaign messages
  • Legal or compliance notices
  • Language or region indicators

💡 Tip

Header text works best when it is concise. Think utility and clarity—not long-form content.

Very Important: Use Global Text Styles

Just like the standard Text widget, header text should rely on global text styles.

Before styling individual header text blocks, ensure your global text styles are configured:

Web Studio → Website Settings → Global Styling → Text Styles

Why This Matters

If you manually change font size, color, or typography inside a Header Text widget:

  • You override global styles
  • Future global updates won’t apply
  • Header consistency breaks
  • Mobile responsiveness can suffer
  • Long-term maintenance becomes harder

💡 Best practice

  • Use global text styles for header text
  • Keep local overrides to an absolute minimum
  • Treat global styles as your design system

Text Types

The Header Text widget supports the same text types as the standard Text widget:

  • Normal – recommended for header usage
  • Quote – rarely used in headers
  • Code – not recommended in headers
  • Header 1–6 – available but not recommended

⚠️ Important

Do not use headers (H1–H6) inside header text widgets. Headers in the header area can break hierarchy, accessibility, and SEO. Use normal text instead.

Font Family

Allows you to select which font is used.

Best Practice

  • Do not change fonts per text block
  • Define header and body fonts globally
  • Only override locally in rare, intentional cases

Font Size (Critical Note)

Font size can technically be adjusted locally, but this is strongly discouraged.

Why Local Font Size Is Risky

  • Overrides global styles
  • Applies the same size on desktop and mobile
  • Breaks responsive scaling
  • Causes inconsistency across pages

💡 Best practice

  • Control font size via global text styles
  • Let responsiveness be handled globally
  • Use Remove Font Style if overrides were added accidentally

Text Formatting

You can apply inline formatting:

  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Uppercase / lowercase / small caps

When to Use Formatting in Headers

  • Emphasize a keyword (e.g. Free, New, Limited)
  • Highlight a CTA phrase
  • Add subtle visual hierarchy

💡 Tip

Avoid heavy formatting. Headers should feel clean and scannable.

Text Color

The color picker allows you to:

  • Use Global Colors
  • Choose custom colors
  • Adjust opacity
  • Enter HEX or RGB values

💡 Best Practices

  • Prefer global colors
  • Maintain strong contrast for readability
  • Avoid overly bright or low-contrast colors in headers

Background Color

Adds a background color behind the text.

Common Header Use Cases

  • Announcement bars
  • Promo messages
  • Alerts or notices
  • Campaign messaging

💡 Tips

  • Use sparingly
  • Ensure sufficient contrast
  • Avoid long paragraphs with background colors

Text Alignment

Available options

  • Left
  • Center
  • Right

Common Patterns in Headers

  • Left-aligned → utility or informational text
  • Center-aligned → announcements or banners
  • Right-aligned → secondary actions or links

Lists (Limited Header Use)

Both unordered and ordered lists are supported, but they are rarely recommended in headers.

Use lists only for:

  • Very compact utility navigation
  • Special cases in vertical headers

For most headers, single-line text is preferable.

Header Text widgets are often used to create text-based links.

You can turn any selected text into a link using the link selector.

Supported Link Types

  • Page – internal pages
  • Store – products or categories
  • Funnel – steps or sections
  • Anchor point – specific sections
  • External link
  • File – PDFs or downloads
  • Popup
  • Video popup
  • Email – mailto links
  • Phone – click-to-call links
  • “Login” → Member login page
  • “Contact” → Contact page or popup
  • “Support” → External help center
  • “Book a call” → Funnel or calendar page
  • Phone number → Click-to-call on mobile

💡 Tip

If you need full design freedom or multiple login flows, use a Button or Icon widget instead of header text.

Creating Banner-Style Header Rows

The Header Text widget is perfect for creating top banners:

Examples:

  • Free shipping messages
  • Campaign announcements
  • Time-sensitive alerts

Combine with:

  • Background color
  • Center alignment
  • Short, bold copy

💡 Best practice

Use a dedicated top row for banners so the main navigation stays clean.

Remove Font Style

This resets the text back to the global style.

Use this when:

  • Text looks inconsistent
  • Global changes don’t apply
  • Font size or color was changed accidentally

Often the fastest fix for header layout issues.

AI Writing Assistant (Overview)

The Header Text widget includes access to the AI assistant.

You can:

  • Improve wording
  • Shorten text for clarity
  • Generate announcement copy
  • Refine CTAs

💡 Tip

Use AI to polish copy – but keep headers short and purposeful.

Common Mistakes to Avoid

  • Using headings inside header text
  • Manually resizing text instead of using global styles
  • Overloading headers with long sentences
  • Using background colors everywhere
  • Ignoring mobile readability
  • Mixing fonts or styles inconsistently

Summary

The Header Text widget allows you to:

  • Add short, flexible text inside headers
  • Create utility links and announcements
  • Build banner-style header rows
  • Link to pages, popups, login flows, and more
  • Maintain consistency using global text styles

Used correctly, the Header Text widget adds clarity, context, and utility to your header—supporting navigation and communication without adding visual clutter.

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