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 restaurant menus in minutes.

Preview

Restaurant Menu 1

Divi restaurant menu layout example

Restaurant Menu 2

http://explore.elicus.com/divi-restro-menu-layout-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 in 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 here.

Easy step to create preview restaurant menu 1:

To display items on 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.

Upon clicking the Add New 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.

Below this area, you get one more menu where you can add additional information of the food item. Like currency symbol, price, ingredients, and shot descriptions.

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

Easy Step 2:

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 Restro Menu module on the page.

Keep the default settings upon inserting the Restro Menu module.

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”

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

Title Text Size: 36px

Line Height: 1.6em
Restro Menu Title Text Settings for layout 1
Title Text Shadow: Look in the screenshot
Title Text Shadow Color: #E09900

Currency Symbol Text Settings-

Currency Symbol Text Color: #E09900

Symbol Text Shadow: Look in the screenshot

Currency Symbol Text Shadow Horizontal Length: 0.02em

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

Ingredients Text Settings:

Font: PT Sans

Font Weight: Regular

Text Color: #212121

Text Size: 18px

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

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.

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

Title Text Shadow: Look in the screenshot

Title Text Shadow Color: #000000

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)

Price Text Settings-

Price Font: Great Vibes

Font Weight: Bold

Text Color: #E09900

Text Size: 34px

Line Height: 1.2em

Price Text Shadow: Look in the screenshot

Price Text Shadow Color: #000000

 

Ingredients Text Settings:

Font: Amiri

Font Weight: Bold

Text Color: #000000

Text Size: 18px

Ingredients Text Shadow: Look in the screenshot

Ingredients Text Shadow Color: #E09900

Description Text Settings:

Font: Amiri

Font Weight: Regular

Description Text Color: #000000

Text Size: 17px

Description Line Height: 1.8em

Apply some CSS-

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

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

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

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

Category Text Shadow: Look in the screenshot

Category Text Shadow Color: #E09900

Active-

When user selects a particular category for the view.

Active Category Font: Baloo

Font Weight: Regular

Active Category Text Color: #583BA0

Active Category Text Shadow: Look in the screenshot

Text Shadow Color: #288FAB

Title Text-

Title Heading Level: H4

Font: Allura

Title Font weight: Bold

Text Color: #288FAB

Title Text Size: 30px

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

Ingredients Text Settings-

Font: PT Sans

Font Weight: Regular

Text Color: #212121

Text Size: 18px

Description Text Settings-

Font: PT Sans

Font Weight: Regular

Text Color: #000000

Text Size: 17px

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

http://explore.elicus.com/divi-restro-menu-layout-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.

 

 

 

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.

1 Comment

  1. 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 *

1 Comment

  1. 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 *

How to add Google reCAPTCHA in Contact Form 7 in easy steps

How to add Google reCAPTCHA in Contact Form 7 in easy steps

It’s a must that a contact form should have Google reCAPTCHA or any other security options enabled on it. Well, reCAPTCHA is most recommended. It protects your contact forms from getting filled out by bots or spams. And if you want to add reCAPTCHA on your contact...

Divi Content Toggle to display key information in compact manner

Divi Content Toggle to display key information in compact manner

Having long pages with detailed information can delight Google bots, however, for users, it can be a bulky experience. They might find themselves overwhelmed or either confused when looking over pages overtaken by content. Then there comes the Divi Content Toggle...

Create Divi structured data pages easily for Google rich snippets

Create Divi structured data pages easily for Google rich snippets

Having Divi structured data markup pages can help you and your website in many ways. It not only features your web pages as Google rich snippets. But it brings a valuable amount of organic traffic. And it can be done for any website of any CMS, such as WordPress,...

Divi 4 header footer pack

Fill up your details to download the file

Please check your email for the download link.

One Plugin, Many Possibilities

You have Successfully Subscribed!