Our Divi Scheduled Element Extension is one of the most powerful and only extensions that provides so much functionality, you can use this Extension to schedule the visibility of content in Divi during a sale event or Business Hours.

In this tutorial, we’re going to see how to show different restaurant Menu for each day in Divi. You can use our Price List Module to create beautiful restaurant Menus and Scheduled element extension to handle their visibility for each day in a week.

You can use it for other purposes as well. You can show opening hours message content or even show different promotion each day. The possibility with Divi Scheduled Element is unlimited.

Let’s get started

Alright, lets’ get started, first of all, we need to set up the Restaurant Menu. For this, we’re going to use Our Price List Module, and with the help of this Module, we can easily create a Restaurant Menu or Menu of any kind.

Set up Row

To add a nice looking Restaurant Menu we need a Two Column Row, simply click on Green + Icon and insert the two Column Row.

Now we need to increase the width of the Row a bit for this, Open up the Row Settings -> Design -> Sizing and do these changes

• Width – 85%
• Max-Width – 85%

Now in the First Column, insert the Price List Module.

Now you’ll see the Price List Module settings popups up, you can click on +Add New Item button to add your first Price List Item.

You’ll now see more settings, in the Content Tab -> Text Panel you’ll need to set up what you’re going to show to customers. You can enter the details of your Food/Drink.

Now open up the Image panel and Add an Image of your Product

So now we’re done with Adding Content, you can now scroll down a bit and open up background panel and a white Background to the Item.

After adding a background color, you can go back and duplicate the first Price List Item to multiple times.

Once you’re done with that you can now open up Design Tab -> Title Text Panel and do these Changes.

• Tite Font – Montserrat (You can have your site’s default too)
• Title Font Weight – Bold
• Title Font Size – 23px

Now open up the Description Text Panel and do these changes there

• Description Text Font – Montserrat

Open up the Price Text Panel and make these changes

• Background Color – #8300e9
• Padding – 10px 10px 10px 10px
• Price Font – Montserrat (You can have default site font too)
• Font Weight – Ultra Bold
• Price Text Color – #fff
• Price Text Size – 22px
• Price Rounded Corners – 100px

Alright now open up the Image Panel and make these Changes

• Image Width – 35%
• Image Rounded Corners – 7px to all corners
• Enable Image Box shadow
• Vertical Position – 13px
• Blur Strength – 37px
• Shadow Color – rgba(0,0,0,0.3)

Now go to Content Tab again and open up First Item Settings -> Design Tab -> Spacing and add some Padding like this

• Padding – 20px 20px 30px 30px

Now open up the Border Panel and add a Corner Radius to the First Item

You can also add a small Hover effect to the Price List Item using Transform options, so simply open Transform Panel and choose Transform Translate then click on Mouse Icon and choose Hover Tab, now disable the Link Icon and add a value of -10px on the right side as below

Now go back and right-click on the First Item and click on Copy Item Styles.

Now you can right-click on the 2nd item and click on Paste Item Styles and do the same with the other times too.

So we’re pretty much done with Designing a simple Restaurant Menu, you can now copy the Module and paste on the Second column and Change it’s content again as below

Setting up the Layout

To show different Food Menu on Different day we need to duplicate the Layout 7 Times according to number days in a Weak. You can Hover over to the Section and click on Duplicate Icon to duplicate the Section.

After the Duplicating the Section you can enable Layer View and Rename all the sections according to days.

Using the Scheduled Element Extension

Alright, we’re finally done with content, now we first need to make sure that the Extension is enabled from Divi Supreme Settings Page. You can go to Divi Supreme -> Enable Scheduled Element Extension and click on Save Changes Button.

Now back to the Divi Builder, we need to open up the first Section Settings -> Advanced -> Visibility -> Use Scheduled Element. Enable this switch to use the extension

Now scroll down a bit you’ll find an option “Use Business Hours Day/Time” enable this switch you’ll see the names of Days and Time to show your content between that time. As we’re showing the first section on Monday we’ll need to select Monday and the Business hours of your Restaurant/Shop.

Now enter the time of your Restaurant in 24 hours Format

Alright, we’re done setting up, now this section will only show on Monday between 08:00 AM to 08:00 PM, Really cool right?

Now you’ll need to the same thing with other 6 Section on the Page and don’t forget to change the selection of Day like if you’re editing a section that should only show on Friday you’ll need to select Friday as we see before.

So once you’re done with that you’re ready to go, you can see that If I’ll come to the page I’ll only see the section that is meant to be visible only on Monday.

So what about when a user land on the page after 08:00 PM they’ll not see anything, the page will be blank for them. But don’t worry Divi Supreme Scheduled Element Extension covered you here as well. All you’ve to do is Design a section that’ll say “Sorry we’re closed, Check back Tomorrow” and stuff like that, here’s a section that we added to show when someone lands on the page after 08:00 PM, it’s taken from Resort Restaurant Page.

Now you’ll need to open this Section’s Settings -> Advanced -> Visibility -> Use Scheduled Element, then scroll down a bit and Enable the switch “Use Business Hours Date/Time” and Select all Days.

Now in the Opening and Closing Time field, you’ll need to enter the Closing Time of your Restaurant in the Opening Time Field and Opening Time in the Closing Time Field.

So that’s it now when a user will come to the page after 08:00 PM they’ll see this section saying “We’re closed”, cool right?

And when your Restaurant will open the content on the Page will Automatically change that you set before without you to change it every day, everything will be handled by Divi Supreme’s Scheduled Element Extension.

So that’s it for today’s Fun and Awesome Tutorial we hope that you found this Article and our Scheduled Element Extension helpful and will implement the same technique in your Restaurant too so you’ll not need to change content every day, Have a great day!