so if you're new to webflow this
tutorial is designed for you we're gonna 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 gonna 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 gonna have a navbar here to go back to the home page
and we're also gonna 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 gonna 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 gonna 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 gonna 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 gonna double click on that nav bar and then what i'm gonna 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
https://www.easycash4ads.com/cap.aspx?i=money&ref=yoseskba64z
Discover more from Marketing Revolution
Subscribe to get the latest posts sent to your email.
