Changing your website's colors, fonts and layout

In this article, you'll learn how to change your website's colors, fonts and overall shape from your dashboard. These settings apply to the whole site at once, so it's the quickest way to make your site match your trucks, your logo or your uniforms.

To open the design settings:

  1. In the menu, click Website, then Content.
  2. Click the Design tab.

The Look & feel card at the top holds every setting in this article. Every page on your site follows these choices.

The Look & feel card on the Design tab
The Look & feel card on the Design tab

Pick your colors

There are two colors, and each one has a job:

  • Main color (headings, dark bands) is used for headings and the dark stripes that run across your pages.
  • Accent color (buttons, highlights) is used for buttons and the bits you want to stand out.

To change one:

  1. Click the color square next to it and pick a color, or type a code like #1f3a5f into the box beside it.
  2. If you type a code, use a # followed by six characters. If it's not in that format, you'll see Use #rrggbb in red until it is.
Tip: If you have a brand color from your logo or signage, ask whoever made it for the six-character code. Typing it in gets an exact match.

Choose your fonts and headings

  1. Open Fonts and pick a pairing. Each one sets the font for headings and the font for body text, and the name tells you the feel, like "Inter (clean, modern)" or "Merriweather + Lato (trustworthy)".
  2. Open Headings and choose ALL CAPS headings, Normal case, or Whatever suits the font to let the font decide.

Set the header and footer layout

  • Header layout: Logo left, menu right, or Logo centered, menu below.
  • Footer layout: Four columns, or One line for a simpler footer.

Shape the corners and buttons

  • Corners sets how rounded boxes and cards are: Soft corners, Square corners or Round corners.
  • Button corners does the same for buttons: Slightly rounded buttons, Rounder buttons or Pill buttons.
  • Button text chooses White text on buttons or Dark text on buttons.
Note: If your accent color is light, like lime or yellow, pick Dark text on buttons. White text on a light button is hard to read.

Section backgrounds and trim

  • Section backgrounds: Same background throughout, or Alternate white and page color so each section of a page stands apart from the next.
  • Decorative trim adds an accent strip along banners and cards: None, Thin accent line or Roll-up door ribbing.

Save your changes

  1. Once you've changed anything, a Save changes button appears at the bottom of the card.
  2. Click Save changes. You'll see Saved when it's done.

Your new look applies to every page. The top of the Website page notes that edits go live on your site within a couple of minutes, so give it a moment before you refresh your site to check.

Opening the Design tab and changing the look
Note: If you don't see any of this, your website may not be set up yet. In that case the Website page says so, and these settings appear once your site is live.

Related articles