Designing a Food & Drinks Menu with Elementor

Do you build/manage websites for Restaurants and Cafes? If yes, then I am sure that you would have come across the need for setting up a Food & Drinks Menu Page.

We always see that menus are often divided into categories such as – Appetizers, Starters, Drinks, Dinner, Desserts, etc. Using this bifurcation on the website in a creative way 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 get the flexibility of using a Page Builder and styling the menu with design options.

Creating a Food & Drinks Menu with Elementor

Before we go any further, first make sure that 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 WP admin > My Templates > Add New. Give your Menu a suitable name and then click on the Edit with Elementor button.

PowerPack for Eelementor

Now in the Builder, Drag and drop the Price Menu widget on the page and start adding items to the list and customizing them as well. With the level of customization, you can make your price menu look the way you want.

PowerPack for Eelementor

2. Save the Menu

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

PowerPack for Eelementor

Here in this tutorial, I have added 4X2 items by adding two Price Menu widgets side by side and altering them to look the same. Changing the typography and styling options resulted in the first menu to look like this.

PowerPack for Eelementor

Repeat this process for every menu.

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

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

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

Go to the Food & Drinks page of your site, edit it with Elementor. Now, drag & drop the Tabs Widget. In its content settings, select a tab and edit its name. To fetch the section in this tab, enter the Elementor shortcode with the proper section ID. Repeat this for other tabs as well.

PowerPack for Eelementor

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

PowerPack for Eelementor

This is what the restaurant menu would look like-

PowerPack for Eelementor

Get PowerPack for Elementor

Get this sleek Pricing Menu widget with several other useful 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 as well such as listing sub-features under the main feature of a product or in a case where you need to create a quick navigation for multiple products. This combination will suffice perfectly.

Liked this Article? Join 5000+ Subscribers

Get latest Elementor updates, tutorials, and freebies in your inbox. No Spam Guaranteed.
Yashwardhan Rana

Yashwardhan Rana

I am Yash, Content Marketing Head at IdeaBox Creations, we are the makers of PowerPack :) I love good food, gaming and memes. When I am not in front of my laptop, I am either cooking, traveling or attending WordPress meetups.

One Comment

  • I am trying to add the template code but its not working. Can you tell me what is happening. I am now getting thoughtful if the template code is not accurate.


Leave a Reply

Your email address will not be published. Required fields are marked *

Download PowerPack Lite
30+ Free Elementor Widgets.

Your Download Is Just
One Click Away

…or just download the plugin.