Display a menu with names, prices, descriptions and optional photos, styled to match your site.
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.50and18.50both 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.
Was this helpful?
Last updated:
Related Articles
The Navigation Manager
Start HereManage your site's menus, header, footer and navigation styling in one place, build the header and footer menus, create dropdowns and mega menus, choose a header layout, and hide the menu on individual pages.
10 min read
Structured Data (Schema)
Help Google show rich results for your site: an automatic Organization tag, a LocalBusiness builder, a services list, and per-page JSON-LD. No code needed for the basics.
6 min read
Content Blocks
Add, edit, move, and style text content blocks, the core building block of every page.
4 min readVideo
Still need help?
Submit a Support Ticket