How do I choose my website's look and layout?

Where everything lives on the Your website page, how the site is laid out, and choosing one of nine site styles with its colours and fonts.

Part of How do I set up my venue website?. This part covers the shape of your site: where everything lives, how the site is laid out, choosing your look, and how it shows on every device.

Where everything lives

The Your website page sits under Your venue in the sidebar (/dashboard/website). You can build your whole site there before you buy the product (see Build free, pay when you publish in How do I publish my website and get found on Google?). It's the whole editor: your pages, your sections, your look, and the publish switch. On a computer your site's sections sit in a column on the left — tap one to open it — and your whole site sits beside them as a live preview; on a phone or a tablet the preview sits above the sections. The very first time you open it, a short guided set-up walks you through five steps — Choose your look (each look shown as your own home page), Your front door (the big photo at the top — your cover photo from Settings → Branding unless you pick one just for the website — and your opening line, which starts as the one your free venue page already has), Your story (with examples to start from), A few photos (up to six, for the strip on your home page) and Preview and publish — and you can leave it at any point and drop into the ordinary editor (your answers are kept on this device). Publish now is offered once your site has a photo and a few words of your own; until then you finish with Save as a draft and publish from the editor whenever you're ready. Every section starts switched on, and each has its own switch in the editor. If you don't own the product yet, the same page carries your free venue page's choices (see What is my venue page?) alongside an explanation of the product and a link to Plans and products, where you can add it in a minute. While your paid site is still a draft, the free page is what guests see — so its style choices stay on this page until you publish, folded to one line: choose change its style to open them. (Its opening line is the one you write in Home — the card shows it rather than asking twice.)

Your set-up includes a Build and publish your website step — it opens this page and ticks itself once your site is published. If your website (and your own domain) is all you have with ResoFlow, publishing it IS your going live: your set-up ends with that step, with no separate Go live to press, and the reminders never ask for one.

Setting up. Until your website is published, the Your website page shows a Set up your website card at the top — the same step as Your set-up. Its Start button takes you to that step, and the card goes away by itself once the site is published (or the step is marked Not for us). Before you publish, add your photos and about text and preview the site; afterwards, put the address in your bios.

How the site is laid out — a short home page plus real pages

Your website is a short home page plus real pages, each with its own address, all inside the site's own header and footer. Nothing scrolls on forever, and nothing sends a guest off to a page in a different style:

• Home — the hero photo, your booking card (if switched on), your story, a taste of the menu, what's on, a strip of up to six photos (once you have three or more), reviews, the compact cards, a Get our news sign-up card (if switched on and placed on the home page), and a closing "Book a table" invitation.
• Menu · What's on · Book · Order — your existing guest pages, shown inside your site's header and footer so the whole visit feels like one site. That includes the booking flow: a guest who taps Book now stays inside your website's look from start to finish (with a dark look, the booking and payment steps stay dark too — or sit on a light card if you choose Light card under Booking and payment steps, below).
• Gallery — every photo, at its own shape, laid out left to right in your order.
• About — your story and photo, with room for more (optional): the About page shows whenever you've written a story.
• Contact — hours, address, phone, your email if you choose to show it, directions, socials and a map (behind a Show map button, so it loads only when a guest asks for it). While your website is live, your free venue page's Find us page takes guests here too, so your hours and address live on one page.
• Your own pages — FAQs, private dining, a Sunday menu, jobs, services, prices, your team, or a page with any name, each at an address made from its title, built from blocks.
• News (optional) — short posts with a date, newest first, on a page of its own.

The site's header carries your logo and name (your logo alone when Logo treatment is Free height — a wordmark already says your name), as many page links as fit the screen (your logo takes guests home, so there's no Home link), the sign-in icon, an Order button when collection or delivery is on, and Book now. Pages that don't fit sit under More, which on a computer opens a small list under it; on a phone the menu button opens the full page list, Home included. The current page is underlined. A long venue name wraps onto two lines on a phone rather than being cut short. The footer sits on every page — on phones it's two short columns (Visit: address, phone, your email if you show it, a one-line summary of your regular weekly hours · Explore: your pages and Book a table) plus one small line of secondary links (gift cards, waitlist, loyalty, my account, privacy) and your name and a small "Website by ResoFlow"; on larger screens it's three columns. A one-off special date (a bank holiday, say) never changes the footer's weekly summary — it shows on the Contact page's hours, dated. The closing "Book a table" band appears on Home, Menu and What's on only — never on Contact, Gallery or the Book page itself.

Choosing your look — nine site styles, colours and fonts

Choose your look is the first section of the editor, and it opens first. Each look's picture is your own home page in that look — your photos, name, opening line and menu — and Show me narrows the list to light, dark or new looks. The thirteen looks are grouped into nine site styles, and picking one changes the whole site — the layout, the arrangement and the type, not just the colours:

• Editorial classic — centred composition, warm serif type, a floating booking card. Looks: Classic and Elegant.
• Bold photography — huge statement type and full-bleed photography. Looks: Bold and Modern Dark (a dark look).
• Minimal modern — hairline rules, quiet letterspaced labels, a split-panel hero. Looks: Minimal and Coastal.
• Warm bistro — soft corners, friendly buttons, ticket-stub event cards, a postcard-style gallery. Looks: Rustic and Warm Bistro.
• Deco brasserie — midnight rooms, champagne serif type and brass hairlines: evening glamour for brasseries and cocktail rooms (a dark look).
• Fresh & casual — bright, friendly and quick: big rounded cards and fresh green energy for cafés and fast-casual spots.
• Journal (new) — a magazine: numbered sections, a huge serif and photos set off-centre.
• Studio (new) — clean and bright, a square photo grid and the booking box in view — made with salons in mind.
• Chalkboard (new) — the pub's specials board: chalk on green, hand-lettered, the menu framed in wood (a dark look).

Switching looks takes one click and keeps all your content. To see a look across your whole site before you choose it, press Try it on my site on its card: your site opens in a new tab wearing that look, with your own content, and stays as it is until you choose it. Each look has its own heading typeface, served from our own hosting (never from a third-party font service, so nothing about your visitors is shared with anyone); body text uses the device's own font, so pages stay quick. Under Accent colour you choose whether buttons and highlights use Your brand colour (from Settings → Branding) or The look’s own tuned colour; each look's card shows both. Spacing — Cosy, Standard or Airy — scales every gap on the site at once (sections, cards, the footer), so a site that feels spaced out tightens up with one click. Logo treatment decides how your logo sits in the site's header and footer — Round (the default circular chip), Soft square, or Free height for wordmark-shaped logos that shouldn't be cropped.

Booking and payment steps appears beside the looks while a dark look is chosen (Modern Dark, Deco Brasserie or Chalkboard): Dark (default for dark looks) keeps the booking, order and payment steps dark, and Light card sits them on a light card that wears the look's fonts, corners and colour. While a light look is chosen, a line in its place explains the choice instead.

On every device

The site is built phone-first: on smaller screens the header keeps your name (on two lines if it's long), the Book now button and a menu button that opens a full-screen navigation (with every page, Home included, "Order online" when collection or delivery is on, and "My account" inside it). On a touch screen every button and footer link is at least 44 pixels tall, so it's easy to tap. Your logo (from Settings → Branding) appears in the header and footer when set; guests with a remembered sign-in see a filled person icon that opens their account.

Related: How do I set up my venue website? · How do I set up my website's pages? · How do I publish my website and get found on Google? · How do I add my logo, colours and images?