💸  [Extended] BFCM Sale! Get up to 50% OFF!

Designing a Food & Drinks Menu with Elementor

Table of Contents

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.

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.

food menu using elementor

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.

price menu widget for elementor

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.

save menu food menu template

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.

elementor food menu

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.

filterable food menu with elementor

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

elementor food price menu

This is what the restaurant menu would look like :

restaurant price menu elementor

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

Liked this Article? Join 5000+ Subscribers

Get latest Elementor updates, tutorials, and freebies in your inbox.
No Spam Guaranteed.
Editorial Team

Editorial Team

2 thoughts on “Designing a Food & Drinks Menu with Elementor”

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

    how should we do this ?????
    explain more pls


Leave a Comment

Get 70+ Elementor Widgets with PowerPack Addons for Elementor

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.