Visual Web Design Guide

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

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

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

try it yourself

Drag this paragraph...

erteterte

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

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

button design example

Add to Cart ➜

Style it yourself

Button Text ➜

TIP: This button already has a class ”Button” with some basic styles. Select the button and try to add the gradient, border, rounded corners, inside/outside shadows, hover state styles, and transition for the hover styles – all using the style panel.

What you created

Button Text ➜

apply the ‘button’ class

Button Text

TIP: In web design you can apply a class to many elements to make them look the same. Apply the “Button” class that you styled to the link above by clicking the [+] at the top of the Style panel and typing “Button” to find that class.

Form Design example

Thanks!

Your rock my socks!

Oops! Something went wrong while submitting the form :(

Style it yourself

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

TIP: First create classes for the text fields and button (apply the same class to both fields). Then change border styles, background color, and add styles for the hover & pressed states. Don’t forget to style the “Success” state for the Form element, found in the settings panel (Gear Icon in top right).

#4 Layout with CSS

Building web layouts with CSS

Similar to adding style to an element, to change the position of an element first add a class and then edit the position properties. You’ll learn about Margin, Padding, Display, Float, Overflow, and Position.

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