Intro to the Webflow UI

Whether you are designing, developing, or supporting your team in webflow there are few key areas you need to know.

1. Topbar, 2. left toolbar, 3. canvas, 4. Right panels

• 1. Topbar

At the top left, we can see what mode we’re in Design or Build

CMS

• which gives access to collections, all are dynamic content

• 

  Insights

• setup analyze and optimize

• 

  Preview Button

• A quick way to interact with site as if it was fully published.

• Localization

  webflow optimize and localization settings, along with locals

In this dropdown we can see and jump to pages on site

Context bar displays information based on what we’re working on this could be anything the component we’re using

Comments panel

we can review feedback shared by collaborators

Share

whre we can share site option, we can share read only link with anyone and Invite user by mail through selecting their role

Publish

we cna go and publish our site live everyone to see .No need to setup FTP,PFT,ABC, TFN any complex hosting.

here we can access our current workspace

2. Left Toolbar

Add Elements panel

we can add things like button, viedo, form and other elements that will makeup our html structure.

we can also access libraries for different layout options we can use as starting points for parts of our page

Pages panel where we can organize and manage page settings for SEO

Navigator a panel that gives an overview of our page structure and hierarchy.

Components are where we can access all our pre-built elements and layouts that we can reuse throughout our website to keep things consistent, like a navbar or footer.

Variables Panel a collection of reusable design values that allows consistent styles across our project and update them globally.

Style Selectors, Classes and tags and where they used on the page

Assest manager : we can upload and organize multimedia assets we use in our site.

APPS you can access and install all the latest and greatest apps for you to use on your site

Backups where you can access past version of site and can manage

Help where you can identify and help

Search ctrl + E where you can find

Canvas

It is sort of main area, here where you put site together. its where you interact with all of the elements on your site. we can move elements just by clicking and dragging.

Canvas settings

provides number of options and tools to optimize design process and even stimulate site in different scales, vision previews and so on. the layer we build on the canvas is box model. This gives the tremendous flexibility to develop powerful, responsive across our different breakpoints.

4. Right panel(style panel)

   gives control of styling and layout of the elements. Padding, size, color, effects etc.

   

   here we can see CSS Preview , we can see the css for selected elements

   

   Settings panel which lets us change elements specific settings such as element ID, custom attributes,search index settings.

Interactions pannel lets us create custom animations based on triggers we can define.