How to make a website for a restaurant with DIVI

[thrive_2step id='4652′]DOWNLOAD RESTAURANT LAYOUT FOR DIVI[/thrive_2step]

Hello guys,

In this tutorial I am going to show you how to make a web page for a restaurant thanks to DIVI.
You will see how in a few minutes we have a very cool website for a restaurant.

You can see the final result that we are going to achieve in the video or in the following image:

Although it is obvious to do the tutorial you need to have previously installed the DIVI template, if you do not have it you can buy here or if you are a member of the premium zone It is freely available for download in your members area.

To follow the steps of the tutorial, in addition to the DIVI template, we will need to download a layout that will greatly facilitate our work.

You can download it from here totally free.

[thrive_2step id='4652′]DOWNLOAD RESTAURANT LAYOUT FOR DIVI[/thrive_2step]

We have to import the layout that we just downloaded in our DIVI template, for this we go to the administration area of ​​our website to Divi –> Divi Library –> Import and export:

In the screen of the previous image we drag the decompressed file of the layout. Remember to unzip it or it won't work.

We click on "Import designs from divi builder" and wait for it to be imported correctly.

Now we have a layout imported into our Divi with all the demo information to set up our restaurant page.

Now we create a new page and add the layout that we just imported from the "Load from library" button that we have in the Divi builder:

And a screen will open, we click on "add from library" and in the "Diner Layout for Divi" layout we click on Load:

Now we will have all the sections, blocks and other information on our page:

We click on publish the screen and practically we already have the page mounted.

Now we need to configure the page menu. The most important feature of the menu is that when you click it goes down to the specific place where that information is.

To mount the menu we go to Appearance –> Menus and create a new menu.
To add the links of each section to which we want it to go when clicking, we will do it in the following way.

We click on Custom Links and add the name of each section so that when clicking on the link it automatically goes down to its section:

As you can see in the previous image, you have to add the name of the section preceded by a hash (#) as the url

The name of each section is:

• Chef = #chef
• Reservations= #reservation
• Reviews= #reviews
• Contact= #contact

Remember that you have to check the "Main menu" option so that the menu appears instead.

To have our page as in the demo we have to add some styles in Divi, for this we go to the Divi menu –> Theme Options and in the general tab, at the bottom, in custom CSS we add the following code:

#main-header, #main-header.et-fixed-header {
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}

Now we just have to make the page we have created the home page of our website.
To do this, we go to Settings –> Reading –> Front page display –> Home page “Web Restaurant” or the name of the page we have created:

If you have come this far you already have the page as in the demo but now comes the most important point.
Change the test content to ours.

To do this we just have to edit the page and search among all the modules and sections for the content we want to change.

Do not worry if at first you do not know where to find what you are looking for, it is totally normal. As we have imported a layout with everything done, now we have to see all the demo content and study the page a bit to get hold of it.

And this has been all 😉

I think it has never been easier to set up a page for a restaurant.

I hope you liked it
Oscar