Watch me build a website using Webflow in 1 hour (follow along)

So if you’re new to webflow. This tutorial is designed for you. We’re gon na go step by step, uh, starting from a blank page uh to building a completely fully functioning recipe blog, and let me quickly show you what the final product is. Gon na look like, and you’re, going to have a home page here, which is going to list out the different recipes that are in the back end of your webflow site and you’re going to be able to click into the specific recipe and See the photo and see information that you’re storing about that recipe like ingredients and then the uh description of how to actually uh make the recipe. And then you’re gon na have a navbar here to go back to the home page, and we’re also gon na build in these filtering pages here. So you can click on a specific cuisine of food and see the recipes that fit within that specific cuisine. So this tutorial is for complete beginners. So even if you have no flow experience at all or no web design experience, you’ve never built a website. We’re going to go step by step. I’m going to show you exactly how to do it, so don’t be intimidated and by the end, you’re going to know how to use webflow and how to build a site like this. On your own, so i hope you enjoy the tutorial. So what you need to do is first create a webflow account and it’s going to put you into the dashboard. Yours is going to be empty and then go ahead and click new project on the top right and then once you click new project go ahead and click blank site. We’re not going to use a template in our case, because i want to teach you the fundamentals of web flow from a blank site, and then you can always use that knowledge on a template later on. So i’m just going to name my project recipe site. You can name your project, something similar if you’d like and that’s going to drop you into the web flow designer and the designer might seem a little bit overwhelming at first with all of the different settings and buttons. But i’m going to walk you through what you need to know to build the website. So the first thing that i want to do is go ahead to the top left here to this add element button, and this is where all of the different web flow components are held and what we’re going to do is click on section and that’s going to drop a section into the body. Now, if you have built a website with css and html in the past, this is going to seem familiar and it might be a little bit easier for you to pick up webflow. But even if you haven,’t used css or html in the past, i’m going to walk you through what you need to know. So no worries, if you have no experience with that, webflow basically is a visual designer of css and html code. In fact, if you wanted to actually export your website once you are finished, you can export the code and host that code somewhere else. So webflow is essentially letting you use its tools to visually visually code. Essentially, so in html and css, you’re building using the box model and what a box model means is everything you put on. Your website is boxes within boxes and we’re going to use our styling to make our boxes. You know say and look what we want, how we want them to, and they’re going to be placed on the website, how we want them to you,’ll see what i mean as i keep going um. So first we have this section here at the top, and this is where we’re going to design our main header. So, within this section let’s go ahead and add a heading and a heading is just like it seems it is um. You know big text on your website that’s going to be a heading for a section and let’s give this h1 h1 through 6 is the size of the heading, and now let’s go ahead and add another heading. Let’s drag that right underneath and you can see it’s at the same indentation here right underneath the section which is exactly what we want and we’re going to go ahead and click h3 in this case, which is going to be our Subheading and here let’s just rename or edit the text here and let’s just call it my recipe blog and then under heading um, the best recipes um for you to cook at home perfect. So we’re not going to worry too much about the content here. It’s mostly about the design and understanding how webflow works. So now that we’ve created this structure of a section with a heading two headings within that section. Let’s go over to the styling here on the right side and what we’re going to do is go ahead and add a class and we’re going to name the class section. The reason classes are helpful in web flow is once you create the styling of this class. We can name other sections that same section class and they’re going to automatically take on the same styling, which is going to be really helpful, um for a lot of things in webflow that we create. We’re going to go ahead and add this section. We’re going to give it some padding. Now padding is space inside so here. If we hover, you can see it’s inside the box that those green lines are inside the section box that we just created – and i’m going to take that away. And if i add margin you can see if we hover over, that the blue lines are outside the box, so that’s the difference between margin and padding. So i’m going to go ahead and remove that real quick. So, in our case, what i want to do is add some padding, so let’s go ahead and i’m going to hold option. This is a little trick in webflow. If you hold option and and drag it’s going to automatically add the same padding on the left and right or the top and bottom depending on which side you’re on and if you hold shift it’s going to automatically add padding all The way around and we go ahead and remove that um so shift is on all four sides option or i believe it’s. Alt on a pc is going to be the top and the bottom. So i’m going to go ahead and add 50 pixels of padding on the top on the left and right. I’m going to go ahead and add why don’t, i say, 60 on the top and bottom, and this is going to be our section and then um. What i’m going to do is go ahead and add um a combo class and uh. I’m going to add pop and what a combo class does is. It allows us to add additional styling to our first class without editing that first class. So if we add um a background color here, which is what i’m going to do – go down to the bottom here with background under color, why don’t? I give this like a yellow background that’s a hex code. Hex codes are essentially codes that represent the color that you’re using on your website, and that is going to be a part of that top combo class. So if i create another section later on – and it doesn’t have that um that top combo class it’s going to have the same padding with no background. If i add top it’s going to add in that yellow background or any other styling changes that we want to change like on the top, if we want to add you know 200 padding and make it really long, we can do that. I’m gon na hit um undo to do that. You can undo anything or redo things in webflow, using either the keyboard shortcut, so command z or you can use uh these buttons here to redo and undo. If you make any mistakes. Okay, great! So you’re starting to understand kind of how to start adding content to your website’s home page now. What i want to do is actually add websites to the backend database of our webflow site, and we’re going to do this by using the content management system or the webflow cms, which is where we’re going to hold all of our data and That’s going to be dynamically displayed on our website and the way we do that is we go to the left bar here to this cms button. So we’re going to click cms and we’re going to create our first collection and go ahead and press that and we’re going to use one of webflow’s. Collection templates in this tutorial so go ahead and click recipes and webflow is going to automatically pull in some custom fields that are going to be helpful for our recipe and we can always edit these later. But for now this is going to be great for start. So here we have the name of the recipe. We have an ingredients area, we have a directions area. We have uh recipe, history that might be kind of some background information about the recipe we have the main image. We have the thumbnail image, whether it’s a featured recipe or not, and we have color color is something to edit, like the color of the buttons or the text. If you wanted to, i’m actually going to go ahead and delete that to delete what you want to do is go hit that settings and then just hit that trash can right there perfect. So here let’s go ahead and create the collection and we might add some more fields later on, but for now let’s go ahead and create the collection. We have zero recipes in our collection. Let’s go ahead and add a new recipe. So go ahead to the top right and let’s go ahead and add a recipe. So what i’m going to do is go find a recipe online and we’re going to use that as kind of a template. So that way we have some content to put in all right. So i’m getting a pesto recipe from bonapite com and i’m going to go ahead and enter in the name. It’s going to be called best pesto and let’s go ahead and add in the ingredients, and this is a rich text field and what that means is you can format your text directly in this field, so you can add a plus button. You can add images, you can add bullet points, which is what i’m going to do here and i’m going to go ahead and add in the recipe ingredients. So half a cup of pine nuts, it’s, three ounce parmesan, two garlic cloves. Six: six cups of basil, three fourth cup extra virgin olive oil and sure so that that’s, the ingredients section um for directions. I’m just going to go ahead and copy and paste in the directions from boneapetit com, and i’m going to go ahead and paste that in and here you can see because it’s a rich text field. If you highlight over text, you can see, this is a heading 4 and you can change the sizes if you’d, like as well. So this is a heading 4 Perfect for recipe history. I’m just going to leave that blank for now. I think we’re going to go back and delete that in our case we’re just going to remove the recipe history we can always. You could always add that back yourself, if you’d want later under main image, let’s go ahead and download an image of pesto and what i would recommend is let’s just go to unsplash com and they probably have some pictures here perfect. So i’m going to go ahead and download that and let’s go back to webflow and i’m just going to drag in our main image and i’m going to use the same image for the main image as the thumbnail image. Perfect and we’re just going to leave that unchecked for now, so i’m going to go ahead and and create that and then, like i said, let’s edit and remove that recipe history field. So let’s edit that settings here under recipes um and then let’s go ahead and under recipe history hit that um settings and trash can and delete the recipe. History perfect. So let’s save the collection and let’s go ahead and add a few more recipes. So what i would recommend on your own is go to a recipe website, find a few recipes and go ahead and edit in the enter in the information. So you have some content to work with, so i’m going to go to bonapite com and add in a few more recipes here. One other thing i would recommend is maybe add in um a couple different cuisines. So in my case i’ll. I’ll do a couple italian recipes and then maybe a couple recipes of another cuisine um that’s going to be helpful when we add in our cuisine type later on, which is something we’re going to add to our recipe site. So go ahead and do that i’m going to pause the video and do that myself as well all right, so i’ve gone ahead and added four total recipes. I’ve added two italian into thai recipes and uh. Let’s go back to our home page and now what we’re gon na do is add a element here on the top left and it’s going to be a collection list, and this is kind of the magic of webflow. So we’re going to drag that in and the source is going to be our recipe collection and you can see it’s already pulling in those uh recipes that we’ve added and then within that, let’s go ahead and pull in An image block and let’s just make sure that’s dragged into that collection item. You can see you can see it’s automatically pulling in four images because it’s going to be styling each collection item the exact same way. So we’re going to get that image from recipes and that’s going to be our thumbnail image and wow. You can see um it’s, not styled. So it’s just pulling it in um. Full size actually looks kind of cool, but um. We’re going to style that a little bit. So we have the image and let’s also go ahead and pull in a heading, drag that below the image and why don’t we do an h3 and the text is going to be the name perfect and then let’s go to the Collection list and what we’re going to do. So the collection list is what’s holding in all each item and we’re going to give that a display of grid and as you can see a grid is a really great display. That’s going to automatically um. If we just hit done it, it’s a 2×2 right here, and i think that’s actually not that bad. So let’s go ahead and keep it at a 2×2. And what i want to do is make sure that all of the images are the same size. So what i’m going to do is a little trick here. So, instead of actually having an image block, i’m going to pull in a div. A div is essentially a box in html and i’m going to give that div a background image which is going to be this image. So i’m just going to go ahead and first pull in a link block. The reason we want this to be a link block is because we want to link to this specific recipe, so the link block is going to be here, um in the collection item and then within that link block, we want to pull in a div and just Kind of hover over and you can see we’re, pulling it underneath that link block and now that we’re on this div go to your settings, make sure you’re hovered over this div go to click, get background image from recipes. We’re going to select field and make it a thumbnail image perfect and now let’s go back to our um paint brush here our style and we’re going to edit the width. So, first let’s just make this 400 pixels by 200 pixels. So right off the bat we’re, creating um the size of these images and then go down to our backgrounds and what we’re going to do is hit this plus button and uh. We don’t have to actually add an image because we were already pulling it in from our cms, so you can ignore that. But let’s go ahead and click cover and what cover is going to do is, as you can see it.’s going to make the image basically fill up the whole background, and then what i want to do is position it in the center and the reason i want to do this is, as you can see, um it’s, making the image centered on the Center center of the image, and what that’s doing, you can compare what we had to what we have now so here, for example, we have this really tall image. Now we have this image that’s all the same size as the others, and it’s centered on the middle of the image. So let’s go ahead and click on that image that we had before and let’s just delete it. So now we have this div block, which is really the image. So let’s, click on that right, arrow on the class on the right side and click rename class and what we’re going to do is rename this to food, thumbnail, perfect and then let’s go to its sizing and let’s change The width to uh i was going to do 100, but that didn’t work. Let’s just change it to 500 pixels by 300 pixels and then on this link block. Let’s go ahead and drag in that heading underneath that image. So the heading is all in that link block and in the link block uh, let’s go ahead and remove that in the typography. We want to remove the text decoration and then make the color black. So it’s not that blue, underline and then within the link block, let’s go ahead and give that a display of flex, and this is going to allow us to kind of easily position the items in the box. The way that we want to. So flux and grid are both really helpful. We’re going to use flex here and we want this to be vertical. We want the alignment to be centered and that’s all we want to do so here we can see now everything is centered. The way that we want it to be perfect, and now we should be able to go back to that food thumbnail and make the width a hundred percent, and now it’s going to work the way that we want it to because it’s within That flexbox, you don’t have to worry too much about how for now, but it works. So this is going to give us that nice full width image here. So now we have our collection list wrapper and we have these link blocks with our recipes that we’ve created, and the great thing is, as you add, more recipes to your recipe site. They’re automatic added. They’re automatically going to get added here in this collection list. So uh. One thing i want to do now is go ahead and click that add element. We’re going to add a section here and we’re going to just make sure you drag it to the left, so it’s kind of within that body. Here, if you have trouble, you can always drag it to the top and then kind of drag it back. But here we have this second section: let’s give it a class of section. We don’t want to give it the class of top section. We just want section and then let’s go ahead and drag our collection list wrapper within it. So now the great thing about this is it’s lined up um because it has the exact same padding. So it’s automatically going to add in that padding and the cool thing is: if we change the padding there, it’s going to change it on the top as well. Maybe we’ll add a little bit more, so this is nice. It just gives some nice spacing next, let’s go to our link block here. Why don’t we rename it to recipe, link recipe, link, group and then go to settings here and what we want to do. Is we’re going to choose where we want that link to go so in our pace? We’re going to click collection page and we’re going to choose the current recipe and what that’s going to do is allow us to click into a page that’s going to hold the all the information about the recipe and perfect. So um, what we can do now is where that is. If we go to pages here on the left side, you can see we have our home page and then we have our recipes template now we need to go in and actually create that page and edit. The recipes template so that when you click on the recipe it’s going to put you into this recipe template page. So let’s quickly just add some information here that we’ve created. So let’s add in a section: let’s go ahead and give it that section title label and let’s go ahead and add in a heading and then here let’s get text from name perfect. So we have best pesto and let’s go ahead and add in a div and let’s go ahead and give this in our settings a background image. The way that we did before and we’re going to do the main image here and we’re going to do and let’s go ahead and add a div and then let’s put that heading in the div and then what i Want to do is, go ahead and add another div, and i’m going to just drag that underneath so now we’re going to have these two divs one with the heading and then one div here and we’re going to add an image. I’m just going to drag that in and the image is going to be the main main image here from our thumbnail, perfect um. So we have our uh name and we have the image here: okay, perfect and um. We might not need these uh divs uh, but we’ll see how we decide to kind of design it as we go so um and then in this item let’s go ahead and just see how this looks on others, so perfect, red pesto, pasta And it might look a little cleaner if you upload pictures that are in this kind of more horizontal aspect ratio. So here we go. We have these um, let’s go ahead and add another section below let’s, uh whoops um go ahead and add a section if you need to kind of drag it above and then drag it below. Let’s give this a section class. So it’s going to have all the same settings and let’s go ahead and drag in a rich text field and you need to drag in a rich text field. You can’t drag in a you know, normal heading or paragraph, because the rich text block is, we’re getting text from our directions or ingredients which are rich text, cms fields. So let’s go ahead and pull ingredients all right. So next we’re going to go ahead and add in another section and just drag that below and let’s give this the same section class. So it pulls in all the same. Spacing in that section. Let’s go ahead and give this a heading, so i’m just going to click on heading and that pulled it in underneath and let’s double click on this and write ingredients, whoops misspelled that and then let’s go ahead and pull In a rich text field – and it has to be a rich text field, not a normal paragraph field, because the uh text in the cms is a rich text field in the cms. So we’re going to pull in ingredients. You can see that’s automatically pulled in we’ll style this more later and then let’s just click duplicate that i clicked on that section. I use my keyboard shortcut of command c. If you’re on a pc, i think it’s ctrl c and command v or control v and that’s going to duplicate it. So then let’s just change this to directions, and then here let’s change that to directions perfect. So we have our uh rich text field, we have our heading and we have our ingredients and our directions perfect. So you can see we have our home page and then we have our recipes template perfect. Let’s go back home, let’s go ahead and click publish. So if we click click, publish it’s going to publish this on our webflow url. If you upgrade your plan, you can add a custom domain in webflow and webflow can host it. Let’s go ahead and view our site. So here we go. This is our live site and if we click on one of our links here, it will take us to our recipe page, so sweet spicy, cucumber salad, and here we have our ingredients, and here we have our directions and if we go back, we’re back On the home page and we can click on another recipe um, so even in our case here we’ve already built out kind of the frame for a recipe blog. So we have our home page and you can click and you can browse different recipes. So let’s add a little bit more to our site to make this just a little bit nicer and a little bit more built out all right. So let’s go back to webflow and now i’m going to explain responsive design, and this is something that webflow lets you do really easily. So responsive design is making sure that your website looks good, no matter what device the user is looking at. So here you can see it looks good on the tablet size as we get to the mobile landscape uh, it still pretty much works and then, as we get to our mobile portrait, our mobile phone um, it’s really not working anymore. So it’s kind of breaking, so what we’re going to do to fix that it should be pretty simple. So here we’re in our mobile landscape. Let’s edit this first! So let’s click on a section and what’s happening i can tell. Is there’s too much padding, so it’s not giving enough space for our images here. So all we have to do is go ahead and reduce the padding, because we don’t need as much padding on a smaller screen size. So here now it’s working perfectly fine um one thing that’s really cool about webflow is, if you make changes on a smaller um device size, it’s, going to automatically make the change on every size that’s smaller than that. But if you go to larger sizes, that’s still going to keep the original design that you had so here that helped it on the mobile, but it’s still not really working. What we want is instead of two images per row. We actually want one. So what we want to do is edit this grid, so go to the right side here. Just click edit grid make sure you’re on that grid collection list and then in the columns, just go ahead and delete one of the columns and then hit done, and now it’s automatically creating that one column design that we would be looking for. Here the other thing we want to do is go into our recipe, our recipe link and let’s align to the left, because in this case on one it’s just going to look better if we’re aligning it to the left alright. So i’m back on the main, desktop breakpoint and now what i’m going to do is show you how to edit the design of your headings and headings is kind of a global style. So this h1 h2, h3 h4 586 and you could just add a class like heading or main heading if you wanted um. But what we want to do is is if we click on this heading one and we click on the class, but don’t name. It and then go to all h1 headings. This way we can edit the style of the font and it’s going to affect every place on our site that we have h1 headings. So let’s go ahead and change the font and let’s choose to whichever font you want. I’m going to go ahead and pick one uh. Why don’t we do um, let’s see here, let’s do monsterat and i’m going to make the weight extra bold and i’m going to make the color black perfect and then let’s go here to h3 and Let’s do the same thing: click on all h3 headings and let’s change the font, and here you can see because these uh fonts are also h3. You can see that it is also changing so one on h3, let’s do uh, lotto, um or maybe in in consolata. Let’s do that and then let’s make this black as well. So we have this kind of different font um. I’m just doing this for our use case here perfect and then let’s also change the margin on h3, let’s make it 10 on the top and 5 on the bottom perfect. You can also add more fonts. You can add any google font in the uh project settings of your webflow site, but we’re not going to do that right now, perfect, so we have uh this um, these fonts that were changed and then let’s go to let’s go To that recipe link – and i know we did this on mobile, but i think we should do this on desktop as well. Let’s go ahead and edit the alignment to the left. You know this is just personal preference. Okay. So now, as we go here that’s looking good on every uh device, size perfect and let’s check out that cms collection page. So here we can see uh. That heading was automatically changed, um and then perfect. That heading was changed as well. So the next thing i want to do is let’s edit the um, let’s edit more of the um styles on our site, uh. So, for example, you can see uh. This is a different h, um a different heading, and it still has that um basic style and i’m gon na make that a little bit more custom and then the paragraph here as well. I want to make that a little bit more custom too. So, in order to do that, let’s just go ahead and pull in a rich text field and let’s just drag that in and then, if we click and click on this, it’s a heading 2 and we can click all h2 and We can give that the monserra and let’s give that a black color as well um, let’s do the same. For this heading four, make sure you just click rna and all h4. For this let’s give that the, and you can see that’s changing those steps over there, because it’s that same h4, let’s do in consul in consolata, which is what we did before and give it that black perfect. And then this is the paragraph: let’s click all paragraphs and why don’t we give this latte and let’s make this black as well. One other thing that i want to add is go ahead and click that plus button here make sure you just click an empty space hit return, let’s add a plus, let’s add bullets and let’s just say test test test, and this The list item: let’s, go ahead and click all list items and let’s change that to lotto as well and let’s give that a black color as well, and that’s going to edit those list items there. So this is just kind of how to style those global styles. On your site, like the heading and the paragraphs and the list items, i’m going to go ahead and delete that now perfect, all right, awesome, so cool. So now we have some pretty good. Looking um kind of recipe pages with our um image, we have our ingredients and our directions, and if we go to our home page, we have a pretty good looking homepage. So let’s just edit this uh in this top section, let’s just remove that image um. Why don’t we just the background image. Let’s just make it like a really light gray here: um cool, so just that’s a little bit cleaner. So we just have this light gray, and then we have these images here. So let’s go ahead and click publish and by now, if we go to our site um, we’re going to have a pretty good looking recipe blog. So we can click in. We have the image, we have ingredients and we have directions. The next thing i want to do is add a nav bar here at the top, so go ahead and click the plus button and let’s go ahead and just pull in this nav bar element component – and this is just kind of a pre made nav Bar that webflow has for us in that nav bar, let’s go ahead and click on that. The background color of the nav bar and let’s just make that a dark gray and then in the brand. Let’s go ahead and pull in our heading here and let’s give it a class of brand logo and then what i’m going to do is give it a white color. I’m going to re re name, it top recipes and then let’s give it a different font which is kind of more like a brand logo, changa one perfect and then this nav menu. I’m just going to delete for now, because we don’t have any other pages. We just have our logo here, which we want to take us back to our home page. So in this brand, what we want to do is click on that link. Hit the settings there go to settings here, we want the page, we’re going to choose a page and it’s going to be the home page perfect. So now we have this nav bar. What we want to do is create a symbol, and we’re going to do that by clicking on the symbol here: clicking create new symbol, just click nav bar make sure you’re on the navbar. When you do this, and now we’ve, created this symbol of the navbar. So now, if we go back to our recipes template and we add oops, we go to the symbols tab. We can just drag in the nav bar to the top here. So now anything if we double click – and we edit the nav bar here on this page, it’ll automatically be edited also on the home page. So the symbol is a really helpful, um way to kind of have a repeating element throughout your site. You could do this for the footer. You could do this for a lot of different things on your site. So let’s go back to the home page and perfect. Let’s go ahead and hit publish, so let’s go ahead and go to our site and awesome. So we have our top recipes. We have our recipe blog. If we click in, we have this and if we click back to our top recipes, it’s taking us back to the home page. One thing that’s bothering me a little bit. As i see this isn’t um aligned um. So what i want to do is go back to our webflow designer i’m gon na double click on that nav bar and then what i’m gon na do is take that brand and put it outside that container. I’m just going to delete the container and kind of create our own nav bar and then in the nav bar. I want it to have the same padding as our section so that’s 74 on each side. So this nav bar let’s double click, let’s click and do 74 on the left 74 on the right. So now let’s just make sure. As we keep going here, we’re going to need to change it to 21. So let’s go 21 21, and here we should be even whoops. The brand has a um 10 padding, so i’m just going to go. Remove that on that break point here. So now, as we go down, we’re going to be even and it’s all going to be aligned and look a little bit nicer. So let’s go ahead and publish that now and let’s go back to our site and whoops. Let’s refresh and perfect. So now we have our nav bar: it’s, aligned it’s all looking nice. We can click to go home and we can click on recipe here perfect. So we have our recipe. We have the photo, the ingredients uh. The directions, then, if we click on this logo here at the top, it’s going to take us back to our home page. So hopefully this was a helpful beginner tutorial. So if you’ve gone through this tutorial, you know kind of the basics of how to build most web webflow sites. So you know how to build different pages. You know how to build out a collection list. You know how to build out specific collection pages, and you know how to link around to the different sites. One more thing: i want to show you how to do um, so you understand uh the collection relations. Um is add: a collection um list in webflow that’s going to have the cuisine type, and this is just an important concept for you to understand in webflow. So let’s go back. Really quick. Go to our cms, we’re going to add a new collection and we’re going to call this cuisine type and it’s just going to be name for now. I don’t think we even need to really do anything else in this beginner tutorial. So let’s go ahead and create the collection and let’s just add two. So we’re going to add italian. We’re going to create and we’re going to add thai and we’re going to create. We can even add a mexican if we want. So we have a third and let’s go back to recipes and then in this recipe let’s go ahead and edit that recipe collection list and we’re going to add a new field and it’s going to be a reference field And this is going to be the cuisine type and we’re going to select a collection to rest reference, which is the cuisine types and let’s go ahead and click save field and save collection. And then you can go in to your individual recipes and let’s choose the cuisine type that it belongs to. So we have thai. We have thai and we have italian and we have italian and i’m not going to get uh too detailed here. But i am going to show you kind of the power of this. So i’m going to go to our pages and now because we created another collection list, we have our collection page here for cuisine type. So let’s go ahead and click on cuisine type template, let’s just go ahead and add in a symbol. Let’s add our navbar here at the top and let’s also go ahead and add a section. Let’s give it that section class, let’s add in our heading here and let’s do h1. We’re going to get text from cuisine type, which is the name, and then what i want to do is go back to our home page and in this section i want to go to collection list wrapper and just copy. It do command c or control. C on your keyboard, if you’re on a pc, go back to our recipes temp, not our recipes template our cuisine type template make sure you’re highlighted in that section and let’s paste that in so here we have our collection list wrapper. Now what we want to do here is hit the settings on the collection list wrapper not there here. The settings on the right and we want to filter – and we’re going to do – is add a filter where the cuisine type reference equals the current cuisine type. So we’re going to save that. So now on this italian page, we are go automatically showing the italian recipes and on the thai page we’re automatically showing the thai recipes and because we copied the collection list, everything is going to all work the same. So if we click on that image, it’s going to put us through to that page. So this is pretty cool and uh. If we it’s all going to automatically have the same exact styles. So let’s just go to the home page. Really quickly – and i’m going to show you how you can kind of make this even more powerful. So let’s go ahead and add a collection list wrapper another one and let’s just add that right above uh that section and let’s go ahead and have this be the cuisine types and what we’re going to add here are Buttons to quickly um put users onto the specific cuisine type that they’re. Looking for. So let’s go ahead and add a link block here in the collection item and let’s make that link go to the current cuisine type, which is that page that we just made and then let’s go ahead and add text inside and We’re going to get the text from the cuisine type and it’s going to be that name. So now we have all three names here and let’s just style this really quickly. I think link um, let’s just style this. Let’s name it um cuisine, link and give it no decoration and the color is going to be uh black and the typography is going to be um, guatta perfect and then let’s go to the collection list. Whoops collection list. Here we go, we want to change this to flex, we want flex, horizontal, perfect and then in the cuisine, link uh, let’s go ahead and also add some padding here on the top and bottom and let’s make the background kind of like a Light gray and then let’s add 10 pixels of margin on that right side, there, okay, perfect and then let’s pull that collection list wrapper right there um in the section where we have our images and then let’s also add some margin Below it so 30 margin below perfect. So now we have these buttons mexicans, high italian um on that home page there, okay, great let’s just check kind of how that looks on different screen sizes that’s all looking great and let’s preview. You can preview without publishing by clicking that toggle preview button and if we click italian, that’s going to take us to the italian page perfect. So let’s go back to home and why don’t we go ahead and publish perfect. So now, if we go back to our recipe site and refresh uh perfect, so now we have our homepage and we have our toggles here and we click and click on italian and it’s going to take us to our italian page. We can click on the recipe and then we can go back home. There’s a lot more that you could build into this. If this were a more advanced tutorial, we can do hovering. So as you hover over the link, the color can change, or it can kind of go up a little bit when you hover over it. So it kind of indicates that it can be clicked. We could add a lot more to these recipe pages, but i think kind of as a basic tutorial. Hopefully this is really helpful to kind of understand how webflow works and what you can do with it, thanks for checking out the tutorial. If this was helpful, please leave a like and subscribe to my channel that’s really helpful, and if you want to learn more about webflow or learn more about noco tools in general check out no code mba, there’s a link in the description which Is my website where i go deep on a variety of no code tools with a lot of different tutorials to teach you how to build apps and websites without code, so definitely check that out. If you’re interested and keep an eye on my channel for more free tutorials that i put out – and i hope you have a great day –

As found on YouTube

To download your Viral Content Crusher (October 2017)