#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.

#2 LAYOUT ELEMENTS

Basic layout elements

Add elements to your website by clicking on the [ + ] icon in the upper left hand corner. Below are some of the most basic structure elements in web design - sections, containers and columns.

A Section takes up 100% of the width of the browser window if you add it to the Body (the canvas of a website).
It’s great for the big horizontal sections of a website.

Section Element

A Container is a 960px block centered in the middle of the browser. Usually most website content is added inside of a Container so that it’s centered. Containers are usually added to the Body or a Section element.

Container Element

Adding Columns are the fastest way to build a unique website layout. To edit how many columns you want in different devices, just click on the Gear Icon in the top right corner to access element settings.

Responsive Columns

#3 Designing with CSS

Styling your elements

Select an element and add a class in the right style panel (Brush Icon). In this panel you can add text and graphic styles like font color, line height, gradients, borders, shadows, and more. Visual web design is way more fun than coding right?

#5 Style Cascading

Utilizing Cascading Styles

You can easily create variations of an element by adding additional classes on top of each other and adding different styles on those classes. Check out the example below where we have different variations of a button.

Shared button styles example

Design the buttons yourself

GREEN Button

RED Button

TIP: Select the second button and click on the [+] next to the class to add another class. You can call it “Green”. Then give it different styles. These styles will override the base styles of the first class. Then create the Red button.

#6 media queries

Designing for different devices

In Webflow you first design your website for desktop devices and then make changes on mobile devices (access the Device icons in the top bar). Adding styles in a mobile device will override the desktop styles.

Responsive Heading example

This is some heading text that gets smaller in mobile devices.

Description: This heading is really big on the desktop, but we want it to be smaller on mobile devices. Click in the devices in the top bar to see that the text size and line height was decreased.

Fix It yourself

Make this big heading text get smaller in mobile devices.

TIP: Select this heading on the Tablet device and make the font size and line height smaller. Do the same for Phone Landscape and Phone Portrait devices. You can see that the

Responsive Button example

Button Text

Description: This button is meant to be small on Desktop screens because it’s easy to click with the mouse cursor. We made it bigger on mobile devices so that it’s easier to tap with the finger

Button Text

Fix It yourself

TIP: Go to the Tablet device and increase the padding of the button. When you do that it will override the previous styles set on Desktop and will cascade down to all the devices below Tablet.

Responsive Columns example