Header button
Appearance → Customize → Header → Button.
One optional call-to-action, at the right end of the bar on desktop and at the foot of the mobile menu on a phone, full width, where a thumb can reach it.
The four fields
| Field | |
|---|---|
| Button text | The label. Two or three words |
| Button link | Where it goes. A full URL |
| Open the link in a new tab | Off by default |
| Button style | Primary, Black, White or Outline |
The button only appears once both the text and the link are filled in. A label with nowhere to go is not worth a slot in the bar, and a link with no label would render an empty box. Empty either field to remove the button.
The four styles
| Style | |
|---|---|
| Primary (default) | Filled with your accent colour |
| Black | Filled black, white label |
| White | Filled white, dark label |
| Outline | No fill; border and label take the header text colour |
Outline is the one to reach for if you are unsure. It follows the header text colour, so it works on the light skin and the dark skin without being touched, and it survives a later change of header colours.
Primary ties the button to your accent, which means it moves with the rest of the site if you repaint. Use Black or White when you want the button to sit against the bar rather than with it — a white button on a dark header is the loudest of the four.
Writing the label
The bar has room for a short phrase and no more. What works:
- Subscribe · Newsletter · Hire me · Buy the book · Say hello
What does not: anything with a comma in it, or anything that repeats a menu item you already have. The button’s whole job is to be the one thing you want clicked, and a second nav link in a box is not that.
New tab
Leave Open the link in a new tab off for anywhere on your own site. Tick it
for an external destination — a shop, a Substack, a booking page — where losing
the reader’s place in your post is a real cost. The theme adds the
rel="noopener noreferrer" that a new tab needs.
On mobile
The bar hides below the tablet breakpoint, so the button moves into the off-canvas panel, below the menu and the social links, as a full-width block. It keeps the style you picked.
Related
- Accent colour — what Primary uses
- Header layout — where the action group sits