Welcome to the Webflow UI
Discover the power of Webflow, the web experience platform that empowers teams to design, collaborate, and visually develop world-class websites. In this video, we provide an overview of the Webflow user interface (UI) to help you get started quickly and confidently. Whether you're a content marketer or a seasoned web designer, learn how to navigate the tools and features that make Webflow the website experience platform for the modern web.
Video transcript
Welcome to the Webflow UI. In this video we'll give you a quick tour of the main areas of the Designer so you know where everything lives before you start building.
The Designer is where you build your site. At the center is the canvas — this is where your site renders as you build it. Everything you add and style shows up here in real time.
Along the top you have the toolbar. On the left side of the toolbar you'll find controls for switching between pages, previewing your site, and managing breakpoints for responsive design. On the right side you'll find publishing controls and access to your site settings.
On the left side of the screen is the left panel, which houses several key tools. The Add panel lets you drag elements onto the canvas. The Navigator shows you the structure of your page as a nested element tree — useful for selecting and organizing elements. The Pages panel is where you manage all your pages. The CMS panel gives you access to your collections and content. And the Assets panel is where your uploaded images and files live.
On the right side is the Style panel, where you control everything visual about a selected element — layout, spacing, typography, backgrounds, borders, effects, and more. Below that is the Element Settings panel, which shows configuration options specific to the type of element you have selected.
At the bottom of the screen you'll find the Interactions panel trigger for adding animations and motion to elements.
That's the basic layout of the Webflow Designer. As you build, you'll move between these panels constantly — the canvas to see what you're making, the left panel to add and organize, and the right panel to style and configure.
