Introduction

If you are running a restaurant business then the Xpro Restaurant Menu widget for Elementor is what your website is needed. The widget relieves your stress about creating a food menu and allows you to quickly design an appealing menu.

The Elementor Restaurant Menu widget is a premium widget by Xpro Elementor Addons which comes with a huge range of customization to make your restaurant food list according to your brand theme. Include images and icons of the dishes, style the title and background, edit the background, and so much more.

How to Install Xpro Restaurant Widget for Elementor

Requirements

You need to install and activate the Pro version of Xpro Elementor Addons. If you already have the plugin installed, just make sure the Restaurant Menu Widget is ‘Enabled’, so you can find it in the Elementor editor.

To enable the widget, simply follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Widgets Tab, find the Restaurant Menu widget, and finally, toggle the button ON to enable it.

How to Use the Xpro Restaurant Menu widget for Elementor

For anyone who owns or runs a restaurant acknowledges the importance of a well-designed food menu. It does not just convey the list and price of food but also represents the theme and image of the brand. Xpro Elementor understands this need and provides all the styling and editing option sp that brands can perform and create an attractive menu layout.

Let’s check out the features of the amazing Elementor Restaurant Menu widget.

Step 1

Click on the Xpro Addons – Pro section available in the Elementor Editor.

Step 2

From the Xpro Addons – Pro section, find and simply drag’n’drop the Restaurant Menu widget on your desired page location.

This is the default view of the widget when you drag and drop it into the page.

Content Section

How to Change the Layout of the Xpro Restaurant Menu Widget

Select the layout of the widget between horizontal and vertical. Choose whichever you believe will look good on your website page.

How to Add Content to the Restaurant Menu Widget

Click on the bar under the layout option to open up the drag-down menu from where you have the option to include images, icons, and text to the widget.

Add an icon, image, or custom add text from the media type to the widget. Click on the options icon to open up the section from where you will add the media.

Give a title to the menu item. Write the name of the dish you are offering and link it to the page where you want the user to go. Write a description underneath explaining the ingredients or characteristics of the food. Do not forget to include the price of it.

You have the option to include a button in the menu section as well. Enable the button option to edit text and add a link to the button. If you want you can add an icon to the text.

Just like that add content to the rest of the menu below. If you want to add more sections then click on Add Item. You can add as many items as you want.

Allow or disable the option to show a separator in the widget. Position the price of the dishes to the right or bottom of the description.

How to Style the Xpro Restaurant Menu for Elementor

Start with the simple styling of setting the position of the content to the left, right, or center of the section. Adjust the space between each section from the Space Between option.

Add a background to the content by adding classic or gradient colors. You also have the option to include an image in the background and further set its position.

By selecting the border type, you can also create a border for each section. You can choose from five different types of borders. The border styles available are solid, dashed, grooved, dotted, and double. Change the color, width, and radius of the border as well.

How To Style the Media in the Xpro Restaurant Menu Widget

Open up the media menu to view the styling options to customize an image, icon, or text. Adjust the space between media and content. If you have included an icon or text then you can color it as well as the background. You can also add a border to the media and perform the same styling option as we did before in the section border.

If you have included an image then you can increase or decrease its width. If you have included an icon then you can adjust its size and background. And if you have included text then you have the option to edit its typography, background size, and padding.

Personalize the title in the widget by adding a background to it and adjusting its padding. Edit the typography of the title by changing its font, size, weight, letter spacing, word spacing, and more.

Color the title for normal display and hover. Adjust the titles’ padding and margin to the rest of the content.

Under titles comes the edit menu for price. Click on the price to open the menu to style the price text. Edit the typography and color the text. Adjust its padding and margin as well.

Under the Price comes a Separator from where you can adjust the width of the line, color it, and adjust padding.

Style the description content by styling its typography and coloring the text.

Last but not the least, edit the button in the widget to your liking. Style the typography of the text and adjust the space between icons. Color the icon as well as the text in the button for normal and hover states. You have the option to include a border to the button and style it as well.

Best Restaurant Menu Widget for Elementor

This is all from the Restaurant Menu widget for Elementor by Xpro. We hope that you fully understand the uses and functionality of this amazing widget. Utilize this powerful widget to create the best-looking website.

Xpro offers a wide range of amazing Elementor Addons which can help you in creating an attractive website. If you want to check out more widgets like Restaurant Menu then we suggest you check out the Post List by Xpro Elementor. Check our 50+ free Elementor Addons which are enough to create a professional WordPress website. If you want to explore and add more attractive Elementor widgets then check our complete list of Pro Elementor widgets and download our Pro Elementor addons right now.