Looks, fonts, colours and motion

A look gives your website its whole character in one step. It sets your colours, fonts, type size, spacing, motion and the layout of your Home page. Your own words and photographs are kept. You can change anything afterwards.

Upgrade your site

Your site stays exactly as it is unless you choose a look. Home and Website show a card, Upgrade your site, until you choose a look or press Not now.

• See the new looks opens the website builder on its looks. A look keeps your words and photographs, and lays your home page out in a new design. You can then change anything you like.
• Nothing your visitors see changes until you publish.
• While you are trying a look, the card says so. Keep editing takes you back to the builder.
• Go back to my site as it was (owners only, once your site is live) puts your draft back to your live site. Every change you have not published is lost, not only the look, and this cannot be undone. Your live site is not touched. Anything no longer available, such as a photograph you have deleted since, is left out of the draft, and you are told. If your site has been published since you opened the page, nothing changes: reload the page and try again.
• Not now hides the card for you for good. The looks stay in the builder whenever you want them.

Start from a look

1. Open the website builder (the Design tab of Website), then the Design tab of its panel.
2. Under Looks, press the look you want.
3. You are shown what will happen before anything changes: which sections keep your words and photographs, which are added, which are kept but hidden, and which are removed because the page is full. To go ahead, press Use and the look's name, and lay out my home page again. To change the look and leave your Home page as it is, press Use its style only, and keep my home page. Keep my design as it is changes nothing.
4. Undo takes it all back in one step.

On the Style screen of the Simple editor, and in the old builder's Style tab, the looks are under Start from a look. Press Use this look on one, then Use and the look's name, or Use its style only.

The five looks:

• Gallery wall. Framed prints hung at different sizes on a quiet wall, with lots of space around them.
• Magazine. Huge serif headlines over your photographs and numbered stories, like a printed issue.
• Cinema. Dark and widescreen, with your photographs edge to edge and very few words.
• Filmstrip. Your Home page moves sideways through a series, like a strip of film on a light table.
• Contact sheet. A dense grid of numbered frames, like a darkroom proof sheet marked up in red pencil.

A look also changes how your Work page and your photograph pages are laid out. It never changes the buy box, the basket or checkout. To keep your design and drop the look's finishing touches, press Back to the base design under Looks. On the Style screen it is Keep my design, drop this look’s finishing touches, on the look's card.

Your own colours

Under Your own colours, tick Use my own colours, then give a Background and a Text colour as six-digit codes such as #f4f1ea, or pick them from the colour picker. Your accent colour is chosen in the accent box as before.

Your words always have to be easy to read, so a colour may be changed for you. If your background is a middle grey that neither black nor white words can read on, we move it a little lighter or darker and tell you the new code. Your text colour is moved the same way if it is too close to the background. Other colours, such as lines and quiet text, are worked out from your two. If your accent colour is hard to see on your colours, it is not accepted, and we suggest the nearest one that is.

The basket, the checkout and your customers' order pages keep the colour scheme you chose from the list, not your own colours.

Fonts

Choose a Heading font and a Body font separately. There are 20 heading fonts and 13 body fonts. Under More recommended pairs, one press sets both. The pairing’s own goes back to the font pairing you chose before. The fonts are served from our own servers, so visitors' details are not sent to anyone else, and they include the macrons in te reo Māori.

Two fonts, Instrument Serif and Bebas Neue, come in one weight only, so choosing bold headings looks the same as normal. You cannot upload your own fonts yet.

Type size

Type size runs from Quiet through Regular, Large and Larger to Huge. Regular is the size every site had before. Larger sizes only change your headings and the opening lines of text. Paragraph text stays the same size. A long word in a heading is broken so it cannot run off a phone's screen. The basket, checkout and order pages are always Regular.

Motion

Motion is Off, Subtle or Expressive. A site starts on Off, and a look sets the level that suits it.

• Off. Nothing moves.
• Subtle. Sections fade in as a visitor scrolls to them.
• Expressive. The same, and sections also rise a little as they appear. Your opening photograph on a Magazine cover or Widescreen hero and on a full-screen sequence zooms in slowly, once, over five seconds, and then stays still.

Visitors who have asked their device for less motion never see any, whatever you choose. Nothing is hidden waiting for motion to run: if a visitor's browser cannot do it, the page simply shows everything.

Photo-first sections

Press Add a section here on a page and choose one of these.

• Full-screen sequence. Up to 8 photographs, one after another down the page, each across the whole screen. Choose the Frame (Screen or Widescreen) and the Fit (Fill crops to the frame, Whole shows the whole photograph). Its heading is read out by screen readers but not shown.
• Overlapping photographs. Two to five photographs laid over each other's edges, with a heading, a few words and a button if you like. The Arrangement is Pair, Trio or Scatter.
• Side-scrolling series. Up to 24 photographs in one row that scrolls sideways. Choose My latest work, A collection or Photographs I choose, and the Height. Number of photographs only applies to your latest work. On a computer a visitor moves the row with the Previous and Next buttons, the arrow keys, a drag or a trackpad. The mouse wheel always scrolls the page. On a phone it is an ordinary swipe.
• Photo story. Up to 12 photographs, each with its own title and description under it. The Layout is Alternate, Centred or Numbered, and Words chooses the title and description, the title only, or none. The words are the ones written on each photograph, so you write them once.

Each can link its photographs to their prints when they are for sale. They work without a mouse and on a phone.

Good to know

• A Magazine cover hero has an optional Line above the headline, a short line of your own words shown above the headline.
• Applying a look keeps your own words. A heading or button that is one of our suggested words is replaced by the look's, and a heading you wrote yourself is kept.
• Your photographs are kept as they are. A photograph named by the look's layout is not used twice on a page, but a grid of your latest work can show one that appears elsewhere.
• Everything you change is saved to your draft. Visitors see it once you publish.