Designer View
Learn to build websites without code in Webflow
Oops! Something went wrong while submitting the form.
Browse Lessons

Webflow Designer View

On this Webflow lesson we take a look at the basic interface of the Designer View. How to add elements using the navigator panel in Webflow and the understand Webflow's style properties panel.

Webflow Project Files

All our project files for you to practice and play with along with some bonus materials.


It's your turn!

Take a moment to download this Webflow Template so you can practice, experiment and use however you want!

ūüď• Download Template

All right guys, I am going to give you
a quick overview of the designer view,

we've created already the project Stream VR
Network and as soon as I click on the

thumbnail it takes me to the designer
view, a couple of panels both on the

left side, and on the right side, these
panels come with a series of sections

that you can toggle open all the different
elements that webflow alows you to

start adding into the canvas, things like
adding an image, a video or lottie

animations, forms and even components
that are pre-build for you.

Another cool thing that webflow does,
it gives you some pre-build layouts

similar to how templates work where
you would have a pre-build structure

just so that if you have something
similar, if you design something similar

you can just start utilizing these and
automatically they will be added into

your canvas, and then symbols are
similar to how Figma works with

components, where you could just
create a single source of truth for

and element and you can just modify
that once and distribute it across all

of multiple pages, the second tab is the
Navigator, this will give us access to the

whole hierarchy and structure, similar
to how Figma works with the layers panel

where you have multiple layers stack
one on top of the other, you can toggle

all the layers and expand them all up
and down, think about your project

as a folder, and within the folder you
have multiple pages, right now you

only have the static home page which
is what we are looking at right now,

you have additional settings by clicking
on the cogwheel which we'll look into

in another lesson, you can see here
some utility pages, including password

pages that you can create, if you
what to protect a specific page

so that nobody can access that, you
can do so, and then the 404 page

which is a redirection page, if the
URL that the user entered to access

your site does not exist it will
redirect them to this page that

we can design in a nice way down
the road.

All right so, from pages you have
CMS collections that we'll look into

in another lesson, in the CMS module
but ideally what would happen is all

the database will be stored in here.

You are gonna see the assets panel,
this will have all your images that

we have exported and compress from
our previous course, go ahead and

check out that course because in that
course we learn about compression

how to prepare our files and bring
them over into Webflow, aditional

settings for the search indexing tool
that we won't be looking to yet,

and some backups that you can access
if you want to restore specifically a

page that you have created previously.

Everything that's within this first Tab is
gonna take care of all the styles within

this page, what I mean by that is you're
gonna have access to some of the CSS

or Cascading Style Sheet properties that
we can use to start modifying and

playing with the elements on the

The second panel is our element
settings panel, so you have custom

attributes that it's a little bit more
advance, you can have the ability

to show the specific element on an
specific device if you'd like.

Another panel is the style manager,
so whenever you start building all

the styles from this property panel
every class that is created will live

here in the style manager.
Once this gets really large, we're

gonna see this in multiple lessons
so we can clean it up as we go.

And then finally the Interactions
panel that allows us to add animations

based on specific triggers on the

For every single page that we have
on our Webflow we can manage different

sizes and change the styles of each
of the elements based on the different

breakpoints, on the very top right
we also have some additional settings

to export the code once we've exported
the code we can utilize it in a different

server if we'd like, and again you can
also share this project creating a

read-only link or invite collaborators
as editors which we'll look into in

another lesson, and finally publish
button which will enable us to publish

this on our custom temporary domain
but eventually just use the little toggle

icon here just to preview what you
are working on and hide all the other

elements and property panels, if you
access the little question icon on the

bottom left you'll have keyboard shortcuts.
All this keyboard shortcuts are super

crucial that you remember some of
them every time you start building

things you could use tools like
the find, where you can quickly

find things you'd like from the tools
on the left panel, so for example

if I wanted to create an image, bring
an image I just write down image

and then I can just simply click ENTER
or select it to added into our canvas.

All right, that was a quick overview so,
let's jump in to the next lesson and

see how I typically start any project.

Coming Soon

The future of the web without code
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor

Neftali is an award-winning creative director with over 15 years of UX/UI design experience, a passionate no-code advocate and instructor @ Awwwards Academy!


Everything you need. ūü•≥ Forever Free.