How to Use the Header Button Widget

Buttons placed in the header are some of the most powerful elements on a website. They act as high-visibility calls to action (CTAs) that remain accessible across the site, guiding visitors toward key actions such as signing up, booking a call, logging in, or purchasing.

A well-designed header button improves usability, supports conversion goals, and helps users quickly understand what action you want them to take—no matter where they are on the site.

Adding a Button to the Header

To add a button to your header:

1. Open the Header editor.
2. Open the Widget Panel.
3. Under Header Widgets, locate the Button widget.
4. Drag and drop the Button into one of the header columns (Left, Center, or Right).

Header buttons are typically placed:

• On the right for primary CTAs (e.g. “Get Started”, “Book a Call”)
• In the center for balanced or promotional layouts
• On the left for utility actions or secondary CTAs

💡 Tip

Header space is limited. Use buttons intentionally and avoid adding too many competing CTAs.

Button Settings

Inside Button Settings, you can configure the button’s behavior and content:

Button Text

Change the label to a clear, action-driven CTA.

Common header examples:

• Get Started
• Book a Call
• Sign Up
• Login
• Start Free Trial
• Contact Sales

Second Line of Text

Add a smaller subline below the main text if needed.

Useful for:

• “Free Trial” → No credit card required
• “Book a Demo” → Takes 15 minutes

Icon

Add an icon before or after the text to improve scannability or reinforce meaning (e.g. arrow, calendar, user).

Link

Choose where the button sends users:

• Pages
• External URLs
• Sections (anchors)
• Popups
• Funnels
• Booking flows

Styling the Header Button

Under the Styling tab, you can fully customize the appearance of the header button.

Colors

• Button background color
• Border color
• Optional gradient

Use high contrast so the button stands out clearly against the header background.

Text Style

Apply your global text styles to keep typography consistent with the rest of the site.

Shadow

Add subtle depth to make the button feel clickable—especially useful in transparent or minimal headers.

Padding

Adjust internal spacing to control button size.

• Smaller padding → compact, minimal headers
• Larger padding → bold, conversion-focused headers

Border Radius

• 0px → sharp, rectangular
• Higher values → rounded or pill-shaped buttons

Border Size

Useful for outlined or secondary header buttons.

Expand to Full Width

Rarely used in headers, but can be helpful in vertical headers or mobile layouts.

Hover Effects

Choose how the button reacts on hover:

• Color shift
• Fade
• Grow
• Slide

Common Header Button Styles

By combining the above settings, you can create effective header CTAs:

• Primary CTA Button

  Solid brand color, high contrast, clear action text

• Secondary / Outline Button

  Transparent background with border, used for less critical actions

• Minimal Button

  No background, subtle hover—good for login or utility actions

• Shadow Button

  Adds depth, useful on transparent or image-based headers

Best Practices for Header Buttons

• Keep it focused: One main action is usually enough
• Prioritize clarity: Visitors should instantly understand what happens when they click
• Use contrast: The button should stand out from the header background
• Mind spacing: Avoid overcrowding the header with too many elements
• Think mobile: Ensure buttons are large enough to tap comfortably
• Align with goals: Header buttons should support your most important conversion paths

Summary

The Header Button widget allows you to:

• Add high-impact CTAs directly into your site header
• Link users to key pages, flows, or actions
• Fully control styling, spacing, and hover behavior
• Create consistent, conversion-focused navigation experiences

Used thoughtfully, header buttons become powerful guides that help visitors take action quickly—no matter where they are on your site.