Please ensure Javascript is enabled for purposes of website accessibility
top of page

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

email

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