How to manage your restaurant menu with the Divi builder

No viable plugin solutions for a restaurant menu with WordPress

After a thorough search for a plugin that would allow for easy updating of the restaurant’s menu and only finding either highly expensive options or basic, $30 a year type plugins of which I was not a fan of any. Some had not been updated in over a year and others would have been tedious for the client.

Divi Builder for Restaurant Menu solution

My final solution was to utilize the Divi Builder with a fully custom code nested inside. With this option the client can edit the menu via the visual tab, using the built in WordPress WYSIWYG. The code is basic CSS, float left, float right that will hit a break point at 650 pixels, dropping the floats and centering the elements.

Using the Divi Library

Instead of having the client scroll through a mass of a Divi builder element on the main page where the menu resides, I created a Global item and then added it to a page if its own. When it is updated the main menu on the home page is also update.

How to edit your Divi builder custom restaurant menu (client-side).

Step 1: Log in

For security purposes, I am not going to post your login url. Please refer to email instructions, or text me if in a hurry.

Step 2: Find page

Hover over “Pages” in the left hand column menu and click “All Pages”.

Step 3: Select Page

Click either directly on the page entitled “Main Menu” or on the “edit” option that appears under the menu title upon hovering.

Step 4: Edit the correct element

Once the Divi Builder loads be sure to click the edit icon that is most deeply nested.

Step 5: WYSIWYG vs. Code

Once the Divi Builder loads you will notice two tabs in the upper right hand corner of the editing window; Visual & Text. The text tab is where you will see the HTML code for the menu. The Visual tab is a WYSIWYG (what you see is what you get) for the menu. This is the tab you will be making your menu changes within.

**Important: If you are making a lot of changes to the menu it would behoove you to select all the code (in code view), copy and paste to a basic text editor. Then of course you can revert to this if you make any monumental errors.

Saving your changes

*Not as simple as you may think!
First you need to do the obvious: hit “save and exit” option within the edit window. Next, hit the blue “update” button on the right hand side of the page.