Food/Drink Menu

Adding a menu#

1In the editor, open Add Elements and choose Menu from the Basic group.
2It arrives with four example items, so replace them with your own.
3Hover the element and click the pencil icon to open the panel.

This is your food and drink menu, not your website's navigation menu. For your site's navigation, see the Navigation Manager.

Choosing a layout#

On the Items tab, pick one of four layouts:

Layout	Looks like
Classic	Two columns of items, price above the name. The traditional look.
Dotted	One column, with a dotted line leading from each name to its price.
Card	A grid of cards, each with a photo across the top.
Showcase	A grid of cards with a circular photo, centred text and a coloured background.

Card and Showcase display a photo for each item; Classic and Dotted don't. Your photos are kept either way, so you can switch layouts freely.

Adding your items#

In Menu items, click any item to open it:

Title: the dish or drink name
Price: free text, so type it exactly as you want it shown, including the currency symbol
Description: a short line about the item
Image: Card and Showcase layouts only

Use Add menu item to add more, drag the handle to reorder, and the bin icon to remove. You'll always keep at least one item.

Grouping into courses

A menu is a single list of items. To build Starters / Mains / Desserts, add a Heading element above each of several Menu elements.

Styling#

The Styles tab lets you set the Font size, Font weight, Text transform and colour for the Item title and for the Price & description, separately for Desktop and Mobile.

Showcase layouts add a Showcase card section with a Background colour, Corner radius, and Image sticks out of card, which floats the circular photo above the card. Card layouts let you set Image height and Image corner radius.

Help Google show your menu#

Under SEO, Menu schema markup (Business plan) quietly tells search engines this is a restaurant menu, so Google can display your dishes and prices directly in search results. Learn more in Schema.org markup.

If you have more than one Menu element on the same page, switch this off on the second and any after it.

Tips#

Type the currency symbol yourself. Prices are free text, so $18.50 and 18.50 both work, just be consistent.
Photos are cropped. Card crops to a wide rectangle and Showcase to a circle, both from the centre, so keep the dish in the middle of the shot.
Column counts are automatic and adjust for phones and tablets. There's no column setting.
Keep descriptions to a line or two. Long ones unbalance the grid layouts.
Dietary or allergen icons aren't available, so add '(V)' or '(GF)' to the title or description.