The Designer allows you to build your site structure, design the look and feel, add content, interactions, animations, and custom code to create fully functioning websites, landing pages, announcement flyers, prototypes, presentations and so on. 

Here, you visually manipulate the HTML content, set CSS properties, and create interactions without writing any javascript – instead of writing code, you manipulate it visually. And, as you build your website and lay out your content, the Designer creates clean, semantic code that’s ready to publish to the web.

 

Accessing the Designer

You can access the Webflow Designer in one of three ways:

  • From the dashboard - by clicking on your project thumbnail
  • From the project settings - by clicking on the Designer button in the upper toolbar of the project
  • From the Editor - by clicking the menu button at the lower left corner of the Editor and clicking on Designer.
Need to know
The Webflow Designer is an online app that works best on the latest version of Chrome or Safari. It also works on the browsers like Vivaldi and Brave. Due to technical issues with Firefox (a known bug with scrollbars), we're unable to fully support Firefox yet.
The Designer requires a monitor or laptop that has a screen width of at least 1280px. This requirement is the sum of the left sidebar, the Designer canvas, and the right sidebar.

Anatomy of the Designer

The Designer consists of the main canvas as well as a set of toolbars and panels. In this guide, we give you a glimpse of each of the following:

The left toolbar

The left toolbar provides a set of links and tools that allow you to structure your web project. The icons at the top of the left toolbar hide away many of the Designer panels:

Menu – Webflow logo – opens a menu which allows you to navigate to the Dashboard, the Editor, or the Project Settings of the currently open project.

 

Add Elements (A) - opens the Add Panel from where you can add elements from the Elements panel or symbols from the Symbols Panel.

 

Pages (P) - opens the Pages Panel where we can organize and manage page settings. Learn more about the Pages Panel.

 

CMS - opens the CMS or Collections Panel where you can create and modify Collections and Collection items — all your dynamic content.

 

Assets (J) - opens the Asset Manager. From here, we can upload and organize assets you use or link to in your project.

 

The icons stacked at the bottom of the left toolbar provide some Canvas view and help settings.

The Canvas view settings are presented in first 4 icons:

  • Hide element edges
  • Hide empty elements
  • Show/hide guide overlays
  • Enable/disable x-ray mode

These allow you to view the structure of your layout in various settings allowing for better structuring or viewing your layout. For example, the guide overlays guide you to create a consistent design so your elements are stacked and positioned evenly throughout the site.

 

Video Tutorials - opens the Video Tutorials Panel where you can watch all Webflow video courses.

Access the Webflow University video tutorial right within the Designer
Access the Webflow University video tutorial right within the Designer. Just click on the Camera icon on the bottom left.

Help and feedback - allows you to browse Webflow help guides right in the Designer. From here, you can also navigate to the Webflow University Guides, Video courses or the Webflow Forum. Or, you can send us feedback or a help request.

The Help & feedback modal in the Webflow Designer
Help & feedback in the Webflow Designer

Keyboard shortcuts - shows the keyboard shortcuts that help you speed up your design workflow in the Designer. You can also see these shortcuts by pressing Shift + /.

The Canvas

The major area in the Designer is the Canvas. It's where you can interact with the page in real-time. You can select elements, move them around, and edit content right on the page. Learn more about the Canvas.

 

The top bar

The top bar provides another set of view settings as well as some useful tools to save, publish and even export your site. Starting from the left-hand side, right next to the menu button, and moving to the right, you have the following set of tools:

Page indicator - shows which page you are currently on. And when you click this indicator, it opens the Pages Panel.

Page indicator

Preview - toggles between the preview and design mode of the Designer, allowing you to see how your project will look when published.

Preview toggle

Breakpoints buttons - located in the middle of the top bar, these icons allow you to switch between different breakpoints to see and edit the design of your project on these breakpoints. Learn more about breakpoints.

 

Undo and Redo - allow you to undo or redo actions you took in the Designer like applying a style or deleting an element.

Save - shows you when your work is being saved – indicated with gray ellipses (…). and when your work is saved – indicated with a green checkmark. Your work in the Designer is saved automatically. You can manually save your project by pressing CMD+S in Mac or CTRL +S in Windows. Clicking this icon will not save your project.

Export code - allows you to export the code of the current project, which is prepared and downloadable in a zip file. Learn more.

 

Publish - allows you to choose your publish destination and publish your changes instantly to either your subdomain and/or your custom domain. Learn more.

 

The bottom navigation breadcrumb bar

The button bar shows you the hierarchy of the selected element. You can see where it’s located, inside which other parent elements, You can even select any parent element by clicking on its label in this breadcrumb bar.

 

The right panels

The third major section — the panels on the right, give you extremely granular control over your elements. Here you have 5 major panels:

  • The Style Panel (S)
  • The Settings Panel (D)
  • The Navigator (F)
  • The Style Manager (G)
  • The Interactions Panel (H)

Style Panel (S) - gives you access to all CSS properties available for the select element. You can simply enter these values in their appropriate fields and see the style applied to your elements on the canvas instantly. Learn more.

 

Settings Panel (D) - gives you access to various settings available for the select element.

Navigator (F) - shows the hierarchy of every element on the page you are currently on. Here, you can visually interact with these elements. Learn more.

Style Manager (G) - displays a complete list of classes, combo classes, and tags you've created or edited in your project. It's a quick way to rename or even clean up any style that aren’t being used anymore. Learn more.

Interactions Panel (H) - allows you to create interactions and apply them to the selected element. Learn more.

Read-only mode

You can share a preview link of your project with your friends or the Webflow community and staff when you need advice or design help. This link opens up the Designer in read-only mode and allows anyone with access to see and manipulate the layout and design of the project.

Changes cannot be made to your project when it's opened in read-only mode. It’s only used for troubleshooting and exploration purposes.

To enable and copy this link:

  1. Go to the Project Settings
  2. Clicking on the Share button in the upper toolbar
  3. Toggle the On/Off switch
  4. Copy the link

You can turn this link off any time and it will invalidate the link you’ve copied and shared. By turning it back on, you will receive the same link. You can generate a different link if you wish so by clicking on the Generate New Share Link button.

See the Designer in read-only mode for a sample project.

Multiple-user collaboration

Currently, it's not possible for multiple people to access the same Webflow project in the Designer at the same time. 

When a someone is active in the Designer, and another person tries to access the same project, an alert will be shown, asking them if they would like to take over. If they do, the person using the Designer will be redirected to the project settings.

The Editor, on the other hand, allows multiple people to edit static and dynamic content at the same time. A person can also work in the Designer even as many people work in the Editor at the same time. If two people are editing the same content at the same time, the last edits "win," so you'll still want to coordinate editing times with your teammates. Learn more about the Editor.

Why the Designer is an online app

The Webflow Designer is an online app/hosted program because we believe that web design tools should let you design in the browser and immediately see the results. Here are a few more reasons why Webflow is a hosted program rather than a downloadable program:

  • What you see is what you get (WYSIWYG) — in Webflow, everything you're doing has a direct effect on the HTML and CSS of your website. So what you see in Webflow is always what you see when you publish your site.
  • Pushing updates and improvements is fast — as a hosted app, we can develop, test, and push new features and bug fixes to our servers in minutes. That way, everyone is always running the latest and greatest version of Webflow.
  • True collaboration — with web design workflows becoming more collaborative, having an online platform makes it easier for entire teams to access and edit a website.
  • There are many other reasons — from hosting in the cloud to having dead-simple form handling to building tools that evolve with bleeding-edge web technologies — the benefits only become more clear as time goes by. We think you’ll agree.