Playing this loads the video from YouTube, which is Google. See the Privacy Policy.
Go to Administration → Themes and press Build a theme. The first thing to know is that nothing you do there is live straight away.
You are always editing a draft. Change colours, try a font, swap the background — your diners keep seeing your current look the whole time. It becomes theirs when you press Publish, and not before.
That means you can take an hour over it, leave it half-finished, come back tomorrow, and nobody eating at your place sees any of it.
Draft, look, publish
Save draft keeps your work without changing your site. Preview shows you your real menu — the actual page, with your actual dishes — wearing the draft. Only you can see it; there is a dark bar across the top the whole time so you can't forget you're in it, and it goes away the moment you publish.
If your draft has changes you haven't published, the builder says so at the top and offers you both ways out: publish it, or Discard draft.
Getting rid of a draft you don't want
A draft waits for you, which is the point — and occasionally the nuisance. Spend ten minutes pulling colours about, decide you don't like any of it, and wander off; a week later you open the builder meaning to start fresh and there's that afternoon's mess, still waiting.
So Themes tells you when a draft is in progress before you go in, and gives you the choice: Continue your draft, or Discard it and go back to what your site is wearing now. The same button is in the builder. Neither one touches your live menu — a draft was never live, so throwing it away changes nothing your diners can see.
To start from a different theme instead, press Edit on it. That loads it over your draft, which saves you discarding first. It's also why nothing warns you: replacing the draft is precisely what you asked for.
Everything that goes live gets a name
To publish, you give the look a name — Name this look, just under the colour pickers. Save as theme & publish keeps it and makes it live in one press. Save as theme keeps it without publishing, for something you're building ahead of when you want it.
Why you can't publish something nameless. Your live colours are not somewhere you can get back to. Publish twice and the first version is gone — there's no undo, because there's nothing left to undo to. Naming it means it's in your Themes list, so whatever you try next, last week's look is one press away.
Type a name you already use and that theme is updated, so you don't collect Summer, Summer 2 and Summer 3.
You can also do it from the preview: while you're looking at your real menu, the bar at the top has a name box and a Save & publish button, because standing in front of the actual page is usually when you decide.
The two little card previews
The page background is its own preview, since it is the page background, and the colour pickers update it as you drag. Cards get a pair of small previews further down: one showing a card sitting on your background, and one showing that card expanded. They are not the same thing — an expanded card is always fully opaque and sits over a dimmed page, so a card colour that looks right at 70% opacity can land somewhere different once it's opened. Both follow the pickers as you drag.
Themes are the fastest start
Administration → Themes has ready-made looks — Steakhouse, Italian, Beach Bar and so on — plus any you have saved yourself.
Each one offers two things. Edit loads it into your draft, so you can look at it and change it before deciding; nothing happens to your site. Apply puts it live immediately, which is quicker but skips the looking.
This list is the whole story of how your menu has looked. Everything your diners see is one of these, because publishing from the builder saves it here first — so going back to a look you had a month ago is finding it in this list and pressing Apply.
Applying a theme replaces, it doesn't merge. It brings its own colours, fonts, banner style and images with it. Save your current look as a theme first if you might want it back.
Body text color vs card text color
These are two different settings and it's the most common thing to mix up:
- Body text color — section titles, navigation links, and general page text.
- Card text color — the text inside menu item cards.
If your dish names look right but your section headings don't, it's the body text color you want.
Background gradients
Tick Use a gradient and a second color picker appears. Your background then fades from the first color to the second, at whatever angle you set on the slider.
"Solid" is really a gradient too — just between a color and itself. That's why nothing dramatic happens when you first tick the box: until you change the second color, both ends match.
Check the bottom of your page, not just the top. The gradient stays fixed to the screen as visitors scroll, so text further down sits against the far end of it. If your body text color is close to that end, that text becomes unreadable even though the top of the page looks fine. Scroll all the way down before deciding you're happy.
Card gradients
Cards can have their own gradient, with their own angle. Setting the card angle against the page angle — say 135° on the background and 315° on the cards — makes the cards look like panels catching light from a different direction. It's subtle and worth playing with.
Card opacity
This makes your menu cards see-through, letting the background show behind them.
This is the setting most likely to make your menu hard to read. A low opacity over a busy background photo puts your dish descriptions on top of whatever's in that picture. If your menu suddenly looks noisy, turn card opacity back up before changing anything else.
Background image opacity
Only relevant if you've uploaded a background image. It controls how strongly that image shows.
It fades the image toward your background color, not toward white. At 100% you see the photo and none of your gradient; at 0% the photo is invisible and you're looking at your gradient alone. If the slider seems to do nothing, check you've actually uploaded a background image — with no image there's nothing to fade.
Fonts
One dropdown, offering pairings rather than individual fonts — each combines a heading face with a body face chosen to be readable at small sizes. The pairing applies to your whole menu, including dish descriptions.
System default uses whatever font the visitor's own device prefers. It loads nothing extra, so it's the fastest option, and it's what you start with.
The banner — three ways to top your page
The banner is the band across the top of your menu, above the first section. Top of the page in the theme builder offers three choices.
Uploaded image is the one to pick if you already have a logo, a photo of your sign, or artwork someone made for you. You get a crop tool when you upload, so you choose the framing.
Your name over a color or gradient needs no artwork at all. It sets your restaurant's name large in your chosen heading font, over a color or a two-color gradient you pick. If you don't have a logo — and plenty of good restaurants don't — this looks far more deliberate than an empty space, and it's the quickest way to make your font choice actually show.
Nothing starts visitors straight at your menu. Your name or logo still shows in the navigation bar at the very top either way, so nobody is left wondering whose menu they're reading. Worth considering if your menu is long and you'd rather people saw food immediately.
The soft shadow is on for a reason. A gradient runs between two colors, but your heading only has one. Set white text over a gradient that ends near-white and the last few letters of your name quietly disappear. The shadow costs nothing and fixes it. Turn it off only if you've checked your banner on a phone as well as a laptop.
Switching styles doesn't delete anything. Choosing "Nothing" or the text banner leaves an uploaded image in place — switch back to "Uploaded image" and it returns. Use Remove from draft if you actually want the file gone, and publish to make that stick.
Images, and where the wording lives
Both the banner image and the background image are part of your draft, exactly like the colours. Upload one and your diners carry on seeing the old one until you publish — which matters more here than anywhere else, because swapping a background mid-service is the most jarring thing a menu can do while somebody is reading it.
Both get a crop tool on upload. A background with a lot of detail competes with your menu text; something soft and low-contrast usually works better than a sharp photo of food.
The banner's words are not here. Your heading and tagline live on Administration → Site Content, beside your site name, because they are your restaurant's identity rather than part of a look — applying somebody else's theme should never rename your restaurant. Leave the heading blank to use your site name; it's worth shortening a long one, since "Joe's Diner" reads better at that size than "Joe's Diner & Catering Company of Springfield".