How to Embed Divi Galleries into Toggles to Create a Custom Restaurant Menu

Last Updated on September 28, 2022 by 11 Comments

How to Embed Divi Galleries into Toggles to Create a Custom Restaurant Menu
Blog / Divi Resources / How to Embed Divi Galleries into Toggles to Create a Custom Restaurant Menu

Using toggles on your web page is a great way to organize your content in a clean and concise manner. This can help boost the user experience by cutting down on scrolling and giving the user more control over what they want to see on your page. An online restaurant menu is a good example where toggles can work well. A user can easily find the menu item they like and click the item for more information.

In this tutorial, I’m going to show you how to create some intuitive and mobile friendly toggles for your restaurant menu using Divi toggles. Instead of using a WordPress restaurant menu plugin, we will build everything ourselves using Divi’s built-in design tools! I’ll even show you how optimize your toggle for mobile and embed Divi image galleries inside of your toggle content to showcase stunning photos of specific dishes.

Let’s get started.

The Before and After

Here is a sneak peek of the before and after for the restaurant menu design we will be building.

Before

divi restaurant menu

After

divi restaurant menu

divi restaurant menu

divi restaurant menu

Getting Started

Replacing WordPress Gallery Display with Divi Gallery Display

Divi allows you to replace the default WordPress Gallery display with a Divi Gallery display. So whenever you create a WordPress gallery and embed it to your page, the gallery be displayed like a gallery using the Divi Gallery Module. This allows you to add Divi image galleries to any module in the Divi Builder (more on this later). To implement this change, navigate to Divi > Theme Options. Under the General tab, click to enable the Divi Gallery option.

divi restaurant menu

Setting Your Theme Accent Color (optional)

Since we will be inserting a Divi gallery into a toggle module, the icon color that shows when you hover over an image in the gallery will automatically inherit the accent color you have set for the Divi theme. You can set the theme accent color from your WordPress Dashboard by navigating to Divi > Theme Customizer > General Settings > Layout Settings. Under Layout Settings, update the theme access color to the following:

Theme Accent Color: #a06d51

This is the color that will match the Bakery Menu Layout we will be using for this tutorial.

divi restaurant menu

Updating the Default Toggle Icon Size in the the Module Customizer (optional)

For this design, I thought it would be helpful to display a larger toggle icon when using the Divi Toggle module. You can change the default size of the Toggle Module by navigating to Divi > Module Customizer. Then select the Toggle Module from the list and update the icon size as follows:

Toggle Icon Size: 32

divi restaurant menu

Setting up your New Page with the Bakery Menu Page Layout

For starters, you will need to create a new page, give your page a title, and deploy the Divi Builder. Select the option “Choose a Premade Layout”.

divi restaurant menu

From the load from library popup, choose the Bakery Layout Pack and then click to use the Bakery Menu Page Layout.

divi restaurant menu

Once the layout has been loaded to the page, publish your page. Then click the button “Build on Front End”. and then publish your page. Then click to build on the front end.

divi restaurant menu

Once done, you are ready to start designing the menu!

Implementing the Custom Restaurant Menu Design with Divi Toggles and Image Galleries

Designing a Menu Item Toggle

With the Divi Builder active on the front end, add a Toggle module under the text module with the subheading that reads “Sweet Tooth”.

divi restaurant menu

For now, you can leave the default mock content used for the Title and Body Content. But, you will need to add a price for the menu item inside the body content of the tab. Click the Text tab (instead of Visual) and add the following html under the current default text.

<h5>$8.00</h5>

divi restaurant menu

Then start updating the toggle settings as follows:

  • Icon Color: #a06d51
  • Open Toggle Text Color: #333333
  • Closed Toggle Text Color: #333333
  • Closed Toggle Background Color: #ffffff

divi restaurant menu

  • Title Font: Patua One
  • Title Font Weight: Bold
  • Title Font Style: TT
  • Title Letter Spacing: 1px
  • Title Line Height: 4em
  • Custom Padding: 0px top, 0px bottom

divi restaurant menu

In order to increase the clickable area of the toggle title, the title line height is increased and the top and bottom padding is taken out.

Now let’s add a left border to our toggle.

  • Left Border Width: 5px
  • Left Border Color: #a06d51

divi restaurant menu

Adding an Image Gallery to the Toggle Module

As mentioned earlier, when you enable the Divi Gallery option in the Divi Theme Options, a WordPress Gallery embed will take on the style of a Divi Gallery. This allows you to embed a Divi-styled image gallery to any module. For this example, we want to add some images inside of the toggle module to display some images of a particular restaurant menu item. To do this, open the toggle settings and click the Add Media button above the content box.

