Click the W to go back to the Dashboard and create a new website!

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
#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
NORMAL Button
GREEN Button
RED Button
NORMAL Button
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. 

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. 

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