If you’re building a restaurant website, chances are high you’ll want to include a restaurant menu on there as well. Now, if you’re looking for a creative way to do that inside Divi, you’ll love this tutorial. Today, we’ll show you how to use Divi’s built-in sticky options to create a sticky restaurant menu. The design we’re creating splits up items on your menu per category and allows visitors to see which category they’re at! You’ll be able to download the JSON file for free as well.
Let’s get to it.
Download The Layout for FREE
To lay your hands on the free layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Create Element Structure
Add New Section
Start by adding a new section to the page you’re working on. Open the section settings and change the background color.
Background image
Upload a pattern background image next. You can find the one we’ve used in the zipped folder that you can download at the beginning of this post.
Modify the spacing settings next.
Continue by adding a new row using the following column structure:
Without adding modules yet, open the row settings and change the sizing settings as follows:
Add Text Module #1 to Column 1
Add H3 Content
Time to add modules, starting with a first Text Module in column 1. Add some H3 content of your choice.
H3 Text Settings
Move on to the module’s design tab and change the H3 text settings accordingly:
Add some top and bottom padding values next.
Add Text Module #2 to Column 1
Add Content
Then, add another Text Module right below the previous one with some content of your choice.
Text Settings
Change the module’s text settings as follows:
Complete the module settings by changing the spacing settings accordingly:
Add Image Module to Column 1
Upload Image
The last module we need in column 1 is an Image Module. Add an image of your choice.
And complete the module settings by applying the following responsive padding values to the spacing settings:
Add Blurb Module to Column 2
On to column 2. Add a Blurb Module with some content of your choice.
Background Color
Use a white background color next.
Title Text Settings
Move on to the module’s design tab and change the title text settings accordingly:
Body Text Settings
Modify the body text settings too.
Then, we’ll apply the following border settings:
Box Shadow
We’re using a box shadow as well.
Blurb Title CSS
And we’ll complete the module settings by adding the following line of CSS code to the blurb title CSS box in the advanced tab:
Clone Blurb Module as Many Times as Needed
Once you’ve completed the first Blurb Module, you can clone it as many times as you need.
Change All Duplicate Content
Make sure you change all duplicate content.
2. Apply Sticky Effects
Open Text Module #1 in Column 1
Now that all elements are in place, we can focus on the sticky effect. To do that, we’ll open the first Text Module in column 1.
Make Module Sticky
Move on to the advanced tab and apply the following sticky settings:
Sticky Styles for Module
Now that our module has been turned sticky, we can apply sticky styles to it. First, add a black sticky background color.
Then, change the sticky H3 text color to white.
And complete the sticky styles by adding the following responsive sticky padding values:
3. Clone Entire Row for Reuse
Once you’ve completed the sticky steps, you can reuse the entire row as many times as you like.
Change All Duplicate Content
Make sure you change all duplicate content and that’s it!
In this post, we’ve shown you how to get creative with your next restaurant website. More specifically, we’ve shown you how to build a sticky restaurant menu that allows you to showcase all different items in an interactive way. You were able to download the JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.
If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.
This content was originally published here.