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.
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 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 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.
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.
When you are done, click on the Publish button on 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 a quick navigation for multiple products. This combination will suffice perfectly.