The Restaurant Menu widget for Elementor is the perfect tool to showcase your food items in a visually appealing and organized way. Whether you run a restaurant, café, or catering business, this widget allows you to create stunning menus that enhance your customers’ browsing experience. With customizable layouts, images, pricing, and descriptions, you can design a menu that perfectly represents your brand and entices visitors to order or visit your establishment.
Let’s look at each of the options in the Restaurant Menu widget for Elementor below.
Add a Restaurant Menu Widget to Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Restaurant Menu”
- Hover over the widget in the search results and click install
- Add the “Restaurant Menu” widget to any Elementor Page
General - Item Source Settings
The Restaurant Menu widget supports multi-source functionality, allowing you to populate dynamic, data-driven content from a variety of sources. These include items, posts, meta fields, JSON or CSV files, galleries, terms, users, menus, and even API integrations for ultimate flexibility.
Items
You can use the item repeater field as item source.
Posts
Display WordPress posts dynamically in restaurant menu, including custom post types and fields for maximum flexibility.
WooCommerce Products
Use this to showcase WooCommerce product images, names, prices, and descriptions in the restaurant menu.
Meta Field
Use Meta as an item source for your restaurant menu to dynamically display and manage content from your Meta data.
JSON or CSV
Load your restaurant menu with data from JSON or CSV files to easily manage and display structured content.
Gallery
You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.
Terms
Use Terms as a source for your restaurant menu to dynamically display and manage taxonomy terms from your WordPress site.
Users
You can use WordPress Users as an item source for your restaurant menu to display and manage dynamic content from your site’s user data.
Menu
Use your WordPress Menu as a source for the restaurant menu to dynamically display and manage menu items in a visually engaging layout.
RSS
Fetch and display items from an RSS feed. This is perfect for showcasing updates or content from external blogs.
API Integrations
Integrate an API into your restaurant menu to dynamically fetch and display data from external systems or services.
General Settings
Debug - Show Input Data
Enables a debugging mode that displays the raw input data being used to populate the listing. This is useful for developers when troubleshooting data issues.
Transition Duration
Control the duration of visual transitions or animations between items.
Item Image Size
It allows you to select the size of the item images. The size can be adjusted to predefined settings-
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
Show Empty Message
Toggles the display of a message when the listing has no items to show.
Empty Message
It allows you to customize the text shown when no items are available in the listing.
Debug Empty Message
Enable debugging information for the empty message.
RTL
Enable a right-to-left text layout for the listing, making it suitable for languages like Arabic, Hebrew, or Persian.
Layout Settings
Layout
Defines the overall structure for displaying items in restaurant menu.
- Grid: Displays items in a structured grid format, ideal for organized layouts.
- Carousel (Pro): Display items in a horizontal sliding format, allowing users to scroll through items interactively.
Number of Columns
Set the number of columns for the layout.
Show Description
Graphic Element - Specify the type of graphical content to display.
- None
- Image
- Icon
Graphic Element Layout
Control the alignment and positioning of the graphic element relative to the text content:
- Inline: Align the graphic element horizontally with the text.
- Block: Stack the graphic element vertically above or below the text, creating a clear separation.
Name HTML Tag
Specify the HTML tag to wrap the item name.
- div
- H1
- H2
- H3
- H4
- H5
- H6
- span
- p
- a
Show Price
Enable this to display the price alongside the item details.
Show Image
Show or hide the image.
Show Description
Toggle the visibility of the item's description.
Description Length
Specify the maximum number of characters to display for the description.
Show "Show More" Button
Add a button to allow users to view the full description.
Show Categories
Toggle the visibility of the categories associated with each item.
Link on Image
Enable the image to act as a clickable link. When enabled, clicking the image navigates to the item's designated link.
Show Badge
Display a badge or label on items, which can be used for promotional tags like "New" or "Sale."
Show Additional Icons
Toggle the visibility of extra icons associated with the item.
Price Settings
Buttons Settings
Show Buttons
Enable or disable the display of buttons.
Button Position
Define the positioning of the button relative to the content.
- Inline: Align the button horizontally with other elements.
- Block: Stack the button vertically, occupying the full width of its container
Buttons Justify
Set the justification of buttons within their container from below options.
- Start
- Center
- End
Button Text
Define the text to display on the button.
Button Icon
Add an icon to the button. This option allows selecting an icon to visually complement the button's purpose.
Show Button 2
Toggle to enable or disable a second button.
Animations Settings
Hover Animation
Select the animation effect to apply when hovering over the element.
- Not Chosen
- Grow
- Shrink
- Pulse
- Pulse Grow
- Pulse Shrink
- Push
- Pop
- Bounce In
- Bounce Out
- Rotate
- Grow Rotate
- Float
- Sink
- Bob
- Hang
- Skew
- Skew Forward
- Skew Backward
- Wobble Vertical
Entrance Animation
Select the animation effect for how the element appears when it enters the viewport.
- None
- Appear
- Scale Down
- Scale Up
- From Left
- From Right
- From Top
- From Bottom
Items Setting
Manage the items of the Restaurant Menu using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Item Name
Define the name of the item to display in the listing.
Price
Specify the price of the item.
Description
Provide a short description of the item to give users more details.
Graphic Section
Image - Add an image to visually represent the item. This field allows uploading or selecting an image from the media library.
Icon - Add an icon to complement the item visually. This can be used as an alternative or alongside the image.
Links
Details Link - Define the URL for detailed information about the item.
Buy Link - Define the URL for purchasing the item.
Badge
Badge - Define the badge text for the item. Example: "Trending".
Badge Link - Define the URL to link the badge to a specific page or section.
Badge BG Color - Set the background color for the badge.
Category
Category 1 - Define the first category for the item. Example: "Mains".
Category 2 - Define the second category for the item.
Category 3 - Define the third category for the item.
Category 4 - Define the fourth category for the item.
Icons
Icon 1 - Add the first icon for the item. Use an image or icon to visually represent a feature.
Icon 1 Tooltip - Define the tooltip text for the first icon.
Icon 2 - Add the second icon for the item. Use an image or icon to represent another feature.
Icon 2 Tooltip - Define the tooltip text for the second icon.
Icon 3 - Add the third icon for the item.
Icon 3 Tooltip - Define the tooltip text for the third icon.
Icon 4 - Add the fourth icon for the item.
Icon 4 Tooltip - Define the tooltip text for the fourth icon.
Restaurant Menu Widget Styling
You can customize every aspect of the widget’s design, including colors, text, icons, fonts, and layout, to perfectly match your website’s style.
Item Styling
Set the item gap, padding, alignment, color, border radius, border, and box shadow.
Graphic Element Styling
You can set the graphic element width, height, gap, padding, border radius, border, and box shadow.
Name Styling
Set the typography, padding, text color, and text shadow of name element.
Additional Icon Styling
You can set the additional icon wrapper width, height, icon size, background color, border and icon gap.
Price Styling
Style the price positioning, alignment, typography, text color, and shadow.
Description Styling
Here, you can set the typography, gap, text color and text shadow of description element.
Category Styling
Set the category gap, spacing, positioning, typography, padding, color, border radius, and border.
Buttons Styling
You can set button gap, spacing, width, margin, typography, border, text shadow, icon size and icon gap.
Empty Message Styling
Set the empty message typography, color, background, radius, padding, margin, and border.
Restaurant Menu Design Examples For Elementor
Here are some live use cases for the Restaurant Menu Widget.
Restaurant menu with grid layout.
Restaurant menu with custom badges.
We hope this guide has helped you explore the powerful features of the Restaurant Menu Widget for Elementor. With its flexible customization options, you can create an eye-catching menu that enhances your website’s appeal and improves customer engagement. If you have any questions or need further assistance, feel free to reach out. Happy designing!
