Do you build/manage websites for Restaurants and Cafes? If yes, then I am sure you would have come across the need to set 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 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 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.
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.
2. Save the Menu
Once you have made all the changes, save the section by clicking on the Save Section button 💾 in the Page Builder and giving it a proper name.
Here 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 resulted in the first menu to look like this.
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 the 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 you 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
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 quick navigation for multiple products. This combination will suffice perfectly.