The Add Elements Panel gives you quick, visual access to the various elements you can add to your project.
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:
- Layout
- Basic
- Typography
- CMS
- Media
- Forms
- Components
There are three ways to add elements from the Add Elements Panel to the page you’re working on:
- Click to add in place
- Drag onto canvas
- Drag into the navigator
Good to know
You can also add elements onto the canvas using Quick find (CMD+E/CTRL+E). Learn how to use quick find.
Click to add in place
Clicking to add is a quick way to add an element onto the canvas.
- Select an existing element on the page.
- Open the Add Elements panel.
- Click on the element you want to add.
- 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.
