Learn your way around Webflow.
In Webflow, you can structure, build, and design your site across pages, branches, and locales. Webflow empowers you to create and manage dynamic content and data effectively and provides tools to analyze and optimize site performance. You can also share your work, solicit feedback, and finally, publish your site to dedicated environments (i.e., staging and production).
You can access Webflow from the Dashboard by clicking your site thumbnail or from Site settings by clicking Open site in the upper toolbar. The tools you have access to in Webflow differ depending on your site role (e.g., reviewer, content editor, etc.) so you can quickly access the tools you need — and forget about the tools you don’t.
Anatomy of Webflow
Webflow consists of the main canvas and:
- the top bar, which includes tabbed navigation, the context bar, and site actions (e.g., canvas modes, collaboration & publishing tools)
- the left toolbar and panels
- the right toolbar, which includes element styles, settings, & interactions
- the bottom bar, which includes breadcrumb navigation, expanded breakpoints, & canvas settings
Note
The tools you have access to in Webflow differ depending on your
site role
(e.g., reviewer, content editor, etc.).
Top bar
Tabbed navigation
The main tabbed navigation includes the Design tab, CMS tab, Insights tab, and View tab.
Design
The Design tab indicates your site’s current mode (e.g., design, build, etc.) and lets you switch between modes or create a page branch to design without affecting the main site. Your site role (e.g., site manager, marketer, content editor, etc.) determines what modes are available to you on that site. For example, site manager, designer, and limited designer roles can access design mode, while users with the marketer role can only access build mode.
CMS
The CMS tab opens the CMS (Content Management System) panel, where you can create and manage Collections and Collection items, Ecommerce products and categories, and Users.
Insights
The Insights tab opens the Insights panel, where you can view site and page analytics with Analyze and manage site optimization with Optimize.
View
The View tab (indicated with a “play” icon) lets you preview how your site will appear and function when published. To exit your site preview and return to working on your site, click the View tab again.
Context bar
The context bar lets you manage site optimizations with Optimize and switch between locales, pages (including Collection pages), Collection items, and breakpoints. It also indicates when you’re editing the main component (rather than a component instance), as well as design approval status.
Site actions
Site actions let you share and/or publish your site as well as view comments and collaborators currently working on the site. The team avatars display any teammates working on the site with you in real-time. This may appear as a team count (e.g., “2”) if you and your teammates are working on different pages of the site. You can click the avatars or the count to view more details about the pages your teammates are designing or editing.
The Site actions also show when your work is saved, indicated with a green “checkmark” icon. Webflow saves your work automatically. You can manually save your site by pressing Command + S (on Mac) or Control + S (on Windows). Clicking the save indicator will not save your site.
The left toolbar and panels
The left toolbar provides a set of panels with tools to help you structure your website. Each of the following panels has a corresponding icon in the left toolbar and expand when the icon is clicked:
Main menu — Webflow logo
When you click the Webflow logo icon, a dropdown menu appears, from which you can navigate to the Dashboard or the Site settings of the currently open site. From the main menu, you can also:
- use Quick find
- undo your last action
- redo your last action
- export code
- view keyboard shortcuts
- open CSS preview
- get help or send feedback
Add panel
The Add panel (shortcut: A) allows you to add elements and layouts to your site from their respective tabs.
Pages panel
The Pages panel (shortcut: P) allows you to organize and manage your site pages and page settings. You can access page settings and a smaller version of the Pages panel in the context bar.
Navigator
The Navigator (shortcut: Z) shows the element hierarchy on the canvas for the current page and lets you interact with those elements.
Components panel
The Components panel (shortcut: Shift + A) lets you create components and add them to the canvas.
Variables panel
The Variables panel lets you view and create variables so you can reuse them for a consistent design experience.
Style selectors panel
The Style selectors panel (shortcut: G) lets you view, rename, clean up, and search for classes and tags in use on your site.
Assets panel
The Assets panel (shortcut: J) lets you upload and organize assets (e.g., documents, images, and animations) for use on your site.
Logic panel
The Logic panel (shortcut: L) allows you to create, view, and modify automated workflows (also known as “flows”).
Apps panel
The Apps panel (shortcut: E) displays all installed apps available on your site and/or Workspace.
Site Activity log
The Site Activity log gives you and your teammates valuable visibility into the most important design changes made to your site. It logs publish activity, backup creation and restoration, page creation, deletion, duplication, and renaming, and any changes to classes, components, and/or custom code.
Note
The Site Activity log is available for Webflow Enterprise
customers and Enterprise partners. Any team member using design mode,
build mode, or edit mode can see the Site Activity log
and
its details.
Settings panel
The Settings panel allows you to manage various settings, such as Search settings and Backup settings, and Localization settings. Here, you’ll also find the Interface tab, where you can choose your preferred brightness setting for the Designer interface.
AI Learning Assistant
The AI Learning Assistant gives you AI-powered help as you build in Webflow.
Audit panel
The Audit panel (shortcut: U) flags common accessibility-related issues on your site and provides suggestions to address them.
Quick find
Quick find (shortcut: Command + E (on Mac) or Control + E (on Windows)) is a search tool that helps you speed up your workflow and boost your efficiency as you build your site in Webflow.
Video tutorials panel
The Video tutorials panel provides a convenient way to watch all of Webflow’s free video courses.
The canvas
The largest area in Webflow is the canvas. This is where you can interact with the page and design in real-time. You can select elements, move them around, and edit content right on the page.
The right toolbar
The right toolbar contains three remaining panels that give you extremely granular control over your element styles, settings, and interactions.
Style panel
The Style panel (shortcut: S) lets you adjust all CSS properties available for a selected element. You can enter or choose these values in their appropriate fields to instantly apply the styles to your elements on the canvas.
Element settings panel
The Element settings panel (shortcut: D) provides access to various settings available for the currently selected element (e.g., link settings, custom attributes, component properties, etc.).
Interactions panel
The Interactions panel (shortcut: H) lets you create complex interactions and animations.
Bottom bar
Breadcrumb navigation
The breadcrumb navigation in the bottom bar shows you the element hierarchy of the selected element. You can check where the element is located inside other parent elements and select any of its parent elements by clicking its label in the breadcrumb navigation.
Canvas settings
Canvas settings let you apply different options and tools (e.g., rulers, guides, text zoom preview, etc.) to optimize your design process.
Breakpoints
The breakpoint icons let you switch between breakpoints to preview and edit the way your site looks on different device sizes.
Multiple-user collaboration
Multiple teammates can collaborate on a site together in Webflow. To keep the design process fluid, you can hand off design control between your teammates and see where other people are working within your site in real-time.
FAQ
What browsers does Webflow support?
Webflow officially supports the last three major versions of all modern browsers, including Chrome, Edge, Firefox, and Safari.
The degree of browser support depends upon features used (for example, filter has partial support in Edge). For features with limited support in some browsers, additional details can be found in their associated articles:
Webflow does not support Internet Explorer. While sites made in Webflow will continue to support all industry standard features supported in modern web browsers, we cannot guarantee that sites will function correctly in Internet Explorer. Learn more about sunsetting Internet Explorer support.
Pro tip
You can determine your browser and operating system version with
What’s My Browser.
What screen resolutions/devices does Webflow support?
Webflow requires a mouse-and-keyboard device (i.e., desktop or laptop computer) with a screen width of at least 1268px. This requirement is the sum of the left and right toolbars and the canvas.
Why is Webflow an online/hosted app — why not a downloadable app?
Webflow is an online/hosted app because we believe web design tools should let you design in the browser and immediately reflect the results. Other reasons Webflow is a hosted app rather than a downloadable app include:
-
What you see is what you get (WYSIWYG) — everything you do in Webflow directly affects the HTML and CSS of your site and reflects how your published site will look.
-
Fast updates and improvements — as a hosted app, we can develop, test, and push new features and bug fixes to our servers in minutes, so you’ll always run the latest and greatest version of Webflow without having to manually install updates.