Appearance

Every website has this screen. Only an Admin user can open it. Anyone else sees a line that says Only administrators can change the site’s appearance.

The Appearance page sets the look of your whole website. Six things live here:

• Style: the shape of every page, top and bottom.
• Palette: your colors.
• Color mode: light or dark.
• Font pack: the typefaces.
• Sticky header: whether the top of the page stays on screen.
• Logo tint: whether your logo takes on your colors.

Your words, photos and pages stay as they are. Only the look changes.

Go to Plugins, open the Site Layout group, and click Appearance.

How it works

Nothing goes live while you click around. You pick, you look, then you apply. The Preview, Apply and Discard buttons sit in a bar at the bottom of the screen. The bar stays in view as you scroll.

1. Make your picks in each part of the page.
2. Click Preview. Your website opens in a new tab, with your picks on it. Only you see it.
3. Look at a few pages. Then come back to the Appearance tab.
4. Change what you do not like, and click Preview again.
5. When you are happy, click Apply.

You see Saved. Visitors see the new look on their next page load.

Changed your mind before you apply? Click Discard. Your picks go back to what is live now. Discard only shows once you have changed something, and Apply stays gray until then.

What “host default” means

Style, Palette and Color mode each have a line such as Using the host default: Marketing. The host default is the choice we made when we built your website. It is what shows until you pick something yourself.

Under Style and Palette, the card that matches it has a small Host default label.

Once you pick something else, that line turns into a link, such as Use host default (Marketing). Click it to go back to our choice, then click Apply.

Style

A style is the shape of your website. It sets what the header holds, how the menu sits, and what the footer shows. Each card has a small picture, a name, and a line on who it is for.

There are ten styles.

Style	Who it suits
Marketing	Service businesses that sell with a quote button.
Portfolio	Builders, designers and makers who sell with photos of past work.
Blog	Sites that post articles, news or guides often.
Classic	Family service businesses, such as heating, lawn care and cleaning.
Trades	Roofers, plumbers, electricians and contractors. A loud header and a big call button.
Bistro	Restaurants, cafes, bakeries and breweries. A menu link and an open-now sign up top.
Boutique	Gift shops, clothing stores, florists and bike shops. Search, account and cart close at hand.
Practice	Clinics, dentists, law, accounting and vet offices. Calm, with an appointment button.
Community	Nonprofits, churches, clubs and schools. A donate or get-involved button.
Garage	Auto repair, detailing and tire shops. A dark header with a book-service button.

Your website may not offer all ten. The page only shows the styles yours can use. If you want one that is not there, ask us.

Some cards end with Works well with: and the name of an add-on, such as Booking. That is only advice. Every style works without it.

A new style moves things around at the top and bottom of each page. Your menu, pages and words stay the same.

If you built your own footer

Did you build your own footer on the Footer screen? Then it stays when you change style. The page warns you with a note that starts Your footer is customized, so it will keep its current layout. The note links to the Footer screen, if you would rather use the new style’s footer.

Palette

A palette is a set of colors that go together. There are eighteen. Each card shows four dots twice, once for light and once for dark: the main color, the second color, the page, and the words. Under the dots is the palette’s name.

To see each palette on a real page before you pick, look at Step 3: Choose your colors.

Color mode

There are two choices. Light gives you dark words on a pale page. Dark does the reverse.

Every visitor sees the one you pick. Your website has no switch for them to change it.

Font pack

A font pack is two typefaces that go well together. One is for headings. The other is for everything else. Each card names both, such as Headings: Playfair Display / Body: Inter.

Each style comes with a pack of its own. Its card has a Style’s pick label. Leave the font pack alone and it follows the style. Pick a new style, and that style’s fonts come with it.

Once you pick a pack yourself, it stays, whatever the style. To hand the choice back to the style, click Use the style’s fonts.

Pack	Headings	The rest	How it feels
Modern	Inter	Inter	Clean and plain. Easy to read at any size.
Classic	Playfair Display	Inter	A traditional headline for an established family business.
Condensed	Barlow Condensed	Barlow	Tall, tight and loud, like the lettering on a work truck.
Warm	Fraunces	Nunito Sans	Soft and old-style, like a chalkboard menu.
Elegant	Cormorant Garamond	Lato	Fine and stylish, for shops that sell on taste.
Professional	IBM Plex Serif	IBM Plex Sans	Careful and precise, for offices that sell on trust.
Friendly	Nunito	Nunito	Round and open, for groups that invite people in.
Technical	Space Grotesk	Inter	Squared-off shapes, for shops that fix machines.
Editorial	Source Serif 4	Source Sans 3	A newspaper pair, built for long articles.
Geometric	Outfit	Outfit	Round and even. Current without shouting.

Sticky header

A sticky header stays at the top of the screen as a visitor scrolls down. A header that is not sticky scrolls away with the page.

The switch says Sticky or Scrolls away. Each style has its own setting: Portfolio scrolls away, and the other nine stick. Leave the switch alone and it follows the style.

To hand it back to the style after you change it, click Use the style’s default.

Logo tint

Logo tint paints your logo in one of your palette’s colors, so it matches. Pick one from the list.

Choice	What it does
Off: show the logo exactly as uploaded	Your logo, just as you uploaded it. This is where it starts.
Tint to the text color	Paints the logo the same color as your words.
Tint to the brand color	Paints the logo in your palette’s main color.

It helps most with Dark, where a dark logo would vanish on the dark page.

Preview does not show the tint. Check your website right after you click Apply. If the logo looks wrong, set it back to Off and apply again.

The logo itself is set somewhere else. Settings covers that.

The preview

Preview opens your website in a new tab, wearing your picks. Click around as much as you like. The preview follows you from page to page.

A bar at the top of each page says what you are looking at, such as Previewing Trades · Earth · Light · Condensed fonts. It has two links:

• Open Appearance takes you back to this screen.
• Exit preview puts your website back to the way everyone sees it.

Nobody else sees your preview. Visitors keep seeing the live look until you click Apply. You need to be signed in for the preview to work.

When visitors see the change

Right after you click Apply, on the next page they open. Your website throws away the copies of its pages it keeps ready, so nobody gets an old copy. Someone who already has a page open sees the old look until they reload or click to another page.

Putting it back

There is no undo after Apply. Pick the things you wrote down before you started, and click Apply again.

To go back to the look we set up, click every link that starts with Use: Use host default, Use the style’s fonts and Use the style’s default. Set Logo tint to Off. Then click Apply.