Intro to Webflow - Webflow help
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.
Before you get started
Check Webflow’s supported browsers, devices, and screen resolutions.
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.
Overview of the Webflow interface
When you open your site in Webflow, the main screen that shows your site is the canvas. Surrounding the canvas are the following toolbars and panels:
- The top bar includes tabbed navigation, the context bar, and site actions (e.g., collaboration & publishing tools).
- The canvas bar includes undo/redo, breadcrumb navigation, expanded breakpoints, and canvas settings.
- The left toolbar includes the main menu, various tool and navigation panels, settings, site audit, and tutorials.
- The right toolbar includes element styles, settings, and interactions.
The tools you have access to in Webflow differ depending on your site role (e.g., reviewer, content editor, etc.).
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. Webflow saves your work automatically, but you can manually save your site by pressing Command + S (on Mac) or Control + S (on Windows).
The top bar
The top bar gives you quick access to design modes, the CMS, Analyze, Optimize, locales, a page switcher, and site actions.
The main tabbed navigation includes the Design tab, CMS tab, and Insights tab.
- Design tab — This tab indicates the current mode (e.g., design, build, etc.) and lets you switch between modes or create a page branches. A member's site role determines what modes are available. For example, site managers and designers can access design mode, while marketers can only access build mode.
- CMS tab — Opens the CMS (Content Management System) panel, where you can create and manage Collections, Collection items, and Ecommerce products and categories.
- Insights tab — Opens the Insights panel, where you can access Analyze and Optimize. Analyze provides site-wide analytics with actionable insights. Optimize lets you run experiments on your site to test different styles, layouts, flows, verbiage, images, and more.
Context bar
The context bar lets you manage site optimizations with Optimize and switch between locales, pages, Collection pages, and Collection items. 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 are related to the specific page you're on or the site itself. Team members collaborating on the site in real-time are also listed here with an avatar or count.
- Analyze mode — Get Analyze page-level analytics and insights (e.g., how far do visitors scroll and where do they click).
- Comments — Review comments other team members left or add your own feedback/notes.
- Preview — Switch to preview mode.
- Share — Generate a read-only site link.
- Publish — Publish your site.
The canvas bar
The canvas bar is positioned above the canvas by default, but you can move it below in canvas settings.
- Undo/redo icons — Quick revert or reapply changes.
- Breadcrumb navigation — Shows you the element hierarchy of the selected element.
- Canvas settings — Different options (e.g., rulers, guides, text zoom preview).
- Breakpoints — Preview and edit for different device sizes.
The left toolbar
Contains the main menu and panels for website structuring.
Click the Webflow logo to access the main menu.
- Quick find for elements, components, pages, etc.
- Undo/redo actions
- Export code
- Keyboard shortcuts
- Open CSS preview
- Get help or send feedback
Panels and site activity log
- Add panel — Shortcut: A
- Pages panel — Shortcut: P
- Navigator panel — Shortcut: Z
- Components panel — Shortcut: Shift + A
- Variables panel — Shortcut: G
- Style selectors panel — Shortcut: J
- Assets panel — Shortcut: L
- Libraries panel — Shortcut: L
- Apps panel — Shortcut: E
- Site Activity log — Design changes made to your site
The Site Activity log is available for Webflow Enterprise customers and Enterprise partners. Any team member using design, build, or edit mode can see Site Activity log details.
Settings, AI learning assistant, audits, quick find, and tutorials
- Settings panel — Interface, search, backup, localization.
- AI learning assistant — AI-powered help.
- Audit panel — Shortcut: U.
- Quick find — Shortcut: Command + E (Mac), Control + E (Windows).
- Video tutorials panel — Free video courses.
The right toolbar
Contains panels for element styles, settings, and interactions.
- Style panel — Shortcut: S.
- Element settings panel — Shortcut: D.
- Interactions panel — Shortcut: H.
FAQ
What browsers does Webflow support?
Webflow officially supports the last three major versions of all modern browsers: Chrome, Edge, Firefox, and Safari. This applies to both the platform and published sites.
For features with limited support, see related articles:
Webflow does not support Internet Explorer.
You can determine your browser and operating system version with What’s My Browser.
What screen resolutions/devices does Webflow support?
Webflow requires a desktop/laptop computer with a screen width at least 1268px.
Why is Webflow an online/hosted app — why not a downloadable app?
Webflow is online/hosted to allow in-browser design and rapid updates.
- WYSIWYG design — direct effect on HTML/CSS.
- Fast updates — Always the latest version, no manual updates.