How to create a restaurant food menu in Elementor

List your menu categories first, such as Starters, Main courses, Desserts and Drinks. For each item, prepare a consistent name, short description, price, dietary note and image if you use one.

Keep descriptions short enough to scan on a phone. Decide whether the menu is a simple information page or whether visitors need filters, item customisation and online ordering. Elementor can handle the first case manually, but the second usually needs a dedicated menu or shop system.

In WordPress, create a new page, give it a title such as Menu, and choose Edit with Elementor. Click the plus sign on the canvas and select a Flexbox container, then add child containers for the sections you need. Elementor supports adding containers and widgets by dragging them to the canvas or clicking them in the panel.

Add a main heading, a short introduction and optional buttons linking to booking, takeaway or ordering pages. Set the page background and content width before building individual dishes so the layout stays consistent.

Create one item as a reusable pattern. Add a Heading widget for the dish name, a Text Editor widget for its description, and a separate text element for the price. Add an Image widget only when the photograph helps customers choose; Elementor lets you select an image from the Media Library, set its resolution and add alt text.

Place the name and description in one child container and the price in another. On a wide screen, use a horizontal layout so the price sits at the right. Keep the price as text rather than embedding it in an image, otherwise it becomes difficult to update and inaccessible to screen readers.

Add a Heading widget for each category, followed by the item containers underneath it. Duplicate the completed item container, then replace the name, description, price and image. Reusing the same structure prevents uneven spacing and makes later updates quicker.

For a small menu, category headings on one long page are usually the most reliable option. If your Elementor installation provides tabs with nested containers, you can place each category inside a tab, but test the mobile view carefully because long item lists inside tabs can be harder to scan.

Use the Style tab to set typography, colours, spacing, borders and image sizes. Then switch to tablet and mobile view and reduce heading sizes, padding and image widths where needed. Elementor applies many responsive values from larger screens to smaller ones unless you override them for a specific device.

The common Friday-night failure is a menu that looks fine on desktop but makes visitors scroll sideways on a phone. Check that prices do not wrap awkwardly, descriptions do not overflow their containers, buttons are easy to tap and images are not forcing the item layout wider than the screen. If changes do not appear on the live page, use Elementor's tools to clear or regenerate its files and data.

The manual Elementor route is fine for a short, mostly static menu. Use WooFoo when you want a purpose-built Elementor menu with categories, media, reusable menu items and WooCommerce ordering. It is the faster route for a restaurant that expects regular price changes or needs customers to browse a larger menu.

After installing and activating the plugin, create the menu in the WordPress dashboard or Elementor interface provided by the plugin, add your categories and items, then place the menu on the page. Confirm that any WooCommerce products, prices, tax settings and order notifications are configured before sending customers to checkout.