Intro to the Designer

Learn your way around the Webflow Designer.

This video features an old UI. Updated version coming soon!
Note: We’re transitioning to Workspaces, and are in the process of updating our content. Visit the Workspaces blog post to read more about these updates and changes, or visit our updated Intro to the Designer lesson. You can also learn how to check if your account is on Workspaces.

In this lesson:

  1. Accessing the Designer
  2. Anatomy of the Designer
  3. Multiple-user collaboration
  4. Why the Designer is an online app

The Webflow 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, prototypes, presentations, and more. 

In the Designer you can visually manipulate HTML content, set CSS properties, and create interactions without writing JavaScript. As you build your website, the Designer creates clean, semantic, web-ready code.

A Webflow designer displays the Webflow University home page. The Navigator and style panel are open in view.

Accessing the Designer

There are 3 ways to access the Webflow Designer:

  1. From the Dashboard by clicking your project thumbnail
  2. From Project settings by clicking Designer in the upper toolbar of the project
  3. From the Editor by clicking the Menu button at the lower left corner of the Editor and choosing Designer

Designer requirements: supported browsers

Webflow officially supports the Designer on the latest version of Chrome or Safari’s evergreen release, plus 2 versions for varying update cycles. Webflow also unofficially supports the use of all modern browsers.

Platform feature
iOS Safari
Chrome for Android
Evergreen +2
Editor & Data Manager
Evergreen +2
Evergreen +2
Published Sites / Exported Code
Evergreen +3
Evergreen +3
Evergreen +3
Evergreen +3
Evergreen +3
Evergreen +3

* Degree of browser support depends upon features used (e.g., filter has partial support in Edge). More details can be found at:

On June 15, 2022, Microsoft officially ended support for Internet Explorer 11 (IE11). While sites published in Webflow use industry standard features supported in modern web browsers, some features unsupported by IE11 might function incorrectly on that browser. Learn more about IE11 support from Microsoft.

Webflow doesn’t support IE 9 or IE 10 in any situation. Learn more about this decision

Good to know: An evergreen browser is one that updates itself automatically, meaning that most people have the newest, automatically updated version.

If you run into issues using Webflow on experimental browsers, please report your issue under the experimental browsers category on the Webflow Forum.

Note: You can determine the browser and operating system version you're using with What's my Browser.

Designer requirements: supported screen resolutions

The Designer requires a monitor or laptop that has a screen width of at least 1268px. 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 and a set of toolbars and panels. Following is an overview of:

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:

  • Main menu
  • Add elements panel
  • Symbols panel
  • Navigator panel
  • Pages panel
  • CMS panel
  • Ecommerce panel
  • Assets panel
  • Settings panel
  • Audits panel
  • Find anything search tool
  • Video tutorials panel
  • Help settings
Main menu — Webflow logo

When you click the Webflow icon, you'll see a menu which allows you to navigate to the Dashboard, the Editor, or the Project settings of the currently open project.

Add elements panel — shortcut: A

This opens the Add panel from where you can add elements from the Elements panel or prebuilt layouts from the Layouts panel.

Symbols panel — shortcut: shift+A

This opens the Symbols panel from where you can add symbols from the Symbols panel 

Navigator — shortcut: Z

Shows the hierarchy of every element on the page you are currently on. Here, you can visually interact with these elements. Learn more about the Navigator.

Pages panel — shortcut: P

This opens the Pages Panel where we can organize and manage page settings. Learn more about the Pages panel.

CMS panel

It opens the CMS Collections panel where you can create and modify Collections and Collection items.

Ecommerce panel

It opens the Ecommerce panel where you can create and modify products and product categories. Here, you'll also see the orders that you've received. Learn more about the Ecommerce panel.

Assets panel

It opens the Assets panel. From here, you can upload and organize assets you use or link to in your project. Learn more about the Assets panel.

Settings panel

It opens the settings panel where you can set up various settings such as search settings and Backup settings.

Audits panel — shortcut: U

It opens the Audit panel where you can address common accessibility-related issues in your project. Learn more about the Audits panel.

Quick find search tool — shortcut: Command + E (on Mac) or Control + E (on Windows)

It opens the Quick find tool that is a powerful search bar in the Designer that will speed up your workflow and boost your efficiency as you build in Webflow. Learn more about Quick find.

Video tutorials panel

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

Help settings

Help settings provide you with tools to make using the Designer easier.

  • 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 + /.
  • CSS preview — shows the CSS generated for the selected element on the canvas. This preview also lets us copy the generated CSS to use wherever we lik.

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.

The designer displays a highlighted Page name, Home.
Page indicator

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

The designers displays a highlighted toggle preview button.
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.

The designers breakpoint section displays a three dot button to add larger breakpoints, four breakpoint options, width dimensions and zoom percentage.
Undo and Redo

Allow you to undo or redo actions you took in the Designer like applying a style or deleting an element.

The top bar displays arrows for undo and redo (highlighted), a changes status indicator, export code button, share project and publish button.

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.

On the left, a changes saved status is displayed with the green check mark icon. On the right, the three ellipses indicate there are unsaved changes.
Export code 

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


This option allows you to enable and share a preview link to the current page of the Designer 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.

From here, you can also invite collaborators and allow them to edit the content of your site.


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 bottom navigation breadcrumb bar displays a body, section, container, grid and a content wrapper.

The right panels

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

The four right panels are displayed with custom edits on each panel.

Here you have 4 major panels:

  1. Style panel (S)
  2. Element settings panel (D)
  3. Style manager (G)
  4. Interactions panel (H)
Style panel — shortcut: 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.

Element settings panel — shortcut: D

Gives you access to various settings available for the select element.

Style Manager — shortcut: 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 — shortcut: H

Allows you to create interactions and apply them to the selected element. Learn more.

Multiple-user collaboration

If you're on a team plan, it's not possible for multiple people to access the same Webflow project in the Designer at the same time.

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.

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.