How to Create a Menu Card

This guide explains how to use the “Price List Zebra” block to create a menu card. It assumes that you have already read the “How to Create a Simple Price List” guide. This guide does not explain how the “Price List Zebra” block works, but instead how to use it in combination with standard WordPress blocks.

Sketch the Layout

Before jumping into WordPress, it is advisable to sketch out the desired layout of the menu card, especially considering how it will look on a mobile device. Create groups of items that belong together, such as columns that should stay together on a mobile phone.

Gather Necessary Photos, Decorations, and Text

With the sketch complete, gather all of the necessary photos, decorations, and text. Try to use high-quality photos and decorations. You can take your own photos or use online stock images.

Photos that you take yourself may be of lower quality, depending on your photography skills. However, they will more accurately represent what you are selling. You can improve their quality by editing them in Photoshop, for example.

Stock photos are usually of higher quality, but you run the risk of using the same photos as others, especially with free stock images. You can find such photos on sites like Pixabay.

Convert the Sketch to Your WordPress Website

To create the menu card, follow these steps:

  1. Use a group block as a wrapper. Within a group block, you can set padding, which is the white space around the content. 1rem is a good padding size. You can also set background and text colors.
  2. Use a layout within your group block. We will use another standard WordPress block, columns. With a columns block, you can place multiple columns side by side. On mobile, the columns will be stacked vertically. Make sure to check how your website looks on different screen sizes.
  3. Add a column block within the columns block, and place a header, image, and price list block inside it. Ensure that the aspect ratio of the photos is identical for a better result.
  4. Finally, within the “fries” block, add another group block with different colors for the sauces.

Overall, this method produces a decent menu card that is easy to modify in the future.

The result

Patat

mini
2.40
klein
2.60
medium
3.00
groot
3.20
familiepack
12.00

Sauzen

pindasaus
1.60
mayonnaise
1.00
ketchup
1.00
curry
1.00
speciaal
1.80

Pizza

Margherita
7.50
Salami
8.95
Ham Champignons
9.25
Hawaï
9.25

Salades

sla mix
4.00
tomaat mozzarella
11.00
ham kaas
10.00
brie met noten en honing
11.00
gekruide kipfilet
11.00
tonijn perzik
11.00
americain garni
11.00
gerookte zalm
15.00
salade calamares
13.00
salade scampi
16.00

Dranken

coca cola light zero
2.00
fanta
2.00
sprite
2.00
ice tea green
2.00
schweppes agrum
2.00
water plat bruisend
2.00
capri sun
1.00
jupiler na
2.50
red bull
2.60
wijn rood wit rosé
4.00