Contents · Clinic manual

Setting up · shared chapter

Your look: design, colours, logo, menus and footer

Choosing a design and colour palette in Site Settings → Design & colours, previewing it, keeping the menu at the top when scrolling, adding your logo, and changing the menu and the footer.

On this page

Every kit comes with several designs and, for each design, several colour palettes. The design sets the fonts, shapes and mood of the whole website; the palette sets the accent colours. You can change both at any time without touching your words or pictures, and you can preview a choice privately before visitors see it.

This chapter also covers your logo, the main menu and the footer. Your kit's own Designs chapter shows what each of its designs looks like.

How to choose a design and colours

  1. Go to Site Settings → Design & colours. (Administrators and editors can open this screen.)
  2. Under Design, click the design you want. Each card shows a small sample and a sentence about the mood.
  3. Under Colour palette, click a palette. The design's own colours keeps the colours the design was made with. The palettes change with the design you picked, because each design has its own.
  4. Click Preview on the site to see your choice (see below).
  5. When you're happy, click Save.
The Design & colours screen with a card for each of the Clinic designs, the current one selected, a row of colour palettes starting with The design's own colours, the Header section with "Keep the menu at the top when scrolling" ticked, and Preview on the site and Save buttons
Another design selected, with its own colour palettes shown underneath and one of them selected

After you save, a green message says "Saved. Visitors will see the new look as pages refresh (cached pages update within the hour)."

The green message at the top of Design & colours: "Saved. Visitors will see the new look as pages refresh (cached pages update within the hour)."

How to preview before you save

Preview on the site opens your home page in a new tab with the design and palette you've picked, just for you. Visitors keep seeing the current look until you click Save. Click around the preview to see other pages, then close the tab and go back to Design & colours to save or try something else.

The home page previewed in a new tab with the design and palette just picked, before saving

If you've changed styles in the Site Editor

If someone changed colours or fonts in Appearance → Editor → Styles, Design & colours shows an extra box: "Also clear style changes made in Appearance → Editor → Styles (they would otherwise sit on top of this choice)." Leave it ticked so your new design shows as it should.

Keep the menu at the top when scrolling

When this is on, the header with your name and menu stays in view as visitors scroll down a page, so the menu and the main button are always one tap away. Notice bars above it (for example a bar with today's opening hours) scroll away as usual.

  1. Go to Site Settings → Design & colours.
  2. Under Header, tick or untick Keep the menu at the top when scrolling.
  3. Click Preview on the site to try it, then Save.
The home page scrolled half way down with the menu kept at the top: the header with the logo, the menu and the main button stays in view above the page content
The same page scrolled half way down with the setting off: the header has scrolled away and only the page content shows

New websites set up with the wizard have it switched on. In Clinic, Church and Music the header always stayed at the top, so the setting starts on there too; untick it to let the header scroll away.

Your logo appears in the website's header and footer, in emails and on the staff sign-in page.

  1. Go to Clinic → Settings and stay on the Business tab.
  2. Find the Logo card and click Choose image (or Change image if there's one already).
  3. Pick your logo from the media library, or click Upload files to add it from your computer.
  4. Click Use this image.
  5. Click Save changes at the bottom of the screen.
The Logo card on the Business tab, with the logo in the preview box, a Change image button and a Remove link

The Business tab is also where you change your Trading name, Registered company name, Tagline and your Social media links. The icons in the footer appear for each link you fill in; leave a box blank to hide that icon.

The whole Business tab: the Names card, the Logo card with the logo chosen, then the Sign-in page, Search and sharing and Social media cards, with Save changes at the bottom

Phones

Every design works on phones. On a phone the menu folds into a button at the top right, and the phone number becomes a button to call you.

The sample Clinic home page on a phone, with the logo at the top left, a menu button at the top right, and the large heading below

Your menu

The setup wizard makes a Main menu with your starter pages. You change it in the Site Editor.

How to change the main menu

  1. Go to Appearance → Editor.

  2. Click Navigation. If your website has more than one menu, the panel lists them.

    The Site Editor's Navigation panel with the home page shown on the right

  3. Click Main menu (if your website has only one menu, it opens straight away). The panel lists the links in the order they appear in your header.

    The Main menu panel listing the menu's links, with a blue + button below to add a link, and the home page shown on the right

  4. To add a link, click the blue + under the list and choose a page, or type a web address.

  5. To move or remove a link, point at it and click its ⋮ (options) button.

  6. Changes are saved as you go: the panel says Saved at the bottom.

The footer is the band at the bottom of every page. Much of it fills itself in from your settings:

In the footerWhere it comes from
Logo and taglineSettings → Business (Logo, Tagline)
Address, phone, email and WhatsAppSettings → Contact
Opening hours (kits that have them)Settings → Opening hours
Social media iconsSettings → Business → Social media
© year and company nameThe current year and your Registered company name (or trading name)
Terms, Privacy policy, CookiesYour legal pages, once published
Cookie settingsOpens the cookie choices for visitors
Staff sign-inYour staff sign-in page
The footer of the sample Clinic website: the tagline and contact details, columns of links, and a bottom line with the © year and name and links to the legal pages and Cookie settings

So to change your address or hours in the footer, change them in your kit's Settings, not in the footer itself. Every page updates by itself.

  1. Go to Appearance → Editor.

  2. Click Patterns.

  3. Near the top of the list, under All template parts and Header, click Footer.

    The Site Editor Patterns panel, with All template parts, Header and Footer at the top, then your kit's pattern categories

  4. Click the footer's picture to open it.

  5. Click the words or links you want to change and type over them. Parts that fill themselves in from your settings, such as your phone number, address or the year, may show in the editor as [phone], [address] or [year]; change those in your kit's Settings, not here. To remove a column, click it and press the Delete key; the other columns close up evenly.

  6. Click Save at the top right.

The Footer template part open in the editor, showing the logo, tagline, columns of links, the Visit us and Contact columns and the bottom line, with a Save button at the top right
  • Your kit's Designs chapter, for what each design looks like.
  • Pages, posts and pictures, for changing the words and photos on pages.