divi restaurant menu

In the Media Library popup, select the Create Gallery tab on the left. Then select the image(s) you want to use for the gallery and click “Create a New Gallery”.

divi restaurant menu

On the Edit Gallery section of the popup, ignore the gallery settings because the Divi Gallery styles will override these WordPress Gallery settings. Then click the Insert Gallery button.

divi restaurant menu

This places a gallery shortcode within the toggle module content. If you want the gallery to be displayed after the current body text, make sure to place the shortcode after the content.

divi restaurant menu

Adjusting the Row Padding for Smartphone

The content will get pretty tight with the current spacing of the premade layout. We need to update the row settings to create more space on smartphone. To do this, open the settings of the row containing your restaurant menu toggles and update the following:

  • Custom Padding (phone): 0px left, 0px right

divi restaurant menu

Duplicate the Toggle as Needed

To add more Menu Items, simply duplicate the Toggle module and update the content with new text and image galleries as needed. After that, you can delete the original menu items that came with the premade layout.

Final Result

Now Let’s check out the final result of the design.

divi restaurant menu

divi restaurant menu

divi restaurant menu

Changing the Number of Columns in the Gallery

By default, the gallery have a layout that remains three columns on all browser widths and devices. However, with the lightbox effect, users will be able to see a larger version when clicking on the gallery item. So, the smaller images can still work. But, if you want to change the number of columns, you can always add a small snippet of CSS. For this example, I’m going to change the gallery to display images into two columns. To do this, first open the toggle settings and add a custom CSS Class as follows:

CSS Class: two-col-gal

Then open page settings and add the following Custom CSS:

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

Changing the Image Gallery overlay color in the Module Customizer

If you want to change the color of your gallery item hover overlay without having to use custom CSS, you can change the default settings for the Gallery Module in the Module Customizer. To do this, navigate to Divi > Module Customizer. Then click the Gallery Module and change the hover overlay color to whatever you want.

divi restaurant menu

Final Thoughts

Hopefully, this tutorial sparks some inspiration for how to use the Divi Toggle Module to create some awesome restaurant menus. As a bonus, you may have learned a new trick to embed some Divi galleries into any module you want (not just toggles). The only limitation is customizing the number of columns your want display in your gallery embed. However, you can add a small snippet of custom CSS to put you on the right track.

I look forward to hearing from you in the comments.

Cheers!

Divi Anniversary Sale

It's The Divi Anniversary Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Posted on March 18, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post
Download a Free Bistro Theme Builder Pack for Divi

Download a Free Bistro Theme Builder Pack for Divi

Posted on March 15, 2024 in Divi Resources

Divi Theme Builder Pack

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a...

View Full Post
Get a Free Art Therapist Layout Pack for Divi

Get a Free Art Therapist Layout Pack for Divi

Posted on March 11, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Art Therapist Layout Pack that’ll help you get your next Art Therapist...

View Full Post

11 Comments

  1. Good stuff , Very helpful.

  2. Some of the snippets of design posted on the blog are really interesting and inspiring and I would very much like to experiment with their inclusion in my sites.

    Sadly – I honestly don’t have the spare time to build each one to see how it works or if it is suitable for the projects currently in hand. No, I’m not being lazy, I’ve done a couple in the past – but with a family, and job to do, there is never enough spare time to sit, tinker and work though every tutorial. The tutorials do a great service in explaining how the items are created with the builder, if you wish to understand the intricacies of what has been done. To that end I completely understand their reason for being.

    But…
    …for those members without the spare time. Please ET (it keeps being requested) kindly make all these design snippets downloadable to your paid members.

  3. Thanks For New DIVI Gallery
    Divi Is Awesome .

    i Will User restaurant Theme

  4. Thanks For New DIVI Gallery
    Divi Is Awesome

  5. Wow, Nice post.

  6. Very helpful and inspiring. Thank you!

  7. Good stuff, Jason. Thanks for taking the time to share…

  8. That is one setting in Divi settings that I have always overlooked without realising the potential. Nice ?

    • Me too! 🙂

  9. Thanks for this Jason. I’ve not played around with the Divi Gallery very much. What would one do if they just want to have a row of images but not have a lightbox shown if the image is clicked?

    Having the ability to add images or other module functionality into a Toggle would be very desirable.

  10. any chance of seeing a live example?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Anniversary Sale!
Get The Deal
Before It's Gone!
Join To Download Today