Webflow Tutorial
Webflow is the modern way to build a website! With it, you can build an entire website with NO code by simply adding and editing elements to each page of your website in Webflow’s easy-to-use builder software.
You’ll build responsive websites right in your browser window and then launch them live on the best cloud hosting service (Amazon Web Services provides a global infrastructure supporting millions of sites, while Fastly delivers your content in milliseconds.)
In this blog post, you’ll learn how to create a website in minutes with our Webflow tutorial. Click the button below to claim our FREE Webflow promo code: https://www.coursenvy.com/webflow-promo-code
Step #1 – Sign up for FREE with our Webflow promo code: https://www.coursenvy.com/webflow-promo-code
Step #2 – Sign up for the FREE Webflow 101 Course
Step #3 – Learn what Webflow can do for you:
VIDEO TRANSCRIPTION:
today we are covering a
super comprehensive webflow tutorial
that is going to take you
from complete webflow beginner and
amateur and give you
all the tools that you need to get in
create an account
build a website and then publish it and
take it live so we're going to cover
everything in this video
i know there are a lot of other
tutorials out there but my goal is that
this one is going to be
quicker more efficient it's going to
show you the most important things that
you need to know
and then it's going to help you get a
website finished and live faster than
any other tutorial
so let's jump into it we are here on the
webflow homepage and the first thing
that you're going to need to do is click
get started and all webflow is going to
ask you for
is an email and a password you can sign
in with gmail or just click this blue
button to continue with any type of
once you sign in webflow is going to
take you to this next page where it's
actually going to ask you
for your name or how they should greet
us
and then they're going to ask us a
couple questions which is going to put
us in the right direction
for what we're trying to accomplish with
webflow and so
what best describes your role we're
going to put web designer who will be
building the site for i'm going to go
ahead and put
my business for starters and then do you
have any experience building websites
let's just put used website builders
what webflow's going to do is it's going
to
process what we're trying to accomplish
and it is going to throw us into
a good scenario where we can get done
what we need to do so what it's going to
do is give us the option to either do a
business starter which is just a basic
template or a blank site and in this
example we're going to go ahead and move
forward with the blank site
and webflow is going to launch us in to
the designer now the designer is where
everything happens once this loads
you're going to see our big white canvas
that's overwhelming we'll close out of
this tutorial
and this canvas is where we're going to
design
our website okay now before we can dive
into that and before i show you an
example of a quick website we're going
to build
you need to understand all of the tools
first over here on the left side you
have your main webflow tab
which is going to take you either back
to your dashboard to see all of your
different websites
or take you into the individual website
settings which is where you're going to
manage
hosting plans and setting up your domain
and different things like that
and then you've got your editor which is
just a more simplified version of your
designer here where you can just make
adjustments
to text and images and then your cms
items which we'll talk about here in
just a minute the next thing that you've
got
is your add button right here now this
is going to be very similar to other
website builders that you've used
because you're going to be able to
select the elements that you want to put
in your site and you're just going to
drag and drop and so for example
you've got your layout which is your
sections your containers your columns
you've got basic elements which are your
div blocks lists and buttons
you've got all of your typography your
cms which again we'll talk about here
shortly
we've got all of your media so images
and videos and then of course lottie
animations which are really really
awesome but
a more complex topic for another video
you've got all of your form
elements here and then you've got some
additional components and so
in this example just to get started
we're going to go ahead and move a
section
over here into the body now i want to
take a moment here to
explain to you the way that web flow
works webflow works on something called
the box model or that's known as the box
model
what that means is every single element
within your website everything down to
the text and the images
is a box within a box within a box okay
so that means is
rather than using your body here and
just dragging
a heading right into your body which
makes no sense what you're going to
actually do is you're going to work with
this box model by taking the section
and then i'm going to put a container
within the section and i'm going to put
my heading within the container now
this is um gonna be absolutely necessary
for a number of different reasons but
the number one reason is so you have
more
design capabilities because if you put
everything within your
um your home page or your body block
if you make any sort of adjustment it's
going to change every single thing
within your body block okay
and so now that we've got this set up
what i'm going to do is i'm going to
turn on these guides down here so you
can kind of see
these different boxes so we've got our
h1 we've got our container we've got our
section
and then our body and so that's how
we're going to have things set up okay
and so
before we move forward with this example
a couple more things that you need to
understand
are number one the navigator which is a
super easy way for you to basically see
the elements in this box model like we
talked about right we've got our body
our section our container and our
heading
but you're going to be able to see every
single element on your page within this
navigator which makes it easy to find
elements it makes it easy to reorganize
things drag and drop things let's say i
want
um you know for example let's take this
section
and we duplicate this now you're going
to be able to see both of these sections
in the box model
and say i want to drag one above the
other i'm going to be able to make any
changes like that in the navigator and
this is going to be
a lot more important a lot more useful
when you have
a ton of different sections and a ton of
different elements on your page
so i'm going to go out and i'm going to
erase this section that we just made and
the next thing that we're going to dive
into really quickly
is the pages tab now this is pretty
obvious you're going to be able to
bounce back and forth between your pages
you can create new pages you can
actually create folders to organize
your pages and then of course you can
get into each individual page setting
and adjust your title you're going to be
able to adjust the link slug
you're going to be able to make changes
to meta descriptions and your open graph
url images the next thing that we've got
over here is our cms
collection which again cms is a more
complex
topic for another video it's not
something that you're going to need
in your first website but to give you a
basic idea of
what this is and when it's used when i
build a website for a client that has a
blog in it i don't want to hand over
this website
and tell them every time that you have a
new blog article you're gonna have to go
into the site create a new page
redesign the page and then put in your
text so instead what i can do
is i can create cms pages with cms items
and i basically tell webflow exactly how
i want the content to be designed and
laid out
and then once i design it once i
actually pass the cms dashboard
to the client and then they just go
through and fill all the fields so they
put in the title they put in
the body content the images a thumbnail
image
anything else that they need to and once
they click publish
webflow actually uses your cms pages to
duplicate that content
they implement it into the website with
the design and everything that you've
already done
which saves a ton of time and gives you
a lot of capabilities
you can also use cms when it comes to
adding or removing team members maybe
you have
products on your website blog articles
are a really powerful way to utilize
this
and that's again something that we'll
dive into in another video
but the last things that you're going to
need to know obviously you've got your
ecommerce button which we're not going
to use because this isn't an ecommerce
site
you've got your assets where you can
upload images and videos
and then of course you've got your
settings right over here all right we
are moving along and we are going to
start talking
now about this right side toolbar
which is where the magic happens okay
this is where
everything to do with the design and in
the visual appeal of your website any
adjustments that you need to make to
sizes and
alignment and padding and spacing and
all these different things are going to
happen
right here okay and the first thing that
you're going to need to know which is
really at the core or the foundation of
webflow
and is probably the most powerful
feature that webflow offers
is your selectors here and this is where
we're going to be utilizing
classes to streamline the design of our
website and so
to give you an example of this we've got
a heading right here and we're actually
going to give this
the class of home page
heading okay now what this means
is now every time a
title anywhere on the website that
shares this same
class anytime that you make an
adjustment to that whether that's to the
font
or to the size or to the color or to the
background whatever it is
those changes are going to be made to
every single title that shares this
class
and so to give you a good example of
this i'm just going to copy and paste
this over so both of these headings you
can see over here they share that same
class
and so when i blow up this text it's
going to
to do it to both of these titles because
they share that same class
so let's say this is the heading we want
to be really big and we want it to be
really blue so we want to be big and
blue it's going to make adjustments for
both of these that but let's just say
that
for the sake of this these are both
headings on different pages
this one is the home page but this home
page heading we actually want to add a
sub class because we want it to be a
little bit smaller so what i can do
is i can add an additional
class to get more specific about the
design
of this heading so still if i go back to
this
main homepage heading class every change
that i make is going to happen to both
of these
but now that i've added a more specific
class to the second one
called smaller smaller tiny when i make
adjustments to this it's
only going to change this individual
title and so
this gives you a really good idea of how
you can streamline all of your titles
all of your body text
all of your sections all of your div
blocks whatever it is
you streamline those across your website
so anytime you make
changes it's going to make those changes
across the entire site now an example of
this is one of my early on clients i
built them a site in
wix and they actually went back and said
we love everything but we want all the
titles on all 50 pages
to be in all caps now i'm sure that
there's an easier way to do this on wix
and i was probably a dummy back then
but i actually had to go through to each
individual page and retype the headings
in all
caps now in webflow what i would done to
get that done
faster is i would have just clicked this
main heading that shares the same class
as all the other headings
i had to scroll down here and clicks
capitalize and it's going to capitalize
all those headings
but then for whatever reason if i have
this other heading that i'm like you
know i actually don't want this one
capitalized because it's got this
additional class to get more specific i
can actually untoggle
that all capitalized heading and it's
going to adjust
just that single heading so that's the
way that these selectors work and it's
important to remember that they don't
only
work on headings they work on literally
any element so any element that you find
over here whether that's a section
a column a link block a heading an image
a form block whatever it is you can add
classes to streamline your design
process okay now once you've done that
the next important thing that you're
going to need to understand is your
display or your layout options and this
is
again going to be the foundation of the
design of
every single element okay and so to give
you an example
of these i'm actually going to add a
little bit of padding to this section to
make it a bigger example for you
and what i'm going to do is i'm going to
drag in
a div block and let's go ahead and erase
these headings
i'm going to drag a div block into my
container so again
using the box model and i'm going to
show you these and this div
block i actually want this to be 100
pixels
by 100 pixels so we're going to make a
square okay
now what i want to do is this is titled
div block i actually want to
add a actually i'm going to duplicate
this after i add a background color
let's go ahead and make this guy blue
i'm going to copy and paste this and in
my second div
block i'm actually going to do a more
specific class titled red and now i can
change the background of this
and we've got our red block a red block
and our blue block within this container
now because the container is what's
known as the parent element that is
going to determine the
layout of our boxes or or our elements
within that container and we do that
with the display settings and so
what we've got is our block element
display setting which is just the
default
and then what we have is our flex lat
which is the one i use
99 of the time now you can see when i
click that
it actually gives me a ton of different
options whether i want to go
horizontal or vertical let's say that i
want to do vertical i want to be in the
center
and then for the sake of this example
i'm going to go to the container and
make this container
500 pixels tall and so
now when i'm adjusting this i can
actually have
have it tell the container how to space
out these blocks so maybe i want them
smushed to the bottom or smushed to the
top or right to the middle
and to the left and you can see how
making these adjustments is going to
move
these children elements or child
elements around
the other options that you have are your
div block which again is just going to
add more boxes to our box model
you've also got your inline block and
then
your inline options which again are are
used in in
very specific scenarios but for the sake
of your first website really you're only
going to need to know how to use this
flex layout okay
that's a really powerful way to make