The Webflow interface may seem complex at first, but it becomes more intuitive as you familiarize yourself with its structure. Here’s a breakdown of the key sections:
Add Elements Panel:
The Add Elements panel which is on the left sidebar is where you can add HTML elements to the canvas. These elements include Section, Div Block, Link Block, Text, Heading, Dynamic Data (from CMS), Image and, Other Media, Form Block, and Pre-made Components (like Navbar and Slider).
Clicking on any of these elements will add them to the canvas, allowing you to build out your webpage quickly.
Pages Panel:
The Pages panel shows all the static, Utility, CMS, E-commerce & User pages in your Webflow project. Use this panel to navigate between pages, access important page settings, and create new pages. Static pages are listed in white, and CMS template pages in purple. You can also:
Navigator Panel:
The Navigator panel allows you to view all HTML elements on a page, including their hierarchy. Key features include: Webflow components & Webflow collection lists
The panel is a clear way to see the structure of all HTML elements on the current page, and you can easily select any item in the Navigator or the bottom bar to modify it on the canvas.
Components Panel:
The Components panel allows you to create, reuse, and manage components within Webflow. Components are reusable elements that can be synchronized across your project. For example, you can create a subscriber form component, place it on multiple pages, and any edits made to it will update across all instances.
Variables Panel:
The Variables panel lets you create, manage, and view CSS variables for your project. These variables allow you to organize and store global values for properties like size, color, and font family. For instance, if you link a header's color to a variable, changing the variable's value updates that color everywhere it's used.
Style Selector Panel:
The Style Selector panel shows an overview of all HTML tags and classes in the project’s CSS stylesheet. You can: Search for and edit classes, See where and how classes are used, Mass remove unused classes and styles.
Assets Panel:
The Assets panel is where you can upload and access images for your project. Upload an image, then simply drag it onto the canvas or select it from the Assets panel to use it in your design.
CMS Panel:
Webflow's CMS (Content Management System) is a powerful tool for storing website content and generating new page templates. The CMS panel displays all the CMS collections in your project. You can:Create new collections (e.g., a blog),Add custom fields, Automatically generate, CMS template pages, Other pannel note mentioning includes
Logic Panel:
The Logic panel allows you to create workflows that add additional logic beyond HTML and CSS. For example, you can send webhooks after a form submission or automate other actions.
Membership Panel:
The Membership panel is for adding and managing users and access groups. However, do not enable this feature unless you're certain you'll use it, as it permanently adds new collections, pages, and settings to your project.
E-commerce Panel:
Similar to the Membership panel, only enable E-commerce if you plan to use it. It adds collections, pages, and settings for products, categories, discounts, orders, and subscriptions. Make sure Webflow E-commerce fits your needs with a demo before enabling it.
Apps Panel:
The Apps panel lets you search for and install apps from the Webflow marketplace. These third-party apps can add functionality not natively supported by Webflow, such as creating table components.
Fuite Extension:
The Fuite extension is a Webflow Designer workflow tool that helps improve the experience while building in Webflow. It's a popular extension that allows for better management of breakpoints, color swatches, and access to site settings directly in the designer.