How to Build a Custom Restaurant Website with WordPress (Free Kadence & Gutenberg Tutorial)

hey everyone clifton here with clifton wp and in this tutorial we're going to be learning how to create a beautiful restaurant website you guys ready let's go [Music] okay quick overview of what we're going to be building so this is the restaurant website and if we come here you notice that this website is a very very lovely looking website however it's very simple and not very many pages and we've managed the sections on the website very well so it starts off with this hero area or featured area or some people like to call this the header area where we have a very simple navigation just two pages the menu and making a reservation and then we've got our aspirational statement and a call to action if you scroll down we have the introductory section here where it's introducing the restaurant and then we have the restaurant offerings breakfast lunch and dinner then if you scroll further down we have a what i like to call a mini menu so this menu is a tabbed menu meaning that each offering is in its own tab and this way you get to be able to manage the space very well so the user can just select which one they're interested in and they'll be able to see those items in each tab if you scroll down further we have an opt-in section where people can opt into either a membership or loyalty program or for a coupon download by entering their name and email and as we get to the end of the page we have the testimonial section where past diners have left the testimonial and then the footer of the website for additional contact information if we look at the internal pages here so if i click on the menu page for instance we have a nice little page header here with the title and then as you scroll down you'll notice that we have the menu items listed out in the list format so breakfast lunch and dinner so people can navigate that fairly easily and then the final page is the make it reservation page where we have just a simple form where people can fill this out and be able to send the restaurant a request for a reservation okay now as i mentioned before everything that we've built here is 100 free we are using the wordpress content management system we're also using cadence blocks to be able to augment the gutenberg page builder and for our form actually we're using fluent forms a free version of fluent forms so maybe in a later tutorial we will check out all the pro versions of all those free tools and maybe soup up the website a little bit but what i can tell you is you can actually build a very nice looking uh beautiful website with a really nice presentation using all these free tools and then when you try to get into more advanced applications and things like that then you can go ahead and get the pro versions of each tool and i'll leave links to everything in the description below but for now what we're going to do is we're going to go ahead and delete all this completely and rebuild this entire website from scratch and this way you'll learn all the tips and techniques that we use to create this great presentation all right let's get into it all right so here we are with a default installation of wordpress and if you don't know how to install wordpress i do have a video that covers that and i will link that in the description below so right now what you're looking at is the default theme that comes with wordpress and this is the first thing that we're going to go ahead and change so go ahead and access the dashboard we're going to go to appearance themes and we're going to click on add new when you do that you'll be in the wordpress repository for themes we're going to go ahead and search for a cadence here's the cadence theme that we'll be using click install and activate and now when we look at the website the website looks a little bit better then the next thing that we need to do is we need to install cadence blocks now cadence blocks is a gutenberg plug-in by the cadence wp theme that adds additional blocks to the default blocks that ship with wordpress when you first install it so we're going to go ahead and go to go to plugins click on add new and we're going to do a search for cadence again so cadence blocks and this is what we're looking for here so we're going to install that so we can get those additional blocks that we'll need and what cadence blocks does is it just gives you page builder capability so you get these additional blocks added to your site and now you can go ahead and just build out full-blown home pages or internal pages or any kind of page that you want with the help of these additional blocks so now that we've done that this is all we really need to go ahead and get started with building out our restaurant website so we now have our theme installed and we also have the cadence blocks installed as well so the next step here is for us to start building out the home page to do that we're going to go to pages add new we're going to call this home whoops call this home and then what we're going to do is we're going to set up our page so our page is set up in a boxed format right now we're going to go ahead and change that up here to the top right go ahead and select this page settings icon and what we're going to do here is we're going to disable the page title we're going to set the page layout to full width we're going to set the content style to be unboxed and we're going to eliminate the vertical padding on the page once you've completed that go ahead and click on publish and when we view this page we should be able to see a completely blank page okay then the next thing that we need to do is we need to set this to be our home page because if i go ahead and visit the site right now it's still set up to be almost like a blog so i'm gonna go to dashboard settings reading right here it says your home page displays go ahead and select a static page and the home page we want is the new home page that we have created go ahead and save that and we're done and then just a little bit of housekeeping go to pages all pages and we're going to delete these default pages that uh come with the installation of wordpress right so when you install it they just put the default pages in there we're gonna get rid of those so move to trash one go to the trash select them again empty the trash and now all we have now is our home page awesome now we're going to start building out the elements of this home page okay so first thing that we're going to do here is we're going to add all our images to this install and i'm going to leave a link in the description below that will link you to be able to download the images that i used just go ahead and download in case you want to follow along but to be able to do that just go back to i'm going to go here to the dashboard i'm going to go to the media library and i'm going to click on add new select files and we're going to go find our images so i have it here and i'm just going to select all the images that are here and upload them into the website this way we're ready with everything that we need to build out our pages that we don't have to do any additional uploads okay awesome so the first thing we want to do is want to create that initial row area where we had the giant pancake nd2 elements which was the text element the and the paragraph element and then we also had the button element as well so let's go ahead and build that out so from here i'm going to click on edit page so i can edit this page directly and then i'm going to start building out the sections of the page so first here i'm going to go ahead and select the plus button up here that'll open up all the blocks and we can see here all the cadence blocks from the installation of the hidden blocks plugin and i'm going to select a row layout so it gives me a section now that i have this section i'm going to select a two column section okay and then over here to the right of the page i'm going to go ahead and make a few setting changes the first thing that i want to do is i want to select structure settings and i want to set the content max width of this row to be the same as the max width of the theme and the theme's max width is 12 90. okay and later on i'll show you where we're getting this number but it's it's 1290 but i want to set it to the to the content max width of the theme so now since it is 1290 i don't actually need to fill this out i can remove that and just toggle this button on here and it'll do it for me automatically just like that okay so now that's done then now i need to build out the background okay so i'm going to go ahead and select the row and if you ever have any trouble selecting items just go ahead and click on this little stairway right here which will provide a list view of your layout so you can just select the list view icon and you'll be able to see all the different sections of your layout so i'm going to leave that open just for now and then i'll probably be closing this as we move along so now that i have this done i really want to i want this real layout and i want the background to be an image so i'm going to come here again to the right select the background settings i'm going to leave it on the image icon here and i'm going to go ahead and select an image we've already uploaded images to our media library this is that image there and i'm going to go ahead and insert that image now that the image is in there i want to be able to see more of this image so i'm going to go back here again to the right and i'm going to go to structure settings and here where it says minimum height i'm going to change this height to 950 pixels so it's nice and big and large and i can see everything then the other thing that i want to do is i can see here that the columns are aligned to the top i actually want this aligned to the center so i'm going to go ahead here in this mini menu up here select the item here the alignment icon and i want this aligned to the middle and now we can see that everything is aligned to the middle very nicely okay now we now we can add some elements to our section so we have two columns section here i'm gonna go ahead and add some elements so i'm gonna go ahead and click inside the first section and i want to use the advanced heading block so with this advanced heading block this is where we're going to put our unique selling proposition or aspirational statement and i believe it was enjoy breakfast lunch and [Music] dessert anytime okay so now that's in there and we can't see that very well so we're going to go ahead and change the color i can change the color using the mini menu up here or i can also change the color to the right here okay so to change it up here this is just a lot quicker for me i'm going to go ahead and click on this color icon here and we're going to change this to white okay so that's white so now we can see this a little bit uh better then the other thing that i want to do is i want to change the size of it as well so right next to it here you can access the topography settings and we'll change the size now if you want to change the size and we're going to do this on the front end as well but we're just going to set things up here and then i'll change it on the front end for the rest of the website you have to give it a font family and the font family that we're going to be using in this specific tutorial is yaseva one it's a really nice font very stylish very nice serif font very elegant but nice and thick so now that we have that and then i want the size to be really big so i'm looking for 65 yeah 65 pixels looks looks really good and then i'm noticing that the spacing between the text here is really large so we want to close that up a little bit so i'm going to set this about two two pixels above the actual there we go about two pixels above the actual size so that looks really good so far so now when we look at this you can see that we can see the text but we can't see it all that well so what i want to do is i want to put an overlay over this image now if you go over here to the right for and we just go ahead and select the row you can select the row by clicking on the image or you can do it here in the list view i'm going to go ahead and select background overlay settings and here you get the chance to be able to make a normal overlay setting so i could just come here and select the color let's say i selected black it's at a thirty percent of opacity i can increase the opacity and now you can see the text is a little bit more prominent but i really don't like using just a color across the board like that i like to be able to sort of tailor it a little bit so that one half is darker and the other side is lighter that way we can see more of the image so what i'm going to do is i'm going to opt for the gradient option and then i'm going to make the first color uh can be i'm going to make the first color white and i'm going to make it transparent so see so it disappears then the second color i'm going to make black let's use this one here okay so now this is dark okay and then what i want to do is i want to change the opacity i want this a little bit darker opacity so we can see more darkness here there we go and then right here it says gradient angle if you move this around you'll notice that the angle changes right so now it right here is now on the right i want it more on the left right and to get it perfectly there on the left there we go so that's more on the left so this side is darker than than this side okay so let's just call let's just make this let's just make this 240. all right that looks really good and then uh the next thing that i want to do is i just want to make sure i'm going to reduce the opacity just a little bit there we go so about 70. and now our we can see our text as well as the beautiful image of the pancakes as well so next we're going to go ahead and add the rest of our text to do that just go ahead and click in the first column here and you can see a plus sign here or if you want just hit the enter key and it'll create a new item space for you we're going to do a slash and i want an advanced heading again and this time this is just going to contain some some dummy text now this is still a heading so i want this to actually be a paragraph and this is what i love about the heading tool that cadence blocks offers i can go ahead and select this and make this into a paragraph right and so now let's go ahead and grab some text and the best way to be able to do that is you can just go to google and do a search for lipsum generator click on that and i'm just going to grab a little bit of text here so this is just some dummy text go back to my page paste that in and then so we can see it i'm going to change the color the color will be white there we go so now we can see that nice and clearly and so far that looks really good now the only thing left to do here is basically to go ahead and add a button so right here at the end of it i'm going to go ahead and click enter forward slash and now i'm going to look for a button so i can do a forward slash and advanced button now i'm using the short the shortcuts to find these items but you can always use the plus sign here or the plus sign here to be able to find the items okay so now we have our button i'm gonna go ahead and configure the button now put some text in see the menu and then i'm going to make the rest of my com my the rest of my customizations over here to the right so over here to the right are the full customizations for this button i'm start at the top and just go straight down so at the very top here i want the alignment to be to the left okay and then we're not going to worry about a link right now we'll do that later the font size is fine and i want the button here the text color to be dark so a little darker i want the background color to be orange and if you want the exact orange it's e e a eight e one zero and that's the exact orange that we're using all right and that looks pretty good um and then now we want to set up the hover color so the hover color so when you hover over the item i want the text to be white and the background color to be that same we can say e a eight and e one zero and then i'm just gonna push this all the way over so it's nice and light there we go okay so now our button is built and our website is actually looking really good right now so now the next thing we're going to do here is i notice that there's a black border around this button i'm going to go ahead and get rid of that so select the button again and right here there is a border option which is right here i'm going to select that border and i'm going to make the transparency zero so there's no more border and then i'm gonna go to the hover option and the hover option i'm going to do the same thing okay now that looks good so now we've completed building out the the back the background we've put in our text and the other thing that we want to do is we want to add a nice divider to this here okay so that we had a nice divider here on the preview so we're going to go ahead and add a nice divider and the way we do that is by selecting the row layout again to the right here select dividers and we're going to select the divider for the bottom so we're already on the bottom and the one we're looking for kind of looks like a fish that looks like a little whale right so here it is right here so we're going to select this one that looks really good and we'll leave that alone for right now because we just want our initial layout for right now and this looks uh really nice i'm gonna go ahead and save this and view the front end and here we are okay so we've created a nice little header area next what we'll need to do is we're gonna go ahead and now configure our the rest of our theme and layout basically we want this to be a transparent header and then we can build out the rest of our home page okay so now since we're building this from scratch typically when you're working on a project or web project there's a lot of steps in front of it that that happens there's wireframes and color palette selections and font selections and so on and typically these are things that you would do in the theme but i wanted to start it off this way so we can get you into building stuff right away and utilizing some of the tools uh there's nothing there's nothing that says you have to start building your website any one way this is just one way of doing it there are multiple ways of doing it but i like doing it this way because now that i can see the image i can actually pull my colors from the image and there's lots of tools and websites where you can plug in an image and it will give you a color palette but i'm going to show you how to do this on the fly alright so what i want to do now from the front end is first i want to do two things i want to select the color and font for my overall website so we don't have to do it anymore and then i also want to select a color palette i want to create a color palette myself so the way we're going to do that and one of the things that cadence the cadence theme allows you to be able to do is you can pick you can create your own palette and the way to do that is you go to customize and under customize we're going to go to general okay and we're going to select colors so here is the global palette of the site and what's great about this is it's very easy to understand how this works if you hover over any one of these colors you can see that the first one is an accent color so this might be a color for your the default color for your buttons and links and then next would be the accent alt which could be a hover color and then this the strongest text so your your your h1 your h2s will have this color uh strong text maybe a bold or your regular text on the website and then here we have medium text and then subtle text and then right here this is a subtle background so you may see this as an accent background on your website and here is the lighter background so this is a lighter touch of a background and this may be used in sidebars and then right here where it says white or off-white this is the actual background of the site so you see all these white areas right here that's what this controls so you can leave this as is and create your own palettes if you want but what we're going to do is uh we're going to actually change this main palette here so that our website is affected and i'm going to start actually from the right side so what i want to do is i want this to be i want this to be a little bit not so uh not so white okay i want it to be a little bit off-white a little bit beige so what i'm going to do is i'm going to select this and i'm just looking at this pancake here right so i'm thinking okay so there's some page colors here and what i'm going to do is i'm just going to select an orange color that looks very close to that and then i'm going to move my cursor until i'm satisfied and i can see it changing right you can see it changing down here on the site so i'm going to i want this to be a very very light beige color almost like that pancake okay so you just keep moving it around until you're until you're happy so that looks that looks pretty good um maybe too much yellow in there all right there we go that looks pretty good there we go okay so i'm happy with that okay and you can you can play around with it yourself on your own just move these around if you wanted to have a little more orange tint to it um i i like it right there okay so it's nice and nice soft beige color so now we're done with that this color here the lighter background i actually want this color to be white okay so we're gonna make this white and white is just six f's that's the hex color for white and then the the accent background is going to be similar to this one but just a little bit darker so i'm just going to go ahead and copy this hex code come here paste in the hex code there and i'm going to make it a little more brown so just just a little bit more okay so now we have our base background color set then the next thing we need to do is we need to change these initial colors now typically your buttons and links will have these colors so i'm going to make this the initial link the same color as the background for the button that i created initially and that was e a 8 e 1 0 okay and then we need a accent color so it's going to be similar to this one but just a little bit lighter right so i'm going to go ahead and select this and i'm going to move it all the way to the light portion of the color spectrum there okay and then everything else i'm going to leave the same i'm happy with these colors here right so these are more my text colors i'm going to leave these alone and i'm going to go ahead and publish that so now if you look over here you'll notice that my links are now the same color as this global palette and you'll notice that my buttons will default to these colors and so now the only other thing that left to do is i want to change the font so i'm going to go back go to typography and the base font that i want to use this is where we can change our fonts the base font that i want to use is montserrat i just love that font it's nice and elegant and very nice presentation on it okay so i'm just going to select at that's what i want i want my font text to be 16 pixels okay and then for headings okay for headings i'm going to make changes to the heading font family and the initial heading the default heading that we're going to be using for us is the yasiva one okay so that's going to be the default heading that comes in all right and we may use some other headings later on but this is all we need for right now just these two settings i'm going to go ahead and publish that and now everything is set so just by default now whenever i add an advanced heading or an h1 tag or a paragraph tag it's going to automatically default to those two fonts that i selected right and then same thing with the colors so now we can go ahead and proceed with building out our transparent header to build our header we're going to go to customize and under the cadence theme options we're going to select header okay and the header that we have for this specific type of website is a transparent header so i'm going to go down here and select transparent header i'm going to enable the transparent header okay so now it is now enabled and you can immediately see that our header is now overlaying our image looks great all right and we want to use we want to set up our logo and everything for the header so i'm going to go here and we're going to toggle this on where it says different logo for transparent header and we're going to select the logo now you should have a logo for um for your site i'm gonna go ahead and include mine in the download in the description below if you want to use that but when you create a logo make sure that you have a logo for the white version so the light version of your logo and a dark version i have see here i have two versions of it so i'm going to select the light version for the transparent header and immediately my logo is in place and then i'm going to get rid of the text here so and click back here right right here it says header design and i'm going to go to down here where we have the header tray we're going to select logo and right here i'm going to go ahead and i'm going to add the dark version of my logo okay and it's asking me if i want to crop i'm going to skip cropping it's fine the way it is okay now what i want what i want to do is i want to get rid of this text so right now the setting says for logo and title we're just going to select logo and that takes care of that takes care of it for the main header and it takes every for the transparent header then i'm going to go ahead and set up my site icon as well so click site icon select icon i'm going to select the logo again select and this time what i'm going to do i'm just going to move this over so that it crops just the cup there and now we have our site icon the site icon is what's going to appear in this area when people are looking at the website all right so now that that's done let's go back take a look at our header go to transparent header and we can see our transparent header is in place and right here we have our navigation but if you notice our navigation you can't really see it so let's go ahead and fix that so i'm going to go here to design where it says navigation colors i'm going to change the initial color of that navigation to our color here from our palette and then right here the hover color i want it to be a little lighter and the active color is also going to be a little lighter okay so now that's that's all nicely set up and then i'm going to go ahead and publish my changes go ahead and save my changes and the header is pretty much ready right so just just one thing to reiterate when you let's get out of this so when you're in here and you go to customize in the cadence cadence theme and you select header you'll notice this tray pops out at the bottom here so this tray allows you to make changes to the sections in the header and also the elements in the header and it comes with a certain number of elements by default so you got html social button search and secondary navigation right so you can make changes to these to these elements so i can select primary navigation for instance and here be able to make changes to the design the spacing and so on right if i wanted to i can select the logo and i can go ahead and make changes to my logo i can also select that specific row right even though this is a transparent heading and i can make changes to whatever options are provided there so it's just important for you to know that once you select header there are additional changes that need to be made here now that we've gone over that let's go ahead and close out and take a look at our site and so far this looks really good now there was a button here in the initial version that we created so we're going to go ahead and add that button now so what i'm going to do is i'm going to go to customize i'm going to go to header now this tray is opened up here i'm going to come here into the tray and i'm going to click on the plus sign when you click on the plus sign you can see all the additional widgets that you can add to your header you can build any had any type of header you want here but i just want this button so i'm going to select the button and immediately places a button there for me and you can see the default color is already set up and everything for me so i want to customize this button so i'm going to go ahead and select the cog customization icon on that specific button which is right here and the first thing i want to do is i want to change the label make a reservation we won't worry about the url right now we'll plug that in later so far this looks good i do want to make some additional changes to this so i'm going to go back here to the design i want this button to actually be a clear button so an outline button and you can do that just when you come over here just select outline it removes all the background and everything i'm going to go here to design and i want a border color of white and the border hover color can be our orange color okay and then we need to add a border so i'm going to go ahead and click on just this single line here and you can see we now have a border going around all right and i have to change these colors now to white and then we want the hover to be orange okay the other thing that we want to do is we want to make this a rounded button so what i want to do is i'm coming here is a border radius and i'm going to type in 100 and now i have a nice rounded button there okay so now when we hover over it we can see that the outline changes color to let us know that it is activated okay and that's it for that button so i'm gonna go ahead and click publish and close this out and now our header is pretty much done our featured area is done now we get to work on the rest of the page okay so now let's build out the rest of the sections of the page so what i want to do i'm going to go back to edit page and the first thing that i'm going to do is now that we've selected our background color to be a lighter beige color we want our divider to be the same color as well so i'm going to select the row here and let's go ahead and open up our layout tree so we can see everything that we're doing so i'm going to select this row i'm going to go to structure settings and i'm going to go to the divider oops no actually not stricter settings excuse me the dividers and so while here at the dividers i want to change this color to match this color so i'm going to select the color there and remember this is our background color here so now all this matches the other thing that i want to do is i want to switch this divider around so i want it to be facing the other way right now it is curving up here to the right i want to occur i want to curve to the left so let's find one that does that here's here it is right here and then i also want this to be a little bit higher so that this curve here is pointing towards that orange button so we go here to divide a height and i'm going to make this 160. so it's a little bit more of a curve that looks a lot better it's more prominent then the other thing that i want to do here is here where it says see the menu i think this could use a very good icon right next to it so i'm going to go to the button select the button click on the button settings and we're going to look for the icon section here which is right here and i want something that looks like a menu so i'm going to say let's see let's look for a document maybe here we go so it looks like a little paper menu there so there is a menu and then we also want that to face uh to be at the beginning so the location needs to be on the left right there all right that looks pretty good okay so now we are practically done with this section now we need to build out the next section here which is the introduction to the we're going to be introducing the restaurants or have a little blurb or a paragraph or something that talks about the restaurant and then the different services that they offer so to do that we're going to create a new row so just go here click on the plus sign we're going to select row layout we want a two column row and [Music] there you go oh sorry that's we inserted into the wrong place so let's go ahead and undo that click undo we don't want that or we can click delete and now it's gone i actually want it here so while my cursor is here click this plus sign row layout two columns and if i remember if we remember the structure settings we want this to mat click on that content max with inherited from theme content max is about 1290 so that everything is lined up really nicely now if we remember we had an image on this side and then all our text was on this side so we're going to go ahead and add an image here and the way we're going to do this image so select the plus sign we're just going to add a regular image from the library looks like from the media library we want this one and select and now the image is in there okay we don't want to mess with any of these settings at all what we're going to do though is we're going to style this so that we have a nice little border so the image stands out a little bit more the way we're going to do that so if you notice the default image the default image block in gutenberg has very little styling as of now so we're going to lean on the row layout and the section layout for cadence blocks provides that's why we're using the cadence blocks row editor i mean roadblock so what we want to do open up your tree here and we'll find that image here it is okay and i'm going to go ahead and click on section right there and then to the right here we're going to do a couple of things first we're going to give it a border color of white we go then the next thing that we're going to do is going to give it a border width of 15. and we want that all the way across or all the way around rather all right and you can see it's really really subtle about it but you'll see what we're doing we're going to leave border radius alone and we're going to turn on box shadow now remember we're editing the section so inside of the row there is a section and then there's the image so we're editing the section so make sure you have the selection selected now that we've put that toggle down the box shadow you can see there's a nice subtle shadow around there i want it to be a little bit more prominent so i'm going to increase this to 24 and that looks good that's good enough for me so we're going to leave that alone and now that's done then the next thing we need to do is we need to put some text here so the text that we had here we had a we had a little bit of text oh some small text and then large text so first we're going to start with the small text and that text actually had a divider right next to it okay so what we're going to do is we're going to create another row layout so we're going to add two columns here inside of this one column okay and so just watch what i do i'm going to click the plus sign click row layout we're going to select two rows here in the first row we're going to put a separator so we can type in here a spacer divider and this is the one that we want to use so not this one we want to use this one so select that now that we've selected it let's go ahead and configure this so i'm going here to the right okay i'm going to change the height to the lowest that it can go right there so it's about six it won't do any lower than that then the next thing that we want to do here is we're going to set the alignment to be all the way to the left the divider style will be solid and the divider color will be this color that we have here this orange color ff9200 the divider height we're going to make that a 5 so it's nice and thick and we can see it okay and then the divider with for now we're going to leave that at 80 percent actually let's increase that to 90 so it takes up most of the column and has a little bit of space right there okay and that's all we need to do for the divider in the second column here now remember this is the two columns inside of the main column in here we're going to go ahead and add our advanced heading and we're going to leave this as an advanced heading h2 and we're going to go ahead and type in our mini text right so the mini text is eat let's see here eat and you can put anything you want here this is what i put be served safely okay and then we want this to be small so we're going to select we're going to move over to the right here you can where you can change the text fonts under the typography settings you can do that but i like to do it here because it's like a lot quicker so i'm just going to select here and the font that we're using here is yesiva one so remember you have to set the font here if you want all these additional options to show up in this mini mini editor here if you if you do it here you can just do it directly but you really have to do it here um if you have to set this up to in order to get get all these other like the site look if i take out take this out all those additional settings are now gone right so if i actually put in yesiva 1 now i have transform style subset spacing i have all these things now right so from here what i want to do is i want to change the size here and i want to make this a 16 font size and you can always be looking at it just to make sure that you're happy with the size this is just the size that i choose so 16 font size then the other thing that i want to do here is i want to transform this to be capitalized so that excuse me uppercase this way it's all upper case letters okay so now that i've done this the next thing that i need to do is i need to get this aligned mid center aligned with this row right here okay so i've done that i also want to change the color a little bit so i want it to be sort of a darker brown even darker than that so i'm going to take right there okay that's that's good enough okay so now if you notice if you look at this we can see that the text here the goal here we want to align this text to be centered with the row as much as we can so let's go ahead and update and view this on the front end and see how this looks so this is how this really looks so this is a little bit taller at the top and this is right here at the bottom so we're going to fix that the way we do that go back to the editing okay and i want you to open up your link tree here so that we can select that area correctly and if we move this around we can see where we are this is where we are on the advanced heading this is the section for the advanced heading this is the spatial divider and this is the section and then right above that is the row i'm going to select that row by clicking on it and what i want to do is i want to align everything to the middle on a vertical align everything to the middle so let's do that now it's vertically aligned to the middle i'm going to go ahead and update this and view it again okay so now we can see everything's nicely centered now right everything's nice in the center so now we just need to bring this together so this is shorter and this is floated to the left so i'm gonna go ahead and edit the page again i'm going to come here select it and you see this you see the percentage of the width of the row here 50 and 50 i'm gonna put my cursor right in the middle and i'm just going to drag this all the way as far as it can go so about ten percent for the for one column and ninety percent for the other one okay and now let's take a look at it the other thing i want to make sure is that this is floated to the left so if you select your this heading here we can come here to the alignment and we want to make sure that the text is aligned to the left which it looks like it is i'm going to go ahead and update now and let's view this okay so this looks really really close it's looking really good i want to get this even closer to each other okay so i'm going to go ahead and edit the page again and here's how we're going to do that i'm going to select this heading i'm going to go to spacing and settings and what i want to make sure of is that there are no spaces on the right of this text so i'm going to come here and put a zero there okay and then i'm also going to put i'm going to select the divider as well and i'm just going to make sure that there are no spacing issues anything that's blocking it at all so we have 90 percent so now if i change this to a hundred percent and see if it gets me a little closer there we go and update then we're going to view the page and we see here we're even a lot closer now okay all right so this looks pretty good then the next thing that we need to do is we need to now add our larger text at the bottom okay so edit page we're going to come here now we have to make sure that we're adding it in the right place so make sure that you can see the row when you select it if you can't see it open up the link tree select the last row layout that is there and right here we have this plus sign we're going to add a block that block is going to be the advanced heading and here we're going to type in our text so our [Music] specialty is good food okay now let's increase this as more prominent i'm going to come here to the text we're going to increase the size to 65 whoops actually it's too big let's go with 55. uh sorry we lost that for a minute let's do that again select size will be 55. great then the line height we're just gonna make this about 2 pixels above so 52 and then we can see here we've got a lot of spacing going on but don't worry about that we will fix that so now that we have this here our specialty is good food then the next thing that we need to do is we need to solve the spacing issue so in here where we have this row and you can select that on the link tree here if you want we're going to start bringing everything here together so with this row right here what i'm going to do is i'm going to reduce the padding for that row you can do that here under these spacing settings spacing settings here for this row okay and you can see that here by pat on the padding margin section so we're going to select that and in the padding margin section we're going to go ahead and make this bottom 0 and we're going to leave the top just the way that it is that's fine for now then we're also going to make sure that our heading here doesn't have any spacing at the top so i'm going to come here select that heading go to spacing settings and at the very top i'm going to make sure that the margin is zero and at the top is also zero and you can see now everything is a lot closer i'm gonna update and take a look at my work all right so this is nice and close looks very good now i'm still wanting a little bit of more i still want this to be a lot closer right so this is there's a little bit too much of a gap here so what i'm going to do let's go ahead and edit this page and and what's happening with every row by default and cadence blocks with every row that you have there is a gutter that's a standard gutter or default gutter and it's 30 pixels by default you can reduce this all the way down to 10 pixels if you want or you can have no gutter at all all right but i do want something so we're going to put this down to 10 pixels i'm going to update this now and when you view it you'll notice that everything is nice and close together this is exactly what we want this just creates a really nice presentation here okay then the next thing that we want to do here is we want to just tighten this up a little bit so let's go ahead and edit the page and what i want is a little more spacing so that everything kind of stands on its own so i'm going to select this section right here and if you did notice i'm selecting the entire section i just did that by clicking in that area now if you want to be more granular you can just use the link tree which is very very helpful and making sure you're selecting the right place so i'm going to select this section i'm gonna put some padding around it now if you guys wanna know what padding is padding is any spacing that you put on the inside of an element okay margin is any spacing that you put on the outside of an element so when you see padding and margin what that means is that you are adding spacing either on the inside padding or the outside margin so we want to add it on the inside okay so on the inside of this on the left i want to add about 40 pixels of spacing okay so i'm going to come here to the section and right here where it says padding on the left i'm going to add 40 pixels great so you see how that kind of brings our text a little closer together i'm going to create a little bit more spacing here just to make this text not so smushed together so we'll make this let's make this 58.58 there we go that looks a little a lot better okay so now this looks really good then let's go ahead and add some more text so i'm going to come here again and grab my lorem ipsum go back page and we're going to add an advanced heading the version of advanced heading we want this time is a paragraph which is really awesome capability that this blog has so it makes it very versatile it's one of my favorite blocks and now we have we have this nice text here and we can go ahead and update that and let's just take a look at our work all right so as you can see everything is coming together really nicely right everything's coming together really nice so one of the things that we also want to do is we want to make sure you know this is too close to this we want to create a nice little space some more spacing just a little bit so one of the things you always want to do with your rows is you want to separate your information very well so they can stand on their own so i'm going to go ahead and select that row again the row that we've been working on and what i want to do is i want to increase the padding for that row so i'm going to come here under the padding and margin option and i'm going to increase this to [Music] 120 on the top and we'll also do 1 20 on the bottom and remember you can always adjust this once you're done now when we update this and we take a look at it we can now see that there's nice spacing here so this looks really good now let's go ahead and finish out the rest of this section so what we want to do now is we want to add that a few benefits right so we want to add that we accept phone orders and we also want to add the hours of operation in this very section so let's go ahead and do that next so i'm going to go back to editing the page i'm going to come here and uh you know i still i think this is a little bit too close so let's let's just go ahead and adjust this so that i can be happy i'm going to set this to 60 pixels there we go all right so now what we want to do is we want to add we want to add some benefits here so the two benefits we want to add are that we accept phone order orders and the hours of operation so we're going to do is and right here right after the right after the paragraph that we have here i'm going to hit enter and i'm going to do a forward slash and i want the real layout this is just a shortcut to get to the row layouts i want the row layout again inside of this main column which is why i did it that way we're going to go ahead and select the two column layout and then from here we're going to go ahead and add the elements so the element that we want so just click on the plus sign the element that we want to add in here is going to be the info box block from cadence so i'm going to type info box here it is and this is probably one of the most versatile blocks that cadence has so it has an icon or an image if you want it has a title and text and also the ability to be able to link out so it could be also like a linking blurb if you want so now that we have that then we can go ahead and start configuring it all the configuring options are here at the top for the text and to the right for all the other elements so the first thing that i want to do is i don't want this background so i'm going to go ahead and select this and to the right over here i'm going to go to container settings and where it says container settings container background i'm going to set that to be transparent that's going to take that away it also has a hover effect so i'm going to go to the hover effect and i'm also going to set that to be transparent all right now that we've done that i do want to keep the border that's there and i want that to be a little more prominent so what i'm going to do here is i'm going to darken the border a little bit okay so if i do this whoops actually let's do this actually on the normal because i was doing that on the hover let's do that on the normal so go to container border here and i'm just going to get this a little bit darker i know you can't see it now i'll show you why you can't see it but i do want a darker border so we're going to take a darker border and then back up here where it says border with we're going to set that to 1 and now we can see what we're doing okay so now that we have that laid out i can now go over to the hover version of this and i'm going to make that hover the same color whoops there we go good all right then the next thing we want to do is now we wanted to go ahead and configure this and set this up so i've i'm done with my container settings for now so i'm going to go ahead and close out close that section to close it down and i'm going to go to the media settings this is where we can control the icon so the icon that i want to use here is for this for the fact that people can we accept phone orders so i'm going to go ahead and get rid of that and i'm going to do a search for a phone the icons there's the phone that i want perfect the size is a little big so we're going to cut this down to about 20 pixels and the other thing that i want is uh i want the alignment of this to be to the left okay so we're gonna align everything all the content to the left so now that we've done that if you notice uh you might notice that the even though it lined everything to the left the icon is still kind of floating here in the middle okay and you may be wondering why it is doing that so let's go ahead and investigate if you look here to the right of the icons if we quick scrolling down you'll notice that the icon has some padding and it has some margins going on so i'm going to eliminate this padding set that to zero good you can see that it's floated a little bit better and that's how we want it then the next thing that i'm going to do here is i also notice that there is some margin going on on the left and the right okay so we're going to go ahead and get rid of that margin it's about 15 pixels there and 15 pixels there there it is so now everything is nicely aligned now i can go ahead and configure the rest of the text so we start with the title and this one you just edit up directly so i'm gonna go here hit the title and i'm gonna type in that we accept phone orders all right and i want this text to be formatted a little bit different so let's go ahead and close media settings and go to title settings now for this particular title i actually want a different font so what we're going to do here first we're going to reduce the size to 18 then we are also going to transform the text to be all uppercase like that perfect and then we're going to change the font family here we want montserrat we want the font way to be heavy so we're going to put this at 700 and i still want the font to be a little bit smaller so maybe 18 is too big let's cut this down to 14. good so it fits right in the box there that looks good then the next thing that i also want to do with this one is i want to change the color so i want the title color to be uh the darker brown kind of like this dark brown that we have here so i can go ahead and grab this heading color and then go back my title settings title color and we'll paste that in there now that's looking really good so now with the text we're going to put in our pick up times okay i'll pick up phone numbers excuse me okay and our benefits section is now done uh our bet our first first benefit is completed now i want to do hours of operation and it's going to look exactly the same and the best way to do this so that we don't have to re go through that process is just to go ahead and copy this so i'm going to go ahead and select this item here okay so select this item here i'm going to come here we're going to click on copy so we've copied the info box i'm going to click into the next column we're going to select the paragraph and i'm going to do a control v to paste okay or command v if you're using a mac now we have a duplicate of it and it's perfect now we can just go ahead and change the elements that we want so this is going to be our hours of operation so i'm going to come here to media settings so i can change that icon to a more appropriate icon and we're going to look for a clock okay so here's our clock and we're going to change the text here to hours of operation and then we'll put in our hours all right and now that's done so the only thing left to do is to kind of bring this a little bit closer together so we have some padding going on here so i'm going to open up my editing tree and i'm going to look for these info boxes so here they are right here at the very bottom and i want the outermost row so this is the row layout the very next row layout thanks to them and then i come in here go to my padding and margin and i'm going to set the top to zero and zero at the bottom all right so now this looks really good let's go ahead and take a look at it on the front end and our benefits have been added so this looks really nice so then the last thing that we need to do is we need to add a call to action button here that says to reserve a table okay so edit page and instead of us creating a whole button from scratch i'm gonna go ahead and grab this button so i'm gonna click here click the ellipses the three buttons there copy come here and i want this to be outside of that row so you can see a plus sign right here click add paragraph command v or control v there's our button and then we can go ahead and change our text reserve a table so it's good to have calls to action sprinkled throughout your pages so that people can take action at any time at any point of the page and then we're going to also change this icon for this button so i'm going to come here to the right find the icon and i want utensils there we go update view our work and that section is now complete now this is a little bit too close to that row up there so let's go ahead and change that edit select our button go to container margin and at the very top let's add 25 pixels check our work and now that looks appropriate looks good all right so that completes the creation of this section next we're going to go ahead and create the offering section so the offering section is where we put in that well you know what kind of what kind of food is served at this restaurant so we have breakfast lunch and desserts and that's going to be really easy to do we're just going to create three columns below this and go ahead and populate those columns with info boxes that have the images that are going to represent the breakfast the lunch and the desserts so let's go ahead and do that all right so let's go back to the page and what we're going to do now is going to add a new row you can do that with the plus sign over here or if you want to open up your link layout tree and you want to make sure that you're on the last one here so you can see where all the insertion points are so we're going to go ahead and do that here i'm going to add a plus sign i want the row layout and this time i want a three column row and then from here i'm going to go to structure settings and i want this to the max width to be inherited from the theme so i'm going to toggle that on and now we have our three rows ready for us to add the breakfast lunch and dinner sections so first thing we're gonna do gonna click on the plus sign here and i am looking for the info box here's an info box right there this is what we're going to use to be able to create this so select your info box to the right go to container settings and just like we did last time we're going to set this container background to be transparent so that we don't see it we're also going to set the border background to be transparent so that there's no border as well and we're going to make sure to do this for the normal and the hover because there is a hover effect with the info box that comes with cadence okay so luckily we can customize every part of this then the next thing that we need to do is we need an image and we'll leave the title there and some content and then there is also going to be a button so let's go ahead and create the first one and then we'll just duplicate this across the other two so first thing i want to do i want the media settings here so i'm completely done here with the container settings i can close that out and we're going to go here to the media settings under media settings i'm going to change this from an icon from it being an icon to an image so there's an image option here we're going to select the image that we want this is for breakfast so we're going to select this nice stack of pancakes let's go ahead and add an old text to that here we go so here's our nice stack of pancakes right there and then for the title we're just going to go ahead and type in breakfast we're going to leave the we're going to leave this text here this is just fine and the other thing is we want to just create some separation here with this with this image so i'm going to go to the actual media file here and right here you can have some image you can actually make some image changes to the image so one thing i want to add is i want to add a border so just a nice subtle border we're going to make this a 10 pixel border here and the see here image border and then the thing we want to do we want to change the color of the border to white okay and i'm seeing that there's some if you hover over you can see there's some padding here there's also a hover effect on this so now that i've changed that we're going to go to hover change the hover to white as well so that it doesn't show any hovering then the other thing we want to do is we want to get rid of the margin around the media right so there's some media padding and with social media it's immediate margin so i'm gonna get rid of all of that so right here set that to zero so that it's flush against that border and set the margin to zero so we can get a fuller image okay and this looks pretty good then the next thing that we want to do is we also want to add a button here so i'm going to close this media settings and we're going to click on the learn more settings so when you click on that it's going to have you have the option to toggle it on or off i'm going to toggle it on and you can see now there's a learn more button here right so go ahead and click on the button and we're going to change this to breakfast menu this is where we're going to link to the breakfast menu okay so that looks good now we need to add some color to the background and everything so right here the text color we're going to leave that as dark so i want this uh dark the or black the background is going to be our normal background here that matches all our other colors sorry select the first one and the we're going to set the same thing for the hover and so on the border color we do not want to border so we're going to set that to zero the hover so when you hover over the menu we want the text to turn white but we also want the background to be a little lighter and we do not want a hoverboard border so we turn that off okay so far that looks good and let's go back to normal settings here okay great and then the other thing that we want to do is we want to create a little bit of space so it's it's a little bit too flush with the text here so what i'm going to do is i'm going to scroll down and here where we have some margin i'm going to increase that margin to 20 pixel on the top so now that creates a nice some nice spacing right there and then on the padding i do want this to be a little bit of a wider button so on the right i'm going to make this 12 pixels excuse me let's make it 16 pixels and then on the left we'll add another 16 pixels and that looks pretty good maybe we can also increase this top padding and bottom padding just double that up okay that looks good it looks like a pretty nice uh button there so now that we've done this um now that we've done this next thing that we need to do now is we need to duplicate this for the other ones so what i'm going to do is i'm going to go ahead and just select this entire box here just like that and the entire container and i'm going to click on the options these three dots here options copy so now it's copied i'm going to come here and i'm going to select a paragraph and what this allows me to do is i can just use command v or control v if you're using a pc and i can replicate this in here so i'm going to press command v on my keyboard and then just repeat the part the process again paragraph command v and now we have all the breakfast menus here okay now i'm noticing that my styling didn't carry through so and that is fine we'll just style these again ourselves so uh actually let's let's do a reversal on the styling because i'm you know this is a lot of a lot of orange going on so we're going to reverse the styling a little bit so what i'm going to do let me go back to this first one and we're going to go to the learn more settings and what i want to do is on the normal one i want this to be an outline and i want when you hover over it then it fills out so on the normal portion of this we're going to leave the text color as um black or maybe let's just make it darker so what i'm going to do is just make it this dark brown kind of similar to this here right so dark brown and what we will do there is on the background we're actually going to make the background transparent just like that we're going to make the border we're going to bring that back and we're going to give it that same dark brown color as the other one here we go that looks good and with the border here we're just going to set this to one okay so now that looks really good now let's see what happens when we hover so if you hover over it you notice it fills out okay and we want to have the same setup for each one here so what i'm going to do is i'm going to click on you see here where it says copy and paste styles i'm going to click on this copy styles move over to the next one hit the sorry hit the uh copy paste styles again but this time i want to select paste styles and you notice it does the same thing for the other ones pay styles so now everything's matched up really well now all we need to do is just change the text so here i want this to be lunch and i want this to be dessert okay and then here we're going to change this to desserts menu and here we're going to change this to the lunch menu okay so now we need to change the images to match okay so go ahead and select each so we'll select one in the middle for lunch we're going to go to media settings we're going to look for edit image and we're going to find a mid image that better represents a lunch like a chicken burger or chicken sandwich here we go add that and then something for our dessert now you don't have to go here to to do this each time media settings you can actually do it right here see the shortcut edit media just click there right and then we're going to select these cupcakes our center section is now completed and this looks really nice so we're gonna go ahead and update save our work and then let's go ahead and view the page and we can see now that we now have breakfast lunch and dessert already set up next we're gonna go ahead and create the featured menu that's gonna go right below this section let's do that now so this next section is going to feature the specials and the mini menu that we had on the other one so the tab menu that featured the breakfast lunch and dinner so go ahead and click on edit to edit the page and we're going to scroll all the way down and we're going to begin a whole new block a whole new row so we're going to start with the title and text and then below that we'll have the menu items so i'm going to click on this plus sign right here and i want a new row layout and this rule layout will only have in this case we only want one row with one column i'm going to go to the structure settings here and i'm going to make this a little bit more narrow than usual so normally i would select the max width from the theme but in this case i actually want something more narrow because we're just going to be using this for a title so i'm going to set this at 650 pixels so it's nice and and together like that maybe a little bit maybe a little bit wider so let's go 700 pixels there we go and then uh with this row here we're gonna create some spacing so i'm gonna go to the padding and margin and i want 80 pixels on the top and 80 pixels on the bottom for now okay great then we're going to put in our text so but before we do that well let's just go ahead and put in our text so i'm going to put in the advanced heading text and our text was our featured specials all right and i want this text to be centered i also want it to be a little bigger so let's go with our 55 font and our 60 height line height and then next we're going to have some text below this okay so write it right here i'm going to hit enter forward slash actually you don't need to hit four slash it's already set up for us for uh text but i like to use the advanced heading instead of regular text so that's why i'm going to do a forward slash and select the advanced heading and then we're going to change this from an h tag to the paragraph tag and i'm going to go ahead and grab some alarm impso and paste that in there all right there we go okay and i want this centered so let's go ahead and center this like that and there's probably a little bit too much text here so i'm just going to get rid of some of it so let's start here and we'll just get rid of some text in the middle there we go that looks better and so this is just dummy text but aesthetically it's got to read right oops do that okay there we go then the other thing is we need one more title here so we need the mini title at the very top that says special menu so what i'm going to do here is i'm going to go ahead and duplicate this and we will call this one special menu and you'll see what we're doing here in a minute so special menu i have a spell and i want this to be very small text so let's go back to our 15 pixel text and i also want this to be capitalized uppercase excuse me uppercase and we're going to change the color to our dark brown like that and now we're going to add a divider at the very top to separate the two sections and it's just going to be a mini divider right so i'm just going to click here and i want the spacing whoops space er from cadence so i'm going to select that and on this one we're going to go ahead and configure this right here on the right so what i want for this divider is i want the divider color to be our orange i want it to be a thicker one so 5 pixels is fine and then the width here we're going to set this to 15 and then i'm just going to drag it above the special menu so that creates some separation for us and then i want them to be a little bit closer so i want the special menu to be a little bit closer to this divider so what i'm going to do here is i'm going to reduce the height of the divider to 10 pixels okay and then the menu item here what i'm going to do with that is i'm going to reduce the line height to 15 and that's just going to bring it a little bit closer and make it nice all right so that looks good i think i want this to be a little more narrow so instead of having the divider with a 15 let's have it at 10 fantastic and now we've created our title section that for which is going to be right above the menu next we're going to create the tabbed menu so let's go ahead and do that now so i'm going to go ahead and click the plus sign again we're going to add a new row and it's going to have one column in this column we're going to go to structure settings and we're going to set it to be the max width of the theme and the content section of the theme so i'm just going to toggle that on and now i have a nice little area here where i can add my information so next we need to add the menu now we had a tabbed menu which means that the menu items are in separate tabs so i'm going to click the plus sign and i'm just going to type in tabs we're going to select the tabs from cadence themes and the tab style that we want to use is this one right here in the middle so select that and you can see immediately gives us three tabs to work with okay so we're going to configure this first tab and we're going to call this one breakfast the second one is lunch and the third one is desserts okay and then to the right here where we have the content settings we're going to start making changes to the to all the information here so here on the background i want the background to be clear so that we're seeing right through it just like that okay the other thing that i want to do is i want everything centered so i'm going to come here and align everything to the center just like that the border color which is this blue color here we're going to change that to this light very light color here actually let's make it actually a darker color so let's go with d d d d d d just like that and the border width here i'm going to set that to one so it's very very light very subtle now we need to change the color of the tabs okay so the ti the tab title color is going to be this darker color which is fine but the title background i want that background to be light colored so just like that so we're going to use from our palette the light color then the title border color is is fine when we go over to the hover we're going to change the hover background to our orange color okay and then our active background will also have that orange color as well and the active color will be a darker color like that so when we hover over these they change color okay now if you notice that there is a border at the bottom of these and i'd like to put a border there so let's go back to our normal and right here it says title border color okay we're going to change this color to a dark brown like that okay and we'll do it all the way across brown active and now you're probably wondering where is the border color for the for the tabs i will show it to you okay so now that this is all set up let's go down and look at the tab title title spacing i think i'm happy with the spacing the fonts is fine icon settings we don't we're not going to do anything there and the container settings here so everything here looks great awesome so let's go ahead and add in the lower tab border there okay so let's reveal this border so we're going to go here to where it says type title with spacing and border scroll down and right here we're going to put a border around this of three pixels okay now we don't want the border to go all the way around like that so i'm going to go ahead and click on the link border here and make this an individualized so we're going to eliminate the top border i'm going to eliminate the right border and we're going to eliminate the left border so now it looks like that and that looks great okay so now our tab our tab is ready for us to start adding content into it okay so i'm going to go ahead and update my work and so now when we navigate through these we can see inside the content there all right so the next thing we're going to do is now start adding our content so we're going to go create a click a plus sign so start with the breakfast create a plus sign here click on sorry click on the plus sign and we're gonna select the row layout and we want to column row so we're gonna have three items on the left and three items on the right and then we're going to replicate that all the way across okay so first we're going to add my favorite type of block which is the info box okay and now that we've added this info box we want all our content left aligned so i'm just going to automatically select the one here that's on the left and then work and then i'm going to start making changes to everything so first thing i'm going to change here is this background and border so we don't want that so we're going to go to container settings and here where it says border width i'm going to set that to 0. and then container radius we're also going to set that to 0 because it's not going to matter container background will be transparent so just delete the one there at the very last field whoops okay and the container border is also going to be transparent all right next we need to set this up so that when you hover over it it doesn't do that um background so go to hover under the container settings and set the hover background transparency to zero i'm gonna leave the hover border on though so with the hover border when somebody hovers over it you can see a little border which is a really good which is a really nice effect okay so uh let's go ahead and add a one pixel border there that way we can kind of see a nice subtle border when you hover awesome now we need to set up the the images so if we go to media settings we don't want this to be an icon we want it to be an actual image okay and we're going to select our image and this is going to be our first uh breakfast item so i'm just going to go ahead and select this one here this is our breakfast and i may use the same picture multiple times just in the interest of the tutorial but of course obviously if you're building this for a real restaurant you'll want to use your own items okay so now i've put that in there you can notice that here because of the preset we have a border and a background white background here we don't want that we want this actually more prominent so what we're going to do is under the image settings here we're going to go to image border and we're going to set that to zero we're going to go to the image border radius and we will also set this to zero okay then next is the image background which is being revealed because of the padding here so we're going to set our padding to zero as well all right and then the media margin is fine that's very fine one thing we don't we do want to do though is we want to adjust this media the image file size so right now it looks like it's at a thumbnail size i see it's at a preset size so the image width here is at 100. let's make this 180 too big 150 145 there we go that looks really good and then i think i do want a border on there so in the image border i'm going to set the border to eight pixels whoops i'm sorry not border i want the border radius so it's back to zero border radius would be 8 pixels there we go so now it looks like a pretty nice menu item there and then you notice that there's some padding going on in this container here so we want to eliminate that padding so i'm going to go here to the container padding and i'm gonna set this to four perfect so now i just need to change the title so we can call this anything we want champions breakfast and then we're gonna add the pricing right next to that and we'll say this is 14 99 if you want to have the champions breakfast so now that we've set that up we need to do something about this title it's a little bit too too big so i'm going to come here and just close up some of these so that we can we can see what we're doing so i'm closing that and i'm also going to close the container settings and now i'm going to open up the title settings so in the title settings what i want the h2 is fine but i want the font size to be smaller so i'm going to make this 20 pixels i also want the color of the text to be this our typical darker color here dark brown okay and now we have we've literally built out our first menu item so what are we gonna do from this point from this point all that's left to do is for us to duplicate the work and we have to duplicate it five times so here's the first one we're gonna grab this and i'm going to click on duplicate do it again duplicate all right and now we have three menu items i'm also going to duplicate it some more duplicate and i can just drag this into the next column here duplicate whoops duplicate there we go and we're going to drag it into the next column and i can just duplicate from here there we go so now we have our breakfast and we'll change the pictures in a minute here but you can kind of see how you can set this up really quickly then you go to lunch there's nothing there desserts there is nothing there so now let's make put some differentiation in our breakfasts menu items so making changes to them is very very easy just select one of these click on changing the image here and this is a breakfast item so we can select maybe have another pancake or a cupcake so let's make this uh let's do these all right add that in there and then we can call this eggs and so i'm just going to go through and make these changes and speed speed through this so i don't waste any of your time but you kind of see how we can make the changes here okay so now that we've set this up now we need to set up our lunch and our desserts right so if we look here these are all empty right now so we just need to take what we've done here and put it in here now what would be really cool is if you could select every single one of these and just duplicate it into the lunch and desserts but that capability is not here yet but that's okay we can it's actually a very simple way to do this very quickly and the way we're going to do that is we're going to do it with groups so first thing we're going to do though is we're going to go into lunch and the lunch tab excuse me and we're going to click on the plus sign we're going to go ahead and add a row layout we want a two column row layout and then we're also going to do the same thing in the desserts tab as well plus sign select the row layout two columns and so now the the stage is set for us and we're going to go into our breakfast here and what we would like to do is we would like to grab this and put it in here and then we can make our changes right so i'm going to go ahead and select the first one here i'm going to hold down the command key on my computer you can if you're using a pc you can use control and i'm going to select the so what i'm going to do is i'm going to select the first item here i'm going to hold down the shift key and i'm going to select the last item here and that selects all the items here that we have and i'm going to turn this into a group so go ahead and click on the three dots right here in the options section and we're going to turn this into a group and now that it's a group that means that this entire thing is its own block right so i'm going to go ahead and open up the options again and this time i'm going to select copy then i'm going to go to the next tab i'm going to click into the first column i'm going to select paragraph and then i'm going to press command v and now we have that in there you can use ctrl v if you're using a pc command v for mac okay and i'm just going to repeat that process do it do it again in here paragraph paste okay go into desserts do the same thing paragraph paste and paragraph paste all right and then all we need to do now is go into each one of these and change change this so that's not the same thing right so we're going to change the lunch into lunch items we're going to change the desserts into dessert items and i'm going to speed through this i just want to show you how to be able to do that by using a group copy to get the other items in there and then i'm just going to go ahead and speed through this so that we don't waste your time and now we are done making our changes so we now have our mini menu here now the only thing i need to do now is just work on some spacing so we have a lot of space between uh between this block and this block so what i'm going to do is i'm going to minimize the spacing here and i can just do that by just dragging this up here nice and easy and on this side here we have some spacing here i'm going to pull that up a little closer and that's just about enough and so now we are done i'm going to go ahead and save my work and view the page and as we can see now we now have some really good sections going here so we have our featured specials we've got our lunch items our offerings our specialty introduction and our heading our featured header area which looks really nice so if you look here now you notice that these are all kind of squished together and that's one of the things with them so one of the things with gutenberg is you're making changes on the back end it's not exactly the same when you see it on the front end so it's always good to check and then go back and make changes so let's go ahead and put some spacing between these menu items all right so to do that just come here select the the first item i'll select this one okay and we're gonna go to container settings and right here on the bottom we're gonna give a bottom margin of 20 pixels all right and that should give us some margin and do the same here container settings margin 20 pixels and i'm gonna go ahead and do this throughout that throughout the rest and just speed through this so that it doesn't waste any time okay now that i've completed all those changes if we go ahead and take a look now this should look a lot better now the other thing that i noticed as well that our spacing is still a little bit too close so let's go ahead and create some spacing here between the two so i'm going to go ahead and increase this to 120 because i like to have a lot of space so a lot of a lot of white space between items so this is a completely different section from this section so it's always good to have some good white space between the two now that we've done that click update view the page and this is looking a heck of a lot better so there we go we have some nice spacing between all the menu items okay so now that we've done that we can check our lunch breakfast and everything really looks good so next we're going to create the next section which is the opt-in section and then the testimonial section and then we are done with the home page so let's go back to the page and uh we are going to add a block and we want a row block and for this one we want two columns so this is going to be our opt-in section so we want two columns structure setting content max with inherit from theme so that everything is aligned and then for this one i'm going to do a minimum height here and we're going to give this one 750 pixels tall i'm going to select that this row right here so we can see everything and i want to align this to the middle it's perfect then we need to add an image back here so we're going to go to our background settings select an image and the image that we want is this cupcake image here okay and then now we need to add some text and we need the opt-in form right here on the right okay so first click in the first column we want an advanced heading and for that heading we're going to say join the clifton [Music] cafe club so this is going to be our mini text let's go ahead and change the color so we can see it so we want this to be white and then let's make some changes here to the topography settings so the first thing we want to do we want this to be all uppercase we want the size to be 18. and now that looks really good okay next we're going to add another heading here so advanced heading this is going to say get 20 off your next meal so this is the the offer that we're giving for people to go ahead and put in their email and address and join our mailing list and we're offering them free dessert as well every month okay so let's go ahead and format this i'm going to go ahead and select this heading click on the color i want this to be white typography settings okay on this one we want this to be bigger so make this 55 pixels i'm going to give it a height of line height of 60 so everything looks close together there the other thing that i'm going to do here is i'm going to create some padding in this section so to do that let's open up our layout tree i'm going to find our section right here and what i want to do is here on the right i'm going to go to the padding settings over here and on the left side excuse me on the right side i'm going to give this 40 pixels awesome the other thing i want to do is i want to highlight the benefits so i'm going to highlight the 20 off by selecting it or highlighting it with my mouse and then i'm going to hit this little arrow right here for the more on the options key and i'm going to select highlight and that's going to give it an orange highlight there and then i'm also going to do the same thing for the free dessert so 20 off and free dessert highlight okay so so far this looks uh really good now the thing is i notice that the orange here is a little bit off so i want to use the other color for for our highlight so i'm going to go ahead and select the text over here to the right highlight settings i'm going to click on the highlight color and we're going to lighten that up a little bit so that looks a lot better awesome then we just need one more piece of text i'm going to hit enter and we're going to add an advanced heading again and we're just going to let people know that there are terms and conditions so terms and conditions apply okay we're going to go ahead and lighten this up so we can see it and then on the typography settings we're going to make this a little bit smaller than all the other texts so 14 pixels is small enough perfect okay and now that looks good i may want to bring this a little bit closer so i'm going to select this i'm going to go to spacing settings and on the bottom padding 0 and on the bottom margin zero and that brings that a lot closer okay so this is now looking great the other thing that i want to do is i want to create a bit of an overlay so i'm going to select the outside row here we're going to go to background overlay settings i'm going to select gradient we're going to leave this color transparent but the second color i want that to be dark so the black color is fine okay and then we're going to increase this overlay opacity right here we'll make that black and then on this one let's make this one white so let's say i have to add a color so make this white and then we will create transparency there bring this all the way dark so that we can see where our gradient is and then what i'm going to do is i'm going to change the angle okay so i'm going to put in 90 degrees so it's on the left side closer to where the text is so that we can clearly see the text and then it fades out so we can see the desert on the right hand side now we need to create our form and cadence blocks does come with a default form that's actually pretty powerful but before doing that we're going to go ahead and add some text above the form giving people instructions on what to do so i'm going to go ahead and click on the column there we want an advanced heading and the version of the advanced heading that we want is a paragraph version and then i'm going to go to the topography settings here and i want the okay so you notice here there's no option for me to change the weights because i want this to be a little bit bold so what i'm going to do is i'm going to come in here and i'm going to type in the actual font that we want montserrat and now all those options show up and i want this to be bold just like that it's perfect and that looks good next we're going to go ahead and add our form so i'm going to hit enter and hit the plus sign here we're going to look for just type in form here's the cadence form selected and it immediately populates a form for us with the customization options to the right so we're going to start customizing this so the first thing is we're not going to need this one because this is an opt-in form but we are going to need the name field and the email fill and the submit field so let's go ahead and start customizing this now so i'm going to go ahead and select this one over here to the right i can go ahead and make changes to it so the field type is text field name is field label is name and that is fine placeholder we're going to leave some instructions here we're going to say enter your name okay and then the column width for this one i want this column width to be fifty percent so i want it to be uh short then i'm going to select the next one here and i'm going to do the same thing email enter your email for the placeholder text and i'm going to also make this 50 so that it's aligned side by side just like that okay so far that looks good now we can't see this label because it's dark so we're going to change that as well so i'm going to go down here to label styles the label color is going to be white and that looks good so far now we're going to work on the button so the button what i want for this button first thing is i want to change the text so i want the text to say something different so we're going to select the button here let's close this down and let's close that and let's close label styles great so here's button styles right here and so what i want with this button is one i want it to be a full width button so it stretches all the way across the text color is going to be dark for black all right and then i'm going to click on the button here we're going to change this to join you can say join now with exclamation mark okay and then here we're going to make this text bold and that's our opt-in looks pretty nice okay so the next thing that we're going to do here is we're going to add some style to this background row by adding dividers okay so we want to match the kind of dividers that we have all the way up here and we want to kind of create a really nice effect so i'm going to select the row the main row and i'm going to go here to dividers and the divider that we want is sort of that wavy wavy divider and here's the one we're going to use so we have this one for the uh bottom actually no that's not the one we want this is doing one we want for the bottom and then when you go to the top we're gonna have an opposing one that looks just as good here it is awesome now we need to change the color to match the color of the website so i'm going to go to divider color we want this outer color here and then for the bottom divider we're going to do the same thing and there you have it now our opt-in section is complete i'm gonna go ahead and hit update and we're going to view our page and if we scroll down we have this really nice opt-in section so now all that remains is for us to create our testimonial section okay so to do that edit page scroll down we're going to add a new row actually you know one really cool thing we could do we can actually go to the design library and under these startup packs here let's look for a testimonial and see if there's one that's available so here's this one this looks really nice so i'm going to select this one and so just like that you now have your testimonials in place you can add additional ones if you want but we're just going to stick with two for for right now this is great so all we need to do is just make a couple of changes the first thing i'm going to do here is i'm just going to change this text to kind words and we'll change this to testimonials i also want this to be bigger to match all the other large text that we have on the site so i'm going to come here i'm going to add 55 and we'll do 67 for spacing whoops that was probably too much 60. there we go and then i'd like to change the color of this to our usual dark brown right there that looks really good and then i also want to add a divider at the top just for aesthetics so we're going to go here and let's copy this particular divider copy that and scroll back down and anywhere here just go ahead and get a paragraph going and command view or control control v or command v and then start moving this up until it's where you want it which is right there and now this looks good and believe it or not we're done we're just going to change this title here to diner and change this one to diner as well all right and just like that we have completed the homepage and this looks really good i'm going to go ahead and save my changes now there's one more thing that i want to do and that has to do with the footer so i want to add a little bit of styling here to the to this page and to this row so that the footer can match what we're going to do next so what i'm going to do is i'm going to select this let's see here let's select this row right here this will do i'm going to extend this i'm just going to drag this to about let's say 240 and you'll see why here in a moment there we go then i'm going to go to dividers and this time i'm going to create a divider on the bottom and we're going to give this one a different color that's going to match our footer okay so let's find one that we like i like this one and we're going to give this one a height of 160. okay so it's nice and prominent and then we're gonna give it a color and this color we're gonna use a darker color here so this is a good color right here and i'm gonna go ahead and update this and then we're going to view the page and you'll see why we did this in a moment so now our page is pretty much done this looks really good for our restaurant website now i just need to change the color here of the bottom footer so to do that just go to customize and we're going to go to footer click on copyright and i'm going to get rid of this theme credit here and um let's see here just make sure that everything here looks good so we can see it there we go so and then we need to do some design changes right so the design change that we're going to make is that we want our link color actually our font color to be light and then we also want the color of the background here to be the same color as what we have here so to do that just select that bottom row of the footer now we could add widgets to this and so on we're not going to do this in this tutorial but you can certainly do that but i'm just let's select this bottom row and under the bottom row we're going to go to design and we're looking for the bottom row background which is this right here i'm going to select that and we're going to match it to the same color right here okay that looks really good and this copyright let's add let's add add our agency name to this copyright so i'm just gonna do a block there and we're gonna say clifton wp all right and actually let's make it more official sci-fi there we go publish and we're pretty much done with the home page this looks awesome so if you followed along you've successfully created a really nice home page for a restaurant the next thing that we're going to do now is we're just going to build out our menu page where we're going to put our breakfast lunch and dessert items on it we're going to build out our reservations page and we are pretty much done okay so let's go ahead and do that really quickly so creating our internal page is going to be going to happen very quickly so the first thing that we want to do though is we do want to take some assets from this home page we created and it will just speed up our workflow and you'll see what i mean so one thing that i do want to grab from here is i want to grab this uh hero area here that we have this is going to serve as the foundation for the page headers for the internal pages and we're only really creating two pages which is the menu page and the make a reservation page so let's go ahead and do that so first we're going to go to edit page and what we want to do once we get here is we want to convert this to a what's called a reusable block in gutenberg a reusable block is just basically a section or group of blocks that you can save for use on other pages so to be able to do that i'm just go ahead go ahead and grab this grab this here this row just click on this row and what i'm going to do is i'm going to click on the options here and i'm going to click here to say add to reusable blocks and we're going to give this a name and let's just call let's just call this page hero area okay so this is now our reusable block i'm gonna go ahead and save that okay so that's now saved in our usable blog that means that i can go to any other page and i can quickly just select a reusable block called page hero area and this entire thing will show up for me now let's grab a couple of these we're going to create the menu page right so let's grab some menu items and save that as a reusable block matter of fact right here i'm actually going to select the entire tab section here that i've created here so i want the uh i want this whole row i'm going to select that and i'm going to do the same thing i'm going to call add to reusable blocks and we're going to call this one our menu actually let's just call it food menu row and we're going to save that as well all right so then let's just go ahead and update this page so we can retain all our changes here and now we're going to go ahead and create a page so first we're going to go back to our dashboard here i'm going to click on add new and we're going to create a new page called menu okay and then let's set up the page so that it flows like the rest of our website so i'm going to go over here to the page settings and i'm going to select that i want to disable the page title i want a full width page unboxed on the content style and i'm going to disable the vertical padding now that i've done that i'm going to click publish save my work and now i can start building out my menu page okay all right so to begin i'm going to click on the plus sign here or you could click on the plus sign here all right and we're going to select the reusable tab here and you can see our visual blocks right here okay so i want the page hero section i'm going to click on that and you see that's not pasted in here now i can go ahead and start making changes now here's the thing to keep in mind about reusable blocks whenever you use a reusable block if you make any change here it will change it across the website anywhere that this block is used so it's very important to keep note of that so all the reusable blocks that you create are linked to each other so the first thing we need to do is we need to unlink these blocks okay so that when i make changes here it doesn't make any changes to the home page so the way to be able to do that is make sure that the block is selected okay so i can see right here that it's selected if it's if it's not you can look down here where it says page hero area you can click on that and it will select the entire thing and the way you'll know is you'll see the name of the reusable block here if i just selected a block say like i've selected this uh heading block now so you can kind of see that or if i've selected the row for instance selecting the row is very different from selecting the reusable block so i want to make sure that i selected page here area and then it looks like this you click on this icon here where it says convert to regular blocks and once you click on that it then releases it from the reusable block links and now you can make changes here without affecting any other changes across the rest of the website so now that i've done that now i'm free to go ahead and make my changes so the first change i want to do is i want to change this background so i'm going to select the row i'm going to go to row layout i'm going to go to this block settings and i'm going to click on the background settings and we're going to edit the image and we're going to use a different image for the menu okay so we're going to select this image right here and now we have a new a new background this looks pretty good then the next thing that i want to do is i also want to change the text right so i want this to actually say menu and you can leave some text here if you want to have something to say about your menu i do not so i'm just going to go ahead and remove that and i'm also going to remove the button okay so i just have the menu then the other thing is i need to adjust this it's a little bit too tall for an internal page so i'm going to go to structure set excuse me structure settings another structure settings oops there we go structure settings and here was i have the minimum height i'm going to go ahead and change that here to 200 oops let's make that's 400 pixels is just fine or you know what let's actually make it 500 pixels that way we can see the plate and everything all right so this is actually you know what uh we have to consider that our our uh our header is actually gonna overlay a part of this so i'm gonna go ahead and change this to [Music] let's change this to 750 pixels okay great then the next thing that we need to do is we need to add our menu items okay so the menu items that we're going to add if we remember we actually created a reusable block for our menu items and you'll see the reason why i did that okay so but first let's create a section here where those many items are going to go we're going to have breakfast lunch and desserts so i'm going to go ahead and add a new row layout and that the first row layout i'm going to add is going to have just one row we're going to go to our structure settings and for this area right here i'm just going to set this up to be a content width of let's say 600 pixels that's fine then i'm going to click inside of the plus sign here i'm going to select an advanced heading and we're going to just type breakfast okay i'm going to go ahead and center this and let's make the text a little bit bigger so that here size is going to be 55 and we'll make the line height 60. actually i think this is a little bit too big so let's let's cut this down a bit too let's make it 44 pixels there we go all right so now we have our breakfast heading now we need to add our breakfast items and the way i'm going to do this to save time is i'm going to use in a reusable block so the way you do that is you basically go up here to the plus sign go back to reusable and this time we want the food menu row to be pulled in so once i click on that you can see here now that we have the food menu row pulled in now remember again the same thing this is a reusable block so if i make any changes here it will make changes to the uh to the menu on the homepage and i don't want to do that so what i want to do here is i'm just going to unlock this and turn this into regular blocks this way i can do things with it all right so now that i've done that now i'm gonna take a couple of steps here the first thing is i'm gonna grab my breakfast item here i'm going to go ahead and duplicate this and then i'm going to shift it down below that one and then i'm going to make a duplicate of the menu item here menu menu row and i'm going to shift that below so it kind of looks like i'm replicating each section and that's exactly what i'm doing because i'm going to convert these into their respective menu items so i'm going to duplicate duplicate the heading again shift it down and we're going to duplicate this heading i mean this section the menu section there it is and i'm going to shift it down okay so now we should have three sections that are duplicates of each other so one two three sections okay awesome now we need to make changes so the first thing is i want this to be list format meaning i don't want breakfast lunch and desserts in all of these i really just want the breakfast for breakfast and then lunch under lunch and so on so let's work on the breakfast one first so what we want to do here is in the breakfast section here this is the breakfast tab this is a tab section if i click inside the tabs you can see here in here we have these menu items all i'm going to do is i'm going to pull this menu item outside of this tab and the way you do that is just make sure you've selected the entire row come here to this drag icon and we're just going to drag this straight up until we see the line and then i'm gonna drop it there okay so there it is this is our breakfast and now that i've done that i can come back here into the tab this tab section right here and i'm just going to delete this and remove block okay so now our breakfast is separated out under the breakfast tab then i'm going to come down to this replication of the breakfast and i'm gonna type in lunch and i'm gonna do the same thing i'm gonna go to the lunch tab select the full row and then i'm going to drag it right up and it's out okay saves us a lot of time having to recreate every menu item and then this will be dessert okay and i'm going to select desserts on this menu item make sure i selected the entire row from within tab and i'm just going to pull it up and now that it's out i can go ahead and delete data block and just like that literally that quick we have now created our menu page now what i want to do though is i do want to create some separation here so i'm going to go ahead and select this upper row and i'm just going to drag this out to about 120. i can even just do that for all the other ones so select here drag it out 120. and this one i'm just gonna leave that one's just fine okay that creates plenty of spacing between everybody all right and our menu section is now complete so i'm gonna go ahead and update this and let's take a look at what our menu page looks like view page and here it is okay so this is now our menu page and we can see here our menu page has been added to our menu nice and easy and this looks very nice okay looks very good excellent so now we need to create our reservation page and we're going to go ahead and do that in similar fashion right now okay so to create the reservation page go to new page we will call this page reservations going to set up the page by going to the page settings and we want to disable the title implement a full width content style is unboxed and content vertical padding disabled okay publish all right so now that we've done that now we need to add our elements to the page so the first thing we're going to do here we're going to click on the plus sign we're going to go to reusable block and we're going to use a page hero area reusable block as soon as we pull that in the first thing we want to do is we want to convert this to regular blocks because remember if we start making changes here it will make changes to the original reusable blocks that is linked to so we're going to go ahead and click that to convert to regular blocks so it looks like now it's converted and now we can start making our changes so first thing we're going to do we're going to change this text to reservations we're going to delete this text and we're going to delete the button then the next thing is in the background here of the row we're going to change the background so background settings edit image and we want to use this image here and that looks pretty good already so the next thing we need to do is we need to eliminate some of this uh this height so it's a little too tall so i'm going to go to structure settings and under minimum minimum height change that to 700. okay so what we need to do here is we're going to add a row here and i'm going to select a one column row i'm going to make this row under structure settings we're going to make this row 850 pixels in width okay so not too wide and then we're going to start adding some elements to it so the first element i want to add of course is a heading that gives some instructions which says make a reservation all right and we're going to go ahead and center this align center and we're also going to add one more advanced heading but this heading we're going to transform it to a paragraph and then from in here we're going to paste in some dummy text and we want to center this text so it looks like that and then below here is where we're going to add our uh reservation form now cadence blocks does come with a the free version actually comes with a form but there are some fields that are missing for instance it's just it's a basic contact form we actually want a form that allows to have a date field and a time field because people are going to be making a reservation for what date and time they're going to come and have food so what we're going to do now is we're going to add one more plug-in so this entire time we've been operating with really one plugin in this install we're gonna add one more plugin it's a free plugin that will allow us to be able to create a reservation form very easily so let's go ahead and save our work now and we're gonna go to the dashboard go to plugins add new and i want you to do a search for fluent forms fluent forms okay so here's fluent forms we're going to install this it's completely free there is a pro version of this but the free one that we're going to use here is more than enough to do what we need so now that we've installed fluid forms we're going to go to forms and we're going to click on new form so you can see already comes with some standard forms that we're going to use we're going to use any of these we're going to create a completely blank form so click on create form all right and this is the form uh creation section here okay so on the right here are all the fields that we need and this is the area where we can go ahead and drag in all the fields that we need okay so the first field that we need is a time and date field right so we want to know when are you coming to the restaurant so right here is one of the fields just go ahead and drag it in drag and drop there it is and then we can now go ahead and configure this field so click on the field and we're going to configure this and i want this to be a date field so this is date or time but we're going to do this as a date field and then the date format that we want here is we want just a normal format so which is basically the month day and year so select that and we're going to make this required and that's that's all set okay now we can go back to our input fields by clicking on this tab right here and we're going to select another time and date field and just drop that in actually you can just click on it you don't need to drag it in you click on it and it shows up so here we are so day in time field again we're going to edit this field and for this field we want this to just be time okay and then under the date format at the very bottom here is a time only option select that okay now we need to know how many people are going to be in the party right so i'm going to go back to input fields again and i'm going to select the numeric field just click on it at a populated right right below that and we're going to change this we need the label to say how many people in your party and they can only put numbers in here so there we go and we can do a minimum value so you could say a minimum of two people or one person a maximum of ten people we're just going to leave all that alone okay so this is this is plenty now one of the things that i want you to see here we can actually take this text and make it a placeholder so where we give an instruction so i could say enter the number of people in your party right and let's go ahead and do that for the rest of them here so all of them accept placeholders what time will you be dining all right and please select a date and you'll see why we're doing all this uh once we're done okay awesome so next uh question we're gonna now ask is now we're gonna get their personal details right so i'm gonna go back to input fields and we're now going to add enter name fields so we want the first name and uh last name and we can configure this field as well so here in the name field i can say i don't want i don't want a last name i think first name is more than enough you know what let's get last name too all right and uh so now that that's in there let's also get whoops click the button there so first name last name and then next let's get the email address okay so by the input fields and we're going to select email click on email and then we also want their phone number now you notice that the phone number is grayed out here and that's because this is only offered in the pro version of fluent forms and that's okay we can actually just use a simple text field for this right and go ahead and call it our phone number field so we'll call this phone number we will make this a required field and for the placeholder we'll say enter phone number and we'll give an example so that people know how to format this correctly 99 999 all right and i think that's all we really need right we've got the dates we've got the entering the time how many people in the party name email and phone number that's plenty so we're gonna hit go ahead and save our form okay now you can preview the form here so we look at preview and design so you can see what your form looks like and i'm pretty happy with this with the way that it looks i'm pretty happy with this so all i need all i need to do now is copy this shortcode so you see the shortcode right here you can copy the shortcode and let's exit the let's go ahead and exit the preview so close this out exit the preview and we're going to go back to our page so go to pages go to reservations click on edit and we're back here again okay so now that we're here there's a couple of ways we can add this we could add that short code that we just did or you can just go ahead right here enter and click the plus sign and just search for fluent and there's fluent forms right there click on it select the form we want the reservations form we're going to click update and now we can view the page okay and now our form is right here ready for us for people to be able to make reservations very quickly and easily and you can configure this to be emailed to you or email to someone else or someone on your staff but you're pretty much set now let's make let's do some um some housekeeping so some cleanup work so the first thing i want to do is on this page i don't like how close this is to the footer so i'm going to come over here to this row and i'm just going to increase the size here to about 120 that's usually enough let's update that view the page excellent this looks great the second thing that i want to do is i want to make sure this is responsive right so we've been building out these pages we really haven't been checking on the responsiveness of the pages and also i noticed that right here i can't really see the menu items okay so there's something else that we're going to have to fix so the first thing i want to do is i want to just create some an overlay here so that we can see these many items just fine so i'm going to edit the page click on this row go to background overlay and this time i just want a normal overlay i'm going to make it dark make it dark and the opacity let's reduce this just a little bit to about 50 percent update view all right that looks a little bit better great then the next thing we need to do is we need to make sure this is responsive right so we're going to do some mobile responsive editing go to edit page select the row this is the best way i've found to do mobile responsive editing with gutenberg select the row and if you look here to the right you'll see the different screens so this is what it looks like on a tablet and this is what it looks like on a mobile phone right so based on what it looks like we want to make some changes here so right here i can see that the reservations is kind of smooshed to the side here and on this on the tablet so what i want to do for the tablet layout is i just want the rows to be full width across so collapse the rows i'm going to select that option and now my reservations is clearly able to be seen and then i'm going to scroll down and take a look at how my forms are how everything is showing up and this is showing up just fine and then i must check it out on mobile and i can see here that this looks fine however this is too big so i'm going to select this text and it's already set up for me for for mobile and i'm going to reduce the font size here to 36 the other thing i want to do is i want to align it to the center there we go great so now if i look at this on tablet that looks great if i look at this on desktop that looks awesome update and we are done with that view the page and everything looks good the next thing that i want to do is i want to go to the menu page and i'm going to do the same thing we're going to edit the page now we have a little bit of a darker image here so i don't need to make any changes to this overlay however i do want to see what this looks like on mobile so i'm going to select that item select the row top row so that i can see the screen options click on the tablet and you know this is a this is a small this is a few letter word so this may look fine but i really want it to be uniform with the other pages so i'm just going to go ahead and collapse the road there we go on tablet layout and then if i scroll down here we can see okay we've got these two column layout thing going on and everything's in the middle so we actually don't want this we actually want this to present a little bit better so what we're going to do here is i'm going to go ahead and select the row itself and i'm going to collapse that row as well now that looks a lot better select the row tablet layout we're going to collapse the row and for dessert same thing collapser row so now we look really good on tablet how do we look on mobile devices a mobile phone so i'm going to select the menu item here and i want everything to be uniform so we're going to set this to 36 font i'm going to center it all right and then i also notice let's see here that this looks uh kind of strange all smushed like this so we need to do some mobile uh optimization here okay so to mobile optimize this what we want to do here to make this look look good is we're going to select this let's select the first menu item here and what i want to do i'm going to make sure that i'm i'm on the mobile device option i'm going to center the text i'm going to go to containers not container settings excuse me media settings and i'm going to select the mobile device again and i want this aligned to the top right and i'm going to leave everything else as it is right here and i know we're not seeing the changes happening here but they are happening so now that i've made that change i'm going to select this item again i'm going to come here and i'm going to click on copy styles and i'm just going to click on each image and paste styles click on the image again pay styles i'm going to go through doing this to pretty much every menu item okay so we've made all the changes so how do we know that everything we did worked so let's go ahead and update our page and let's view the page all right and let's take a look at this in mobile view so i'm gonna click on the inspector here go to my mobile view and voila right so everything's kind of nicely aligned here and it all looks really good all right great so let's get out of that and let's go to the home page so here on the home page uh let's do some some quick housekeeping right so one thing that we're going to do we're going to grab this link and click on edit page and right here i'm going to select here and i want to add the link here to the menu right then the other thing is i also want to make sure that this is mobile optimized right so i'm going to click on the screen option here and take a look i'm going to go ahead and collapse this so that that looks pretty good and then i'm just going to move through doing the same thing to all the and that looks great and i like that i like the way that looks that's fine for a tablet and then same thing here right so right here all our rows need to be collapsed so we're going to collapse collapse the row and we'll do it for each tab collapse a row and classroom there we go same thing with our opt-in testimonials has already collapsed and everything looked good okay great now we need to make sure that everything looks good on our mobile device so and click here obviously this is way too big so we're going to change this font size to 36 and we're going to give it a line height of 40. all right and this looks good important thing is that it's readable right so people have to be able to read it on their mobile devices this looks good same thing here we want for mobile 36 and 40. so it's fine that's fine yeah and everything else here just kind of lines up very well so you kind of get the idea right so i'm just going to speed through this and just make sure that everything is lined up correctly okay now everything is now nicely mobile up to right optimized so let's go ahead and update save our information and now let's go ahead and exit this uh let's go back to our desktop view okay great so now that we've done that if we view the page everything should line up very well on our mobile devices right i can go ahead and use my developer tool here and i can see that okay this all looks good now one of the things that you start noticing uh here where the header is there is uh some stuff happening here because we're using a transparent header so there's not enough room between the top here and the bottom here so let's go ahead and fix that go to edit page select that we'll click on the mobile view here and we need to we now know we need to leave enough room or header here so what i'm going to do is i'm going to go to mobile padding and right here on the mobile padding i'm going to add 100 100 pixels to the top update save and now let's exit out of that update let's view the page and let's look at this on mobile all right so you see now we have a little bit more space so this looks good and i think i still think we need a little bit more space so that it makes it looks better so let's go ahead and add some more space so edit page real layout mobile device mobile padding and i'm going to add about 50 more pixels update save and view the actual page there we go and then i like to use my developer tool here chrome developer tool to actually see what it's going to look like on a mobile device and you can see here it looks looks great okay everything is lined up the way it's supposed to be so this looks really really good okay excellent now there's just one more bit of housekeeping that we have to do you see here we have the home menu reservations and you can see the coloring here so initially we set this color to the orange color uh it's probably better if we just make this the highlight color so this strategy should be white not orange so i'm going to go here to customize go to header transparent header and we're going to click on design and you can see our navigation colors here this should actually be white for the transparent header and then the hover and the active color can be orange so we'll publish that and now this looks a lot better all right so now that we've got that got that taken care of there is a few more things that we need to do one is we need to make sure that all these links link to the appropriate places where they're supposed to link right so right now if i click on this it doesn't really go anywhere so what we want to do is let's go ahead and fix that edit the page we'll start with this one here or add our link and we know that this is going to go to the reservations page so i can just type in reservations select that page there and that is done okay that is done and then here we know this should go to the menu page right so what i'm gonna do here is i'm just going to select this and you see here this is where you would put in the menu so we can see the menu page here but i want this to actually link directly to the menu item itself right so what i'm going to do to make that happen is i'm going to create an anchor link and the way you do that is we're going to grab the link to the menu page itself all right and then what i want to do is i'm going to add anchors to these so let's go ahead and click on edit page on the menu page and right here where it says breakfast just select that over here to the right under advanced we're going to type in the anchor breakfast okay breakfast make sure you capitalize the b so breakfast and then we're gonna do the same thing for lunch advanced lunch and then dessert advanced dessert and we're going to update all this okay awesome now we go back to our page here right and now we need to link all this so i'm going to click on the breakfast menu and right here where it has the link we're going to edit this link going to delete delete that so what i want to do is i'm going to actually type in paste in the menu link and if i click on this this is the link that we want so i'm going to grab that link so after i've got the link now i'm going to click on the breakfast here and i'm going to go ahead and paste in the link in the link field here okay for this info box and then i'm gonna type right after i've tape pasted it in breakfast now make sure after you do it you click this submit icon here it's very easy to miss just click on it to make sure that it that it holds then we're going to select lunch paste in the uh the menu link and we're going to type hashtag lunch right after it so menu link plus hashtag luck lunch click the submit arrow there select dessert same thing hashtag dessert and submit all right now that we've done that let's go ahead and click on update view the page and let's test out our links to make sure that they work so if i click on breakfast that takes me right to the breakfast okay awesome if i click on lunch that takes me right to lunch and if i click on dessert that takes me right to desserts okay so it's showing up for me wherever i click and it's really all just happening on the same page using those anchor links and the only thing that we need to do now is we just need to clean this up right because we've got make reservation here and we have reservations here and we have menu here and that's because we haven't set up and identified our original menu so that's the thing that we need to do so the first thing i'm going to grab this link and i'm going to copy this link address for reservations and i'm going to go to customize i'm going to go to header and we're going to go to the button which is over here and i'm going to go ahead and add my link to the reservations there publish and that's great next i want to look at the menus over here and we haven't created a menu so we need to create a a menu right so create create a new menu we're going to call this our primary navigation or you can just call it prior primary nav this is going to be the primary navigation here next and now we can start adding items so i only want to add one item which is the menu page everything else is not really necessary and that's really it publish and now we're done with a nice clean page that links where we need it to link right so menu links to menu make a reservation links to make a reservation and our logo links to the home page alright and that is how you create a completely custom restaurant website from scratch hey if you enjoyed this tutorial and and you liked it please go ahead and give us a good like to the channel so that it can help us with the algorithm and other people can get a chance to see this tutorial and if you haven't subscribed please go ahead and subscribe to the channel um so that you can be notified when we release new videos we're actually going to be making a more advanced version of this starting from this point where we're going to add more complicated forms some shopping capability in there or ordering capability or online ordering capability we're gonna be adding uh to this as well and we can go ahead and expand this and show other things as well so if you haven't subscribed please go ahead and subscribe and thank you again for watching and if you have subscribed thank you for subscribing and i will see you in the next video

Channel: CliftonWP

Views: 1,370

Keywords: wordpress tutorial for beginners 2021, wordpress website 2021, wordpress website tutorial, wordpress tutorial advanced, how to create a website for your business, make a wordpress website for beginners, wordpress tutorial for beginners, how to build a website from scratch, how to build a website for free, wordpress website from scratch, how to build a wordpress website from scratch, how to create a restaurant website for free, kadence blocks tutorial, gutenberg blocks tutorial

Id: huu257mhvbc

Length: 149min 2sec (8942 seconds)

Published: Thu Sep 02 2021