Please ensure Javascript is enabled for purposes of website accessibility
 

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

adjustments to all of the the blocks

with inside

a bigger block now what i'm going to do

is i'm going to keep these div blocks

but i'm actually going to come back

in and add a heading within this

container

and let's make this vertical bring the

heading to the top

and then i'm going to blow this heading

up so it's really obvious to see and the

next thing that i'm going to do is i'm

going to come over here into my ad and

i'm going to add

a paragraph this is going to be my

subheading

now i want this to be a little bit

shorter so i'm just going to delete some

of this text

and what i'm going to do is i'm going to

blow this up to let's say 25

give it a little bit more line height

and what we have now is our heading and

our subheading now

the next important thing that you're

going to want to understand is your

spacing and this is really

self-explanatory but a really powerful

tool

because you can actually adjust the

padding on the inside of a box or on the

outside of a box and so you'll notice

that by default

this heading has margin on both the top

and the bottom 20 pixels on the top and

10 on the bottom

if we want this heading to have more

space underneath that i can actually

click

and drag this out and you'll see how

that is making space

between the bottom of the heading and

the top of the subheading okay

now you can also edit or adjust the

inside of this

by clicking and dragging these and

you'll see what that does

and actually i'm going to hold the shift

button and do all four you can see how

it's pushing this heading

into the middle of its own box now

that's not something that you're going

to want to do very often with text

but something that very often you'll

want to do with a div block because if i

actually move this heading inside the

div block

you're going to see now that that

heading is within that block

and if i adjust the inner padding it's

going to

push that out like that and give padding

between the heading

and the div block that's a really good

example or use case for using that

but those are going to help you make all

the adjustments that you're going to

need to make

as we scroll down we've got a couple

things as far as your overflow and fit

which you won't have to worry about too

much on this first build

same with position but as we get down

here then you've got all of your

adjustments as far as typography

and then you've got your background a

background is a really powerful tool

because there really are two ways to add

images

to your website number one is to drag

images directly in

or number two is to use an image

as a background to show you how this

works first i'm just going to drag

a regular image into our container here

and click choose image and that takes me

immediately to

my assets tab to where i can upload

an image and that will load in and there

i have got my image and so typically

images are going to fill up the box that

they're found within

but you can actually have the option to

drag to the size of your image

or of course up here on the right

toolbar you can adjust the width and the

height

okay now one issue that you might

sometimes run into is if you want this

width to be

let's say 400px your container let's say

that it is set to

stretch actually let's go horizontal and

stretch

and so what you're going to find is

sometimes it can get frustrating when

you set the width

but because of the display of the

container it's going to stretch that

image okay and so a couple different

options you have

is obviously you can come in here

to the image and you can try to

guestimate

the height in pixels and just keep doing

this until you find the right height

but this is an absolutely crappy

solution and so the other options that

you have is you can determine

your layout and maybe you just want to

push everything to the top

and that will automatically fix that

image but

one thing that i also like to do with

images if i'm trying to get a background

so what i'm going to do in this example

is i'm going to take a div block

place it in here i'm going to set it to

let's say 400 pixels and the height is

going to be

300 pixels now what i can actually do is

scroll down here to this

backgrounds image and gradient and i can

click the plus here and i

can choose an image and actually input

this image

into the background and what i can do is

press cover

and that image is going to fill this div

block okay

now the nice part about this is when i

make adjustments to that div block let's

say that down here i want to adjust the

radius

let's take that to 100 you can see how

the radius changes on the div block and

the image

of course only fills that space and so

it'll round the corners of the image as

well

now this is kind of nice because you can

also adjust the width let's say to 500

px

to 600 px and it's going to just

continually fill

that div block with that image this

background feature

is especially useful when you are

working with your sections let's say

that this section is going to become our

main hero section

on our homepage what i can do is make

sure this section is selected

click my background image here and then

i can plug in this image

set to cover again and then i can set

this

right to the the middle position and

just like that we've got a great

background image where our text is

running over the image now obviously

there's not a whole lot of of contrast

here and so what we can actually do is

come back

to the image and gradient i can actually

add a second

image or gradient and what i can do is

set a solid color overlay

and then i can actually adjust the

opacity of this

specific color just like that i can make

the

background dark come in here back to my

text

and i can change these colors of course

and just like that

i have a nice dark background image with

my text overlay

and then i'm well on my way to creating

a nice hero section and a nice home page

and so

the image and gradient tool is really

really useful

you can also get in here if i erase both

of these you're actually able to get in

here

and also set a gradient and you can

adjust the colors and and really do

whatever you like with this

to get things looking exactly the way

that you would like them to

so after the imaging gradient down here

we've got just a couple other features

we've got our

radius our borders which are pretty

self-explanatory and are going to be

easy for you to learn

we've got our opacity and other effects

down here which again are nice to use

you can click those and see how they

affect the different elements on your

site

but they're not things that you're gonna

have to use very often okay

um so what we're gonna do now is click

over here to this cog me this is just a

secondary um

settings menu that's gonna give you more

settings when it comes to your

individual elements for example

your header you're gonna be able to

choose you know as a h1 h2 h3

you're going to have different different

settings throughout this tab but again

not one that you're going to have to use

super often and then of course over here

we have our style manager which is very

similar to our navigation tab on the

left

but it's showing just our styles and our

classes

and then the last one is our

interactions which again

is a video for another day but you're

going to be able to access all of your

interactions right there and get things

to move and change

as you scroll through your site or when

you click on different elements

which is a really powerful feature so

now that we've covered these things

the last thing that i want to cover

before we jump into our site settings

are up here at the top obviously we have

our different viewports

widths and so we can actually see things

in our desktop

our tablet our mobile landscape and then

in our regular mobile portrait so as you

click on these it's actually going to

show you

how things work and how they're going to

look in these different viewports and so

obviously

if our heading is massive on our desktop

but when we come down to our mobile it's

way too big

i can actually get in here and just

change this i can shrink it down a

little bit to make sure that it fits

and you'll notice that it's not going to

change that in the desktop version so i

can start to design

for different viewports obviously

designing for mobile is

super super important but you're going

to have complete control

over the way things interact you can

change literally

anything and it's going to look

differently in mobile than it will in

desktop which gives you so much power

and that is one thing that has been a

big struggle for a lot of designers

using builders like wix

or squarespace because they just make it

really difficult to have complete

control

over the different um you know the

website the way it looks in different

viewports okay

so up here in your top right you have

your publish which this is automatically

going to publish to a temporary domain

which makes it really easy for you to

see the live site and also send a

temporary link to a client so they can

kind of follow your progress

you also are going to have the ability

up here to click on your little eye

and this is going to give you kind of a

live view

of the site within the designer which is

very very useful

okay so before i dive into a

design of a very basic landing page what

i want to do is take you up here to the

project

settings and show you all the important

settings that you need to know

when working with webflow okay you've

got your general tab here

which is your site name and your and

your temporary sub domain name which you

can

adjust as long as it's one that's

available you're going to be able to use

whatever domain you like

down here you've got your favicons and

your web clips to set the image which of

course shows up here in the tab and in

other locations

then you've got a couple additional

settings down here

including your site statistics which is

going to show you

views unique visits different things

like that

clicking over here we have our hosting

where you are going to choose a hosting

plan now the way that web flow works is

on a free plan at any given time you can

have

two sites that are unhosted in the

development stage so what that means is

you can have two at a time

once you select a hosting plan and

connect a domain to one of those

that's going to open up one of your

slots so then you can start a new

website

to be in the development phase and be

working towards

hosting that and taking it live okay so

when it comes to your site plans

there are really only two site plans

right now that you're going to need to

worry about

and that is your basic and your cms

again cms

is going to be necessary if you have cms

items implemented on your website if you

purchase a webflow template or you find

a free one

chances are that those are going to have

cms items in

that site so unless you delete all of

those cms

items you're going to have to choose

this more expensive hosting plan

the one kicker is i always use this cms

hosting plan because it also has

gives you access to your content editor

dashboard which is something i passed to

my clients

so they can make adjustments to their

site they can manage form submissions

all of those different things but if you

are making just a super basic site

no cms items you're not worried about

sending an editor dashboard to a client

for example this is for your own

portfolio site this may be a good option

to go a little bit cheaper on the

hosting

obviously these are cheaper on the

annual plans if you flip them to monthly

and you're paying month to month it's

going to be a bit more expensive but

either way you're going to be happy with

either of these plans just keep in mind

that if you want to use those cms

items and the cms structure or the

content

editor dashboard you're going to have to

choose the cms hosting

now the thing that i love about this

you're going to be able to connect your

custom domain down here even if this is

for a client site

you're going to be able to connect your

domain but as we come over here to the

billing section

you'll notice once you set up your

personal billing

you have this option to do client

billing now what that means is

if i build a site for a client i don't

want to have to pay their monthly

hosting out of pocket

and then hope that they reimburse me for

that so what you can do is you can plug

in their information their name their

email

their phone number and then that's going

to generate a link that you can then

forward on to your client where they can

put their own

credit card information in to pay their

hosting now client billing has a lot of

cool settings where you can actually

upsell them

and let's say that they choose the cms

hosting that's twenty dollars per month

i could actually set the price at twenty

three dollars per month

and then webflow would give me that

three dollar difference

which is a nice upsell option it's not

something i do

very often because i want to keep my

clients

hosting prices as low as possible

because they're already investing with

me and other monthly services and an

extra three bucks a month doesn't matter

to me as much as keeping my clients

happy

but you've always got that option okay

you've also got the seo tab which gives

you a couple seo settings

you've of course got your fonts your

backups which you can restore an old

version of your site

and then you've got your custom code

section and so

with this you really have a good

understanding of all of the settings

that you might need to

know or to understand and so what i'm

going to do now is i'm going to dive

back

into the designer and we're actually

going to build a really quick landing

page

to show you all the things that you've

learned in this video so let's jump into

it right we are back into our designer

and i'm actually going to erase

everything that we've done so far so we

have a blank canvas

and what we're going to be doing is

creating a really quick and simple

landing page

i'm going to show you a couple

additional tricks throughout this part

but in just a few minutes i'm going to

give you a really good idea of what can

be built in web flow okay

so we're here at our body box and what

i'm going to do is i'm going to add a

section

and down here in the height one thing

that i always like to do is set this

header section

to 100 vh which means the viewport

height

okay so what that means is that the

height of the viewport is going to

change based on the size of your screen

but i always wanted to cover the entire

screen okay

now what i'm going to do is i'm going to

drop down here to the image and gradient

we're going to give a nice

gradient background so what we'll do is

let's give this a

kind of a deep navy blue and on this

color let's give it

a lighter blue and then what i'm going

to do is i'm going

to use this little circle here to adjust

the direction of that

and i have my hero section i'm actually

going to change this class to

hero section and then what i'm going to

do is i'm going to bring in a container

now notice that the container

automatically pops to the top