Insert Elements section

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

The Insert Elements Section enables you swift, visual entry to the different components you can include in your project.

The Webflow Elements Panel

The section is categorized into basic groups. For instance, the Font style area encompasses all elements concerning text. Another division for Forms comprises all the structures you can utilize to create a form. Below are all the categories and their corresponding kinds of elements:

  • Layout
  • Fundamental
  • Typography
  • Content Management System
  • Media
  • Forms
  • Components

There are three methods to include elements from the Insert Elements Section to the ongoing page:

  • Tap to insert on spot
  • Drag onto workspace
  • Drag into the outline
Nice to be aware of
You can additionally include elements onto the workspace utilizing Rapid discover (CMD+E/CTRL+E). Get familiar with how to employ rapid discover.

Tap to insert on spot

Inserting by tapping is a speedy approach to insert an element onto the workspace.

  1. Pick an existing element on the page.
  2. Uncover the Insert Elements section.
  3. Hit on the element you desire to insert.
  4. The fresh element will be inserted onto your page.
 

Where the incorporated element initially emerges is affiliated with the picked element. Thus, if the chosen element is a text, media, or button element, the inserted element will appear beside or beneath the selected element.

If you’ve initially chosen a parent element, like a div block or a container, the fresh element will be inserted inside this structural element, at the base.

 

If you do not possess an element selected and you tap to include an element, it will be inserted at the base of the page inside the Body element.

You can always modify the position of an element by dragging it wherever you desire.

Drag onto workspace

The second method to insert elements from the Insert Elements Section is by dragging and depositing the element onto the Workspace.

While you drag in an element, the orange indicator notifies you of which parent element you’re positioning it into. The blue indicator reveals the location of the element inside the parent element.

 

If you have the Outline tab open on the right, you can additionally observe precisely where you’re placing this element as you drag to relocate it on the workspace.

 

Drag into outline

The third approach to insert an element onto your page is by utilizing the Outline.

In the Outline, you can witness the complete visual plan of your page. Consequently, you can drag and release an element from the Insert Elements section right into the Outline with accuracy.

 

Default positioning of elements

Upon inserting an element onto the workspace, it is positioned in relation to its peer elements. This standard positioning is governed by the default visibility settings of both the added element and its peer elements.

Hence, if you’re adding an element with default Visibility Setting of Block, it will consistently manifest on its solitary line, above or beneath the adjacent elements.

While adding elements that possess a Visibility Setting of Inline Block, they will be positioned beneath or above Block elements or beside other Inline Block elements. All elements in the Insert Elements section are Block elements, barring these elements that are Inline Block:

  • Link Block
  • Button
  • Image
  • Lightbox Link
  • Dropdown
  • Form Button

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

Learn more about the Visibility Setting.

You can modify the visibility settings of most elements from the Styles Panel.

Ewan Mak
Latest posts by Ewan Mak (see all)