Add Elements panel

The Add Elements panel gives us quick, visual access to the various elements we can add right to our project. And the panel is divided into simple categories like Typography, which contains all our elements related to text. And Forms, which contains all the building blocks we need to create a form.

There are four ways to add elements from the Add Elements panel to the page we're on: Click to add in place. Drag onto the Canvas. Drag straight into the Navigator and finally, you can use quick find to add elements onto the canvas without opening the Add Elements panel.

Click to add in place

Let's start with the first one. We can select an existing element on the page, and simply go to add. And click on the element we want to add.

Since we selected the heading there, the paragraph was added right underneath the heading. Want a button right under that? We can go to Add, and click the button. Same idea here. Let's delete those for now.

Another thing to mention: we saw that when our heading was selected, by clicking to add the paragraph element, the paragraph was added right underneath. It was added right underneath the heading.

If you select a parent element, like a div block or a section, and you click to add a new element? That element will be placed inside the parent element right at the bottom.

Drag onto the canvas

So. Clicking an element from the Add Elements panel. That's...the first option.

Number 2 — the second way to add elements from the Add Elements panel, is by dragging and dropping right onto the Canvas.

And as we're dragging in this paragraph, the blue indicator tells us where we're placing it: which is right inside the wrapper. And our new element — its position is also indicated in blue. We can also see its position in the Navigator. So we can see exactly where we're dropping that. We can always move this later. We can move it around. But that's dragging and dropping onto the Canvas.

Drag into Navigator

The third way is exceptionally accurate. And that's using the Navigator.

And since we have our full hierarchy — our visual outline here, with precision we can drag and drop right from the Add Elements panel into the Navigator.

Finally, and my personal favorite. We can use quick find to add elements to our canvas,

Add using quick find

without opening the Add Elements panel. We're just clicking Command + E or Command + K on Mac or Control + E or Control + K on Windows. And adding the elements we want.

Recap

So, from the Add Elements panel, we can click right on the element we want, or we can drag an element onto the Canvas, or we can drag an element right into the Navigator and lastly, we can add an element to our page with quick find without opening the Add Elements panel at all.

That's using the Add Elements panel in Webflow.