Cyber Monday Sale Ends in

0Days

0Hours

0Minutes

0Seconds

Buy Lifetime Membership
×
How to use Divi Restro Menu plugin

Feb 7, 2020 | Divi Resources

How to create restaurant menus with Divi Restro Menu plugin

If you’ve purchased the Divi Restro Menu plugin and now wondering how to create beautiful food menus, then this blog post will help you in many ways. In addition to this, if you want to know more about this plugin, then you might want to check out this blog post.

Follow all the step by step instructions and you’ll be able to create delicious and attractive Divi restaurant menus in minutes.

Note: This post has been updated to improve quality & product information.

Preview


Divi Restaurant Menu A

Divi restaurant menu layout example 1

Divi Restaurant Menu B

Divi restaurant menu layout example 2

Easy Steps to Use Divi Restro Menu plugin


Before we move on the steps to design restaurant menus make sure you’ve successfully installed and activated the plugin. Once sure, we’re ready to dive into our food menu creation process. However, if you’re finding it hard to install this plugin, then you can visit the plugin’s documentation page.

Easy Step 1: Creating Preview Restaurant Menu A

To display items on a restaurant menu, first, we need to create food items and categories with proper information. And to do so, go to Restro Menu custom post type in your WordPress dashboard created by the plugin.

Divi Restro Menu custom post type

After getting into the restaurant menu food item library, click Add New to create food items.

Add new Divi food menu item

Upon clicking the button, you’ll be advanced to a new window, where you can add information about the food item. Such as item name, category, and long description.

Divi Restro Menu item text editor

Below this area, you get one more menu where you can add additional information about the food item. Like Currency Symbol, Price, Ingredients, and Shot Descriptions.

Extra detail fields for Divi restaurant menus of the Restro Menu plugin

Once you’re done creating enough food items to show on the restaurant menu, you’re ready to move on to the next step.

Easy Step 2: Adding Divi Restro Menu’s Module

Edit an existing page or create a new one where you want to design food menus using this new Divi restaurant menu layout plugin.

Insert the Restro Menu module on the page.

Divi restaurant menu plugin's module

Keep the default settings upon inserting the Restro Menu module.

Divi Restro Menu content settings

You’ll be able to see all the food items that you’ve created. Now, let’s design this area a little bit with layout 1.

But first, go to Section Settings, then add a background to section. You can add image, gradient, color, and video if you like. This would increase the presentation of the restaurant menu.

Easy Step 3: Customizing Content

Go to Elements settings in content, and check all the elements as “ON” except “Use Filterable Menu”

Divi restaurant menu elements

Easy Step 4: Customizing Design

Now move on to the Design Tab, and go to Title Text. Where apply customization as follows,

Title Heading Level: H4

Font: Great Vibes

Title Font weight: Bold

Text Color: #C44C52

 
Divi Restro Menu title text settings for layout 1

Title Text Size: 36px

Line Height: 1.6em

Title Text Shadow: Look in the screenshot

Title Text Shadow Color: #E09900

Title text shadow of Divi restaurant menu

Step 4A: Currency Symbol Text Settings

Currency Symbol Text Color: #E09900

Symbol Text Shadow: Look in the screenshot

Currency Symbol Text Shadow Horizontal Length: 0.02em

Divi restaurant menu currency symbol text settings

Price Text Settings-

Price Font: Great Vibes

Font Weight: Bold

Text Color: #C44C52

Text Size: 34px

Line Height: 1.2em

Price Text Shadow: Look in the screenshot

Divi restaurant menu price text settings of layout 1

Ingredients Text Settings:

Font: PT Sans

Font Weight: Regular

Text Color: #212121

Text Size: 18px

Divi restaurant menu ingredients text settings of layout 1

Description Text Settings:

Font: PT Sans

Font Weight: Regular

Text Size: 17px

That’s it, we’ve successfully created preview 1st of the restaurant menu layout.

Divi restaurant menu layout example 1

You can bring changes in the layout by adding some CSS and doing some other customizations. Follow the steps to create unique restaurant menu layout with some CSS.

Creating restaurant menu using CSS with layout 1:

In above restaurant menu layout, we kept Number of Menu items default, therefore this time input 6, and set Number of Columns as 2.

Divi Restro Menu layout 1 with CSS

Keep Elements settings same as were before.

Design Tab

In addition to make attractive food menus, we need to tweak food item info a little bit. Therefore, head over to the title text.

Title Text-

Title Heading Level: H4

Font: Roboto Condensed

Title Font Weight: Bold

Text Color: #E09900

Title Text Size: 28px

Letter Spacing: 1px

Divi Restro Menu layout 1 with CSS title text

Title Text Shadow: Look in the screenshot

Title Text Shadow Color: #000000

Divi Restro Menu layout 1 with CSS title text shadow

Currency Symbol Text-

Keep all default settings as they are; except color, shadow, and shadow color.

Currency Symbol Text Color: #000000

Currency Symbol Shadow: Look in the screenshot

Shadow Color: rgba(0,0,0,0.4)

Divi Restro Menu layout 1 with CSS currency symbol text shadow

Price Text Settings-

Price Font: Great Vibes

Font Weight: Bold

Text Color: #E09900

Text Size: 34px

Line Height: 1.2em

Divi Restro Menu layout 1 with CSS price text

Price Text Shadow: Look in the screenshot

Price Text Shadow Color: #000000

Divi Restro Menu layout 1 with CSS price text shadow

Ingredients Text Settings:

Font: Amiri

Font Weight: Bold

Text Color: #000000

Text Size: 18px

Divi restaurant menu ingredients text settings with CSS

Ingredients Text Shadow: Look in the screenshot

Ingredients Text Shadow Color: #E09900

Divi Restro Menu layout 2 category text shadow with CSS

Description Text Settings:

Font: Amiri

Font Weight: Regular

Description Text Color: #000000

Text Size: 17px

Description Line Height: 1.8em

Divi restaurant menu description text settings with CSS

Apply some CSS-

Go to Advanced tab, in CSS Class field, and input “el-box-shadow”. 

Divi Restro Menu module advance settings

Further, save the layout, and then click the Three Bullet icon under the section.

Divi Restro Menu plugin

After this, go to page settings, click the icon near the delete button.

Divi page settings

Then go to Advanced Tab, and add below CSS in the Custom CSS section.

.el-img img {
box-shadow: 0px 0px 14px 0px #212121;
}

.el-box-shadow .el-drm-menu-items,
.el-drm-menu-items{
overflow: inherit;
}

.el-box-shadow .el-drm-menu-item {
box-shadow: 0 3px 10px -1px;
min-height: 244px;
padding: 20px;
}
Divi page settings for custom CSS

Save changes and your restaurant menu with Custom CSS is ready.

Divi restaurant menu layout with custom CSS using Divi Restro Menu layout 1

Easy step to create preview restaurant menu 2:

In addition to the above Divi restaurant menu, we’ll now create food menu of preview 2 using Divi Restro Menu layout 2.

Step 1

Upon inserting the module on the page, choose layout 2. Set Number of Menu Items to 6, and Number Of Columns to 3. Further move on to the Elements setting and check “Use Filterable Menu” as “ON”. This would add category filter bar over restaurant menu.

Divi Restro Menu layout 2 elements settings

Step 2: Divi Restro Menu Layout 2 Design settings

In order to make Divi restaurant menu layout more attractive and beautiful, we’ll now customize design of the Divi Restro Menu layout 2. Head over to the Category settings.

Category Settings-

Normal-

When user don’t select any category for the view.

Category Font: Baloo

Font Weight: Regular

Category Text Color: #583BA0

Text Size: 29px

Letter Spacing: 1px

Divi Restro Menu layout 2 category settings with CSS

Category Text Shadow: Look in the screenshot

Category Text Shadow Color: #E09900

Divi restaurant menu ingredient text shadow settings with CSS
Active-

When user selects a particular category for the view.

Active Category Font: Baloo

Font Weight: Regular

Active Category Text Color: #583BA0

Divi Restro Menu layout 2 category settings

Active Category Text Shadow: Look in the screenshot

Text Shadow Color: #288FAB

Divi Restro Menu layout 2 category text shadow

Title Text-

Title Heading Level: H4

Font: Allura

Title Font weight: Bold

Text Color: #288FAB

Title Text Size: 30px

Divi Restro Menu layout 2 title text settings

Currency Symbol Text Settings-

Keep all default settings.

Price Text Settings-

Price Font: Great Vibes

Font Weight: Bold

Text Color: #288FAB

Text Size: 28px

Line Height: 1.2em

Divi Restro Menu layout 2 price text settings

Ingredients Text Settings-

Font: PT Sans

Font Weight: Regular

Text Color: #212121

Text Size: 18px

Divi restaurant menu ingredients text settings of layout 1

Description Text Settings-

Font: PT Sans

Font Weight: Regular

Text Color: #000000

Text Size: 17px

Divi Restro Menu layout 2 description text settings

That’s it, we’ve successfully created preview 2nd of the restaurant menu layout.

Divi restaurant menu layout example 2

Summary

In this blog post, we’ve shown you how to use Divi Restro Menu plugin and create restaurant food menus on your Divi theme website. If you’ve tried this plugin and created food menus, then share your views in the comment section. And if you want to purchase this plugin, then go to this link here.

Divi Extended Cyber Monday Sale
Posted By:
Vishvendra
Vishvendra believes in the keep learning process and applying those learnings into work. Other than technical writing, he likes to write fiction, non-fiction, songs, and comic ideas. He loves what he writes and writes what he loves. Search his name with "Nathawat," and you'll easily find him over the internet.

3 Comments

  1. Gary Hickman

    Is there a way you can rearrange the order the menu items in a category show?

    Reply
  2. Gary Hickman

    What size would you set the background images to?

    Reply
  3. Yiannis Gaitanos

    Hi there,

    Great plugin! Works well, and is easy to install and manage. Is it possible to set a default Category to display upon page load?

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 Comments

  1. Gary Hickman

    Is there a way you can rearrange the order the menu items in a category show?

    Reply
  2. Gary Hickman

    What size would you set the background images to?

    Reply
  3. Yiannis Gaitanos

    Hi there,

    Great plugin! Works well, and is easy to install and manage. Is it possible to set a default Category to display upon page load?

    Reply

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi Extended Cyber Monday Sale
Cyber Monday Popup