So you’re new to Webflow, eh? Let’s dive in.

Visual Web Design Guide

This visual guide will walk you through important responsive web design concepts and how to implement them visually inside Webflow.

#1 The box model

Understanding website structure

All the elements on this page are all blocks inside of other blocks (aka “Box Model”). When dragging web elements, you drag them from one block and drop them into another. That’s how HTML works!

super PLAN

$75/mon

Perfect for any business with 20 or more employees.

500GB Storage
1 Million Pageviews
20 Collaborators
50 Social Networks
Premium Support

What you see

Note: You’ll understand how to design something like this with the concepts below.

What Blocks It’s made of

Div Block

H2 Heading super PLAN

Text Block$75/mon

Paragraph Perfect for any business with 20 or more employees.

List

List Item
500GB Storage
List Item
1 Million Pageviews
List Item
20 Collaborators
List Item
50 Social Networks
List Item
Premium Support

try it yourself

Drag this paragraph...

All the features without the limitations. All you can eat. (This is a paragraph element)

TIP: Click and drag the Paragraph element above and drop it under the price on the right. You can also use shortcuts like copy and paste(ctrl+c, ctrl+v), copy while dragging (holding alt), and delete (delete key).

Into the purple block...

Super PLAN

$75/mon

INFO: This is how HTML and web structure works - elements stack under each other or inside of each other. That’s the best way to build a fluid and responsive website.

#7 Resources

Need more help?

You got it! There are tons of people learning Webflow and web design every day. A great place to start is the video tutorials. Then head on over to the support center or community forum.

Video Tutorials

tutorials.webflow.com

Forums

forum.webflow.com

Help Docs

help.webflow.com

(You can click on the links above by going into Preview Mode – the eye icon in the top left corner)