Designing a Food & Drinks Menu with Elementor

Looking for a simple way to design a food menu using the Elementor page builder?

If you have built/managed websites for restaurants and cafes, then I am sure you would have come across the need to set up a Food & Drinks Menu Page. (Restaurant Menu using Elementor)

We always see that menus are often divided into categories such as – Appetizers, Starters, Drinks, Dinner, Desserts, etc. Using this bifurcation on the website creatively can make it easy for users to understand your offerings.

You can design a nice-looking, easy-to-manage, Food & Drinks Menu for your website with Elementor. You can use a Page Builder and style the Menu with design options.

Creating a Food & Drinks Menu with Elementor

Before we go any further, ensure you have these two plugins installed and activated.

• Elementor Builder
• PowerPack for Elementor

To begin, we first need to create individual Menus based on the categories, and then we can link them using the Advanced Tabs widget.

1: Create & Add Food & Drinks Menu Items

To create a single menu, go to your WP admin dashboard and click My Templates > Add New. Give your Menu a suitable name, then click the Edit with Elementor button.

In the Elementor editor, drag and drop the Price Menu widget on the page, add items to the list, and customize them. With the level of customization, you can make your price menu look the way you want.

2: Save the Menu

Once you have made all the changes, save the section by clicking the Save Section button 💾 in the Page Builder and giving it a proper name.

In this tutorial, I have added 4X2 items by adding two Price Menu widgets and altering them to look the same.

Changing the typography and styling options made the first Menu look like this.

Repeat this process for every Menu.

Tip: Since all the menus will have the same design/layout, you can copy the section and change the title, image, and description. The rest of the things will remain the same.

3: Creating Filterable/Categorized/Tabbed Food & Drinks Menu

Once you have made all the menus, it is time to link them with the Advanced Tabs Widget.

Go to your site’s Food & Drinks page, and edit it with Elementor. Now, drag & drop the Tabs Widget. In its content settings, select a tab and edit its name.

Enter the Elementor shortcode with the proper section ID to fetch the section in this tab. Repeat this for other tabs as well.

When you are done, click the Publish button in the bottom left corner to make the page live.

This is what the restaurant menu would look like :

Get PowerPack for Elementor

Get this sleek Pricing Menu widget with several other helpful Elementor Widgets. Get PowerPack Elementor Addon today and start creating excellent websites instantly! Get PowerPack now!

You can use this combination (Price Menu & Tabs) for other tasks, such as listing sub-features under the main feature of a product or in a case where you need to create quick navigation for multiple products. Again, this combination will suffice perfectly.

Next Read:

1. Elementor Errors and How to Fix These [Detailed Guide]
2. [Fix] Elementor Not Loading Error
3. 10+ Most Frequently Asked Elementor Questions