Divi theme examples  – Designing a resturant website layout

Divi theme examples – Designing a resturant website layout

July 25, 2019 5 By Bernardo Ryan



hello everyone and welcome in today's video I'm going to show you step by step how to create a restaurant layout design from scratch so let me just show you quickly what we're aiming to achieve in today's design so this is going to be our landing page all the images that I've used I've found them on pixels com these are royalty-free images and as you can see is the images that really make your designs look really really awesome so this is going to be our main section of our website what I've decided to do here is to add a call to action because we want to generate leads so later on in part 2 we're going to be connecting this to a funnel so that we can email these leads later on for special offers okay so moving on here I've also created this um special menu area here so these are the main sort of like foods that I've added in and in the background here we also have a slight hint of some food in the background here we have an image of the chef and a brief message here and then finally over here we have our testimonials from our happy customers so this is the layout that I'll be showing you hard to design step-by-step in today's tutorial now before we begin I would like to say if you buy TV using my affiliate link I will give you access to my Divi blueprint course which teaches you how to use Divi and how to design professional-looking websites using Divi secondly if you're new to web design I also have a free wordpress mastery course the link to that is in the description below it's 100% free this will be your starting point to learn how to design websites using WordPress alright let's dive in let me show you a hard to create landing page alright so let's start by creating a brand new page for our landing page so I'm gonna come over here click on add new so I'm just gonna call this landing page but of course you can name this page whatever you want next I'm gonna come over here and click on use Divi builder and then I'm going to build this from scratch right so what we're gonna do right away is to add our background image here so I'm going to click on this gear icon on our image on our section settings click on background and then I'm gonna add my image right here so the image I'm going to you is this one here of the interior of the restaurant now it's important that when you design your websites you want to make sure that the design of your restaurant website also includes the interior so when people land on the page they can see roughly what it looks like inside think they sort of like get a feel of what it looks like before they actually come all right so now that I've added this I'm just gonna save this for now and then I'm gonna come and add my columns so I'm gonna add a single column here now on this column what we're gonna do is we're just gonna add something in fact we're gonna add a call to action because when they land on the page we want something that really entices them to want to sign up for something so that we started collecting all our leads so I'm gonna go for my text module here so what I'm gonna do is I'm just gonna add you know some description text to go with our call to action and then I'm going to just pretty much save this for now we're gonna come back in and make some further changes next we're going to need our call to action button so I'm gonna search for my button module here and select it and again I'm just gonna leave my button as it is in fact I might as well just align it to the left but we are going to come in and make some changes to it okay so I'm gonna save this and then we also going to need a title so again this is gonna be a text module I'm gonna select it so I'm just gonna say become a free member came so I've got that now I'm gonna sign this to heading 1 so I want this nice and big okay so that's looking great I'm gonna drag this now to the top okay so now that we have all our contents in here this is looking great now I'm going to go in and make some changes to this so I'm gonna click here on row settings and then we're gonna go into our column because this is where we're going to make all our customizations so first of all I'm gonna come over here to design spacing so I think the spacing around here is pretty much okay but you know what we're gonna come in and make some changes later so let's go back to row settings design so here I need to work on the sizing because right now it's just going all the way across so I really want to make this you know slightly small and also aligned to the left so now I can see all our content is right here on the left and it's all reasonably laid out now so the next stage now is to pretty much save this and then let's go and start working on our colors so I'm gonna come in here and change my color here to white so this is a heading text I used white we may actually go in and play around with the colors again so here I want to come to texts regular you know in fact I need to just make this white as well so over here in our row settings the next stage is to just add a background color so that it's easier to see our text here in the background so let's go ahead and do that so I'm gonna click here on this plus button and the color we're gonna add is pretty much black and then what we'll do is we're gonna go in and add some transparency to this just just slightly I think that should be enough okay just a little bit okay so now that we have this let's go in and give this some padding so I'm gonna come over here to spacing so for our padding here I'm gonna start with 20 and see how that looks so that's not too bad I'm going to do the same over here left and right and then as you can see this now is not looking too good we might want to go in and make this slightly bigger but of course this is where you can play around with your settings so I want to give this maybe about 30 and then top and bottom again I'm gonna go maybe actually let's do it let's do it 30 six thirty six okay because that's enough breathing space right there right so this is looking much better but you know what I don't want this in too in these in two lines so let's go ahead and fix that so I'm gonna save this now one thing that you may also want to change here is as you can see everything is all bang on right there on the left edge so we can actually go in and make some changes to this so let's go into our section settings design then we're gonna come over here to spacing so what I'm gonna do is I'm gonna add some margins in fact some padding to the left and then let's see how that looks so I'm gonna go and try maybe 40 okay so we just moved this rectangle now from the left you might even go for maybe 64 okay let's leave it at 64 right so we are gonna come in later it makes more tweaks now if you if you feel like okay this size of this landing page here or this section is not too good you can always come in here and set a height so let me come over here to design and let me show you how to do that so on sizing we can actually set up our minimum height so let's say minimum height is maybe 6 20 let's try 620 so now that's our minimum size it's all set and now just looking great information here is easy to read and we have a beautiful background here which showcases our restaurant now let's go in and let's add some more sections to make our website look much better so I'm gonna click this plus button and I'm gonna add a regular section here and we're gonna have three what we're gonna have here is some images and some call to actions so I'm gonna make this like the menu so I want to save this for now and then I'm gonna start adding all my images so I'm gonna click here on this plus button and add an image module okay so I have all my images here in my media library so let's start with this one here so I wanna add it you're gonna save that now we might need to do a bit of work here so next I'm going to add a single column because this is what's gonna have our title to the section so it's gonna be a text module so I'm going to select it and then I'm just gonna say our special menu ok so I'm gonna come over here to design and then I'm just gonna make sure my text is aligned I'm also going to come back and make some customizations later so I'm gonna save this and all I have to do now is just to drag this above this row alright so now that we have this as a style I think it'll be nice if we add something in the background really faded not really like in-your-face it's just to give this section a very good style so let's go ahead and do that so I'm gonna come over here to my section settings background then I'm gonna click this plus but I mean this plus button here on my image so let's add an image to go with this so the image I'm gonna go with is let's go with this one here it's just an image of food but of course as as I mentioned this is like really overpowering so we really want to knock off you know this image here make it really light so let's go ahead and do that so to do that we're going to first of all come over here and change the blend mode to lighten and then we're gonna come over here and add white so now you can see when you drag this slider down here it shows us a little bit of the image here in the background but again we may want to come back and make some customizations later so for now let's save this okay so let's add our images here and make this look really really nice so I'm just going to duplicate this twice and then just drag this into position okay so now we have all our images so we're going to assume that this is menu 1 this is menu – this is menu 3 so let's go in now and start creating you know the modules that are going to make up our our section so first of all I'm gonna add a button here I select it so I'm just gonna say order all right now let's go into the design and kust really customize this so I'm gonna come over here to button so let's start with adjusting our colors so for our background color here so this is a restaurant we want to go with these dark Reds because these colors are really appetizing okay so now let's work on our font so we have Poppins here I may want to change this to monster right go ahead and select that great now the size of this is a bit too much so I'm just going to reduce this a little bit to about maybe 14 it doesn't have to be too big right so now that we have this in place let's see if we have any padding to this I'm gonna come over here the spacing and sure enough we have some padding so I'm just gonna reduce this a little bit maybe to about seven I think seven works fine and then I'm gonna save now I also need some text to go with this so I'm also going to add in another module and this is gonna be our text module so so let's just call this menu one for main meal one of course you can be creative with this maybe perhaps you may want to give this a an even better name for all these menus all right so I've added this now let's go in and let's just make sure that it's centered and then save then we're gonna drag this to the top so now that we have this information here we might also what we may want to add a bit of a description of what this main meal one is about so let's go ahead and do that so again on a search for a text module now notice that whatever I'm adding here it's gonna be easy for me to just come in and just duplicate it and paste it over so most of our work is going to be done here but it's gonna be easy for us to move it over okay so next I'm also gonna make this centered I know I could have used a blurb for this but I want to have full flexibility while I'm working on this okay so again on the text here I'm going to Center it the next stage is to go into one of these columns and I'm gonna start working on it so I'm gonna click here on this gear icon and then now we have access to our columns so this is the best way to work on your columns if you want to add some styling to this so let's start by adding a background color so again I'm gonna experiment with colors here that I think would work so I'm really gonna go with some really dark colors here so I think that works okay now I need to add some padding because I'll give this some breathing space okay so let's increase this to 28 do the same to the left 28 yes I think this looks okay now let's go in and save this so now let's go in and customize our text so I'm gonna come over here to my title design and in my text here I'm going to give this this white and I want to make it all caps and then over here I'm gonna make it bold and then finally we just want to increase the signs a little bit to maybe about 18 and then save next over here we will be also going to do the same we're gonna come over here and change my text color right so over here we're gonna make this white but you know what the white is a bit too much here so I'm just gonna add some transparency to it so as you can see I'm just dragging this slider down until it's just enough for us to be able to read it so I think that that's looking great I'm gonna save that and then finally on my button here I'm also going to change my background color so I'm gonna come to my button background and let me choose a color that works well with this so let's look for a bright orange okay I think that looks great right so now I'm gonna save so this is our main meal and that's the design of our main menu male 1 so we need to replicate this and do the same to the rest of the two columns alright so let's go back into our rows row settings so easily I can just copy my Styles here and just paste them over here so you can see now they've been pasted over I'm gonna go back again paste them one more time so now I don't have to go in and make all those crazy changes so now I'm gonna go ahead and save save one more time and then all I have to do now is to go in and just copy and paste this over okay I'm going to drag this at the top and just rename this so this is main menu male 1 so this is gonna be main meal 2 and the other one is going to be 3 alright great so I'm gonna save this we're gonna do the same here with the description text duplicate this write this one more time and then finally we're gonna do the button here so as I mentioned you can also do this with a blurb if you prefer but this is you know I'll find a layout so all I have to do now is to go in and change these images so I'm gonna click here and change my image so this one here is going to be let's go with this one right here in fact we may need to change this let's go with the burger okay now let's look at our final one so again I'm going to click on this gear icon and select our image so I'm gonna go with this one here great so these are main meals so all I have to do now is to come over here to the top and start working on my title so I'm gonna click here on design text so first let's make it all caps change the color so we may want this a bit darker you can see here is I mean how I'm making my decisions this is also based on the fact that I'm also looking here to make sure that when people click on it or when people land on this page it's easier to see alright so now that I have this now let's work on the styling so I think a special menu the way it is is fine I just need to increase my text size so let's go ahead and do that so maybe let's go with 24 and then we're gonna add some little spacing to this alright so I think that looks really nice now I'm gonna come over here is spacing and if we're going to give this it's a margin so let's go with 28 and save now let's move on to our next section so I'm gonna click here on this plus button click on regular so what we're gonna do here is we're going to have a section where we're going to talk about our chef so let's go ahead and do that so I need here 1/4 and 3/4 so on the first side here I'm gonna add an image now let's choose our image so this is our chef right here I'm gonna click upload an image save that and over here we're gonna have some text so I'm gonna choose my text module so what we're going to do here is we're not gonna add you know you just need a caption really we don't really need a large description of you know what's going on here so let's go ahead and do that so I'm just gonna replace this text here with my own now let's work on this so I'm going to click here on design and then we're going to come over here to the text so this time let's have it as bold okay and as we can see the text color here doesn't look great so you might as well go ahead and change this right now so I just need this doc really dark color so let's go with this okay now I'm going to increase the size nice and big but as we can see our line height is a bit off so I'm just going to reduce this a little bit I think 1.4 is great alright so now that I have infected my I mean even need to go back down a little bit to 1.2 okay so that's looking great I'm gonna save this so now we have this beautiful image and we also have the text to go with it right so what we could also do here is if we need to we could make this image really come bang on right here on the bottom and remove the margins that we have here in fact let's go ahead and do that so I'm just going to remove the margins here right so next we need to come over here to design and then spacing so over here on spacing the first thing we need to do is to wait Said's show space below the image we're gonna say no to that and on sizing we're gonna force full width and this is where we can also set up our minimum and maximum Heights okay so I'm just going to save this and I'm also gonna come over here to my row settings and we and remove my padding so I'm gonna click here on design spacing and I'm gonna get rid of our margins and make sure padding is gone as well okay so again on column one we're gonna do the same just make sure that we don't have anything here so I'm gonna go ahead and set this to zero on the bottom so now you can see our images is flash right there on the bottom which is exactly what we need alright so I'm gonna save this and save this one more time now as we can see this text here is way up there on the top so I'm gonna add some margin bring this all the way down here so that it's right in the middle now we can go in and also do a few changes here I can see there's some letter spacing that doesn't really look nice I'm gonna come back over here to my design text so for my letter spacing here I'm just gonna add minus 1 okay so that looks much better I prefer it that way okay now I'm gonna save so this is our description text this goes with our chef over here we may also want to add a background color here but you know what for this design I think this looks really nice for our chef now we might as well add some testimonials for this so let's go ahead and do that so I'm gonna click here on this plus button and we're gonna go with a regular section and this time I'm gonna add four testimonials and I'm just going to search for my testimonial here so now we might as well go in and start adding all our testimonials but before we do that let's see what this looks like with a very dark background section so I'm gonna click here on my section settings click on background so what I could also do here I can come here on my recent colors so these are the colors that I've been that I've been using so I'm go with this really dark one and make it even darker okay so we're gonna go with that for our background right so the next thing we need to do here is to add another row because we need that row as in fact you know what since we've created another one we can just come over here to the top and for our special menu here this row that we've just created we're gonna duplicate it and then we're just going to drag it all the way down here to the bottom above our testimonials okay so you can see here that it looks really nice it blends in very well here okay so what we're gonna do here is let's start by adding our image here so I'm gonna come to my image and I'm gonna start adding my images so I'm just gonna use images that are already in my media library so let's go ahead and upload this one now let's work on our text so I'm gonna click here on my design so that circle looks fine but if we need to get rid of this border we could actually go in and get rid of it or if you want to play around with the colors we can actually go in and adjust our colors here make it very subtle and now for our text let's go in and customize that because the way our text looks here is not really great so I'm gonna click here on this brush tool and then I'm going to play around with the fonts I mean with the colors that we've just used so that's a bit too bright and again like I said you just need to come in here and start playing with these colors and see which ones work better okay so I just need to brighten this up a bit that's oh I think that looks fine okay so and the amount of text is a bit too much so I'm gonna come over here to my text and get rid of some of this text so the name so this could be a Susan so these are all testimonials so what I'm gonna do is well is I'm gonna make this even wider so I'm gonna click here on row settings design sizing so what I'm gonna do is to increase my width to about 80% and I'm gonna do the same over here as well let's save this and see what it looks like okay I think this looks I think this looks nice okay now that we've added this we can always duplicate this and add it all across so let's do that so I'm just gonna do command C to copy if you're on a Mac if you're on a PC it's ctrl C then I'm just gonna paste it so this saves me a lot of time because next time I come in here all I have to do is to change my image so let's go ahead and do that so I'm gonna come over here to my image and then actually choose a different image this time let's go with the sky upload an image and that's fits perfectly and we might as well change his name so this now is Jack Jones so we can save this let's change this one more time okay so here let's find a different let's find a different image all right so let's go with this one here right so here again we can also change the name and this could be Jane Scott and finally if we just need to find another image here to just balance our design so I'm gonna click here an image and go with this lady here alright so now that we have all our images the final thing I need to do here is to just change this name as well and I'm just thinking of a name here a bit stuck right so we've got Jane so this could be Samantha okay so now that we have a lot of images I'm gonna save this so pretty much this is looking great so now we need to change this text to happy customers and then save so as I'm looking at this I'm thinking you know what I may want to come in here and also adjust as these colors here so let me play around with these colors here just change them a little bit so I'm gonna click here on this gear icon and I'm gonna go with the middle column click on background so I'm just gonna make this a bit darker right so we'd really want to highlight this one here because this one here is the one that we need people to choose when they come onto our page okay so I want to go with that color there and what I could also do here is to make it slightly bigger so I'm gonna come over here to design transform and I'm just going to crease the size a little bit here to about let's say 110 I'm happy with that I'm gonna go ahead and save save one more time and now you can see that this one here really stands out but the issue that we have is now columns here are very close together so we might as well fix that right away so I'm gonna come back over here to my row settings design sizing so for our gutter with here it's set to two I'm going to increase this to three let me save this and now we can see that this looks way much better okay now we can even go further go in and maybe give this a border around but to be honest there's no need I think this looks okay now the one thing that we may also want to do here is to just increase our padding here on the bottom because this title here has come way too close to the to our item here so that's looking good as you can see this section here has this image in the background over here we have our chef we have our main message here from the chef we have our main customers here we could also go in and add you know other things but to be honest I think the landing page here looks great now I want to also come back over here and just do a bit of work and perhaps maybe make this look much better so the first thing I want to do is to come to my section settings click on background and I may want to darken this a little bit just a tiny bit right so to do that I'm going to come over here to my background and add a background color but anyway in fact before we do that let me change this to from my blending mode to multiply then I can now play around with my colors so this is all about experimentation so as you can see when I add black I can now drag my slider and reveal my image just a little bit like that now let's say we need to add a specific color this is where we can go in and just make it nice and warm but you know what this is a bit too much I think the best thing is to just go with a black and then just add a bit of transparency like that right so I'm pretty much happy with that and then I'm gonna save now over here I'm just making some little tweaks I'm just gonna add a bit of padding here my button is way too close to my text right so pretty much I'm happy with my landing page so what we're gonna do in the next exercise is to connect this to a funnel because ideally we want to have a funnel and also have some email automation system which sends them a discount code so that when next time they come to order they can just print off that discount code or even just mention the discount code or show it on their mobile phone as they're making their orders so that's what that's what's gonna be in the next stage which is part two all right so that's what I have for you in today's video thank you very much for watching see you in the next video