How to Use the Divi Restaurant Menu Module

Divi Modules » Docs » Divi Restaurant Menu Module » How to Use the Divi Restaurant Menu Module

Introduction

Creating restaurant menus in Divi is typically very tedious and involves a lot of custom CSS and advanced formatting. The Divi Restaurant Menu Module changes that and makes it extremely easy to add gorgeous restaurant menus to your Divi website! Plus, we have over 20 demo layouts for you to import into your website to save you even more time. In this tutorial, we’re going to give you an overview of the module and the options included. Then, we’re going to move onto a Use Case Tutorial to show you step-by-step how to create a custom restaurant menu using this module.

Step 1: Add a new module

1. Enable Divi Builder and add a new Module > Search for “Pro Restaurant Menu”.

Pro Restaurant Menu Module – Content tab

1. Click on the “+” icon to add items to the restaurant menu

Restaurant Menu Item – Content tab

When you add a new menu item, a new content tab will be open where you can add the product title, price, a description, and an image (if you need it)

1. Title: Title of the product.
2. Price: Add the price of the product. Before the price, add the currency.
3. Description: Add a short description of the product.
4. Image: Add an image to your product.
5. Image Alt Text: Add an alternative text to the image for SEO purposes.

Restaurant Menu Item – Design tab

1. Vertical Align: Align vertically the description and image.
2. Image: Change the width of the image, add rounded corners, borders, and box-shadow.
3. Title & Price Separator: Change the style of the separator (dots, dashes, double lines), separator color, and spacing.
4. Text: Style the title, description and price texts.