This is a paragraph. You can drag paragraphs, headings, images, columns, containers, and all sorts of stuff from the right if you'd like and drop them into any container. First you drop in a section, then a container and if you want to break it down into columns you can add that too.
I'm a button
Let me explain the layout elements common in HTML and responsive design.
1. Below is an empty SECTION
Sections span the full width of the page and are usually used to separate different rows sections of the website. We have sections on this page they are Header section (dark grey), hero section (grey), and this section (white).
2. Below is an empty CONTAINER
It's dotted to show that it's empty. It's 960px wide and centered on your website. It's also responsive. Drop your COLUMNS and content into a container. This text is actually inside a container so that it gets centered all nice and pretty.
3. Below are empty COLUMNS
For columns to be centered like this you have to drop them into a container just like any other content that you want to be centered on the page. You can drag any content into columns. (Check these columns out in different devices - you can customize how many columns they break down to as the width of the screen gets smaller!)
4. Below are empty COLUMNS in a SECTION
If your design calls for columns that span the whole browser window, not just the center (what dropping columns into a container gives you) you can drop your columns into a section. Drop images in there and it will look super sweet.
5. Below are some BASIC ELEMENTS
For columns to be centered like this you have to drop them into a container just like any other content that you want to be centered on the page. You can drag any content into columns. You can even drag a Div Block in there and style some crazy unique stuff.
Images
Div Block
Heading
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Drop columns into the BODY or into a SECTION or in a CONTAINER. If you drop it into a Container it will fit into the responsive centered 960px container. Drop it into a Body or Section if you want the columns span 100% of the whole browser window. Here's an example.
Just click CTRL or CMD+Z and you'll be cleaning up your mistakes in no time. If you want you can redo those mistakes. Just kidding! But really, don't worry about mistakes.
If you have an specific element with a specific style that you want to duplicate just press Copy and paste and it will paste after itself. If you want it pasted in another container select that container and hit paste. BLAM! Start dragging something, hold ALT and let go - you'll be able to copy stuff super fast yo! Its gonna blow your mind man.
If you want to jump through the panels on the right just A, S, D. "A" is for ADD if you want to add an element from the library. "S" is for STYLE if you want to add classes/styles. "D" is for Destroyer! Just kidding. It's for the element's settings (like choosing H1-H6 for heading). The letter S was already taken and D seemed like the best choice.
You can do some crazy stuff with columns! Drag a column into a container and click on the GEAR ICON on the top right corner. There you can choose how many columns you want for all devices.
Select any element on the screen, go to the right panel, add a class and style away. It's super fun. Add more classes for more specific designs. Reuse classes for speed and ease just like a front end developer but without having the headaches of coding.
Cascading is super powerful! Why recreate design if you can inherit from a class that already has that style. Utilize cascading just like in CSS. You can even see exactly where all the styles are coming from.
Design for the desktop and move down to smaller devices without having to recreate the whole site. It's just like building a site by hand but its so much faster. We support the most popular media query ranges for Desktop, Tablet Portrait, Phone Landscape and Phone Portrait.
That's what's cool about Webflow. See where everything is coming from and what is affecting what.
We're in beta. We want this to be super awesome but we need your help. Send us feedback at support@webflow.com.
Are you dying for something? Shoot us an email at feedback@webflow.com and tell us what you really want and why.