Designer webflow UI tutorial

The Designer is the heart of Webflow's visual web design platform, the canvas

on which you'll design and develop beautiful, responsive websites.

Webflow can be divided in to 3 part:

1. Left Toolbar contains

• Elements Panel
• Symbol Manager
• Navigator
• Pages Panel
• CMS Collection
• E-Commerce Section
• Asset Manager
• Settings

Help Section in Left Toolbar contains

• Audits
• Search
• Video Tutorial
• Help Section

2. Canvas

• Webflow canvas is where we can interact with elements of pages.
• We can resize images, control grid elements, copy paste elements etc.
• It is visual approach for editing a page
• All elements in Webflow are arrange in a boxes which can be Sections, Containers and Div each there own unique uses
• It also allows us to view pages in different screen sizes such as Web View, Tablet View, Mobile Portrait and Landscape view
• It also allows us to export code , publish website to Webflow or custom domain
• It also has preview mode where we can see how actual website will look like

3. Right Panel contain 4 sections

• Style section : which allows you to set Layout, control margin and paddings of the elements, create classes and tags, set sizes, positions etc
• Element settings panel : It allow you to create symbol override elements, change placeholder text, search settings, etc.
• Style Manager : Allows you to change class or tags names and see to how many pages it is applied to etc
• Interaction : Allows you set interaction methods with elements and option for giving little animations to it

In this video, we'll take you on a quick tour of the Designer's key features and sections,

so you'll know the lay of the land before we dive into details.