Webflow

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

Help Section in Left Toolbar contains

2. Canvas

3. Right Panel contain 4 sections

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.

Adding elements in Webflow

 

 

 

Add Elements panel

Use the Add Elements panel to get quick, visual access to various elements you can add to your Webflow project.

The Add Elements Panel gives you quick, visual access to the various elements you can add to your project.

The Webflow Elements Panel

The panel is divided into simple categories. For example, the Typography section contains all elements related to text. Another category for Forms contains all the building blocks you can use to create a form. Here are all the sections and the type of elements that exist there:

There are three ways to add elements from the Add Elements Panel to the page you’re working on:

You can also add elements onto the canvas using Quick find (CMD+E/CTRL+E)

 

Click to add in place

Clicking to add is a quick way to add an element onto the canvas.

  1. Select an existing element on the page.
  2. Open the Add Elements panel. 
  3. Click on the element you want to add.
  4. The new element will be added onto your page.

Where the added element first appears is related to the selected element. So, if the selected element is a text, media or button element, the added element will appear beside or beneath the selected element.

If you’ve initially selected a parent element, like a div block or a container, the new element will be added inside this structure element, at the bottom.

 

If you don’t have an element selected and you click to add an element, it will be added at the bottom of the page inside the Body element.

You can always change the position of an element by dragging it anywhere you want.

Drag onto canvas

The second way to add elements from the Add Elements Panel, is by dragging and dropping the element onto the Canvas. 

As you drag in an element, the orange indicator tells you which parent element you're placing it into. The blue indicator shows the position of the element inside of the parent element.

 

If you have the Navigator tab open on the right, you can also see exactly where you’re dropping this element as you drag to reposition it on the canvas.

 

Drag into navigator

The third way to add an element onto your page is by using the Navigator. 

In the Navigator, you can see the full visual outline of your page. So, you can drag and drop an element from the Add Elements panel right into the Navigator with precision.

 

Default positioning of elements

When you add an element onto the canvas, it is positioned relative to its sibling elements. This default positioning is determined by the default display settings of both the added element and its siblings.

So, if you’re adding an element with default Display Setting of Block, it will always appear on it’s own line, above or beneath the surrounding elements.

When adding elements that have a Display Setting of Inline Block, they will be placed beneath or above Block elements or beside other Inline Block elements. All elements in the Add Elements panel are Block elements, except for these elements that are Inline Block:

The only element that has a Display Setting of Inline is the Text Link element. The positioning of Inline elements behaves similarly to Inline Block elements. 

Learn more about the Display Setting.

You can change the display settings of most elements from the Styles Panel.



Auto margin in Webflow

Breakpoints Shortcuts in Webflow

Breakpoint shortcuts

Learn how to use the number keys to rapidly switch between breakpoints in the Webflow Designer.

https://youtu.be/DV36RpAeNtA

Keyboard shortcuts can help speed up your web design and proofing process.

To switch between breakpoints in the Webflow Designer, use the number keys:

The Designer has many keyboard shortcuts to help you speed up your design workflow. The quickest way to see the list of all shortcuts in the Designer is pressing Shift + /. You can also access this list from the help menu on the bottom left of the Designer.

General keyboard shortcuts
View shortcuts
Left-hand toolbar shortcuts
Left-hand toolbar shortcuts
Right-hand tabs shortcuts
Copy/paste shortcuts
Undo/redo shortcuts
Device view shortcuts
Style panel shortcuts
Other shortcuts
Find

Client's guide to the Editor: Collections tab

Dashboard in Webflow

Element Hierarchy