Find and add elements from the Add panel, including Box, Quick Stack, and more.
The Add panel gives you quick, visual access to the elements you can add to your site. Elements are grouped into sections, so you can find what you need and add it to the canvas or the Navigator in a few clicks. Use the Box element for structure and layout.
Add panel sections
The Add panel has two tabs, Elements and Layouts. The Elements tab is divided into these sections:
-
Structure — Box, Quick Stack, and Page Slot
-
Typography — Heading, Text Block, Paragraph, Block Quote, and Rich Text
-
Links — Link Block, Text Link, and Button
-
CMS — Collection List
-
Media — Image, Video, YouTube, Lottie Animation, Spline Scene, Rive, Background Video, and Lightbox
-
Forms — Form Block, Label, Input, File Upload, Text Area, Checkbox, Radio Button, Select, reCAPTCHA, and Form Button
-
Custom Code — Pricing calculator, Shader, Quotes carousel, Multistep form, Code Embed, and Custom Element
-
Other — List, List Item, Search, Dropdown, Locales List, Navbar, Slider, Tabs, Map, Code Block, Facebook, and X (Twitter)
Set a Box’s tag in the Settings panel, and change its layout, such as flex or grid, with the display setting in the Style panel. To build a grid or columns, add a Box and set its display to Grid, then add a Box inside it for each column. To find a Box without opening the Add panel, use Quick find.
Good to know
You can also add elements to the canvas using Quick find. Press Command + E (on Mac) or Control + E (on Windows) to open it.
Ways to add elements
There are three ways to add elements from the Add panel to the page you’re working on:
- Click to add in place
- Drag onto the canvas
- Drag into the Navigator
Click to add in place
Clicking to add is a quick way to add an element to the canvas.
To click to add an element:
- Select an existing element on the page
- Open the Add panel
- Click the element you want to add
The new element is added to your page. Where it first appears depends on the selected element. If the selected element is a text, media, or button element, the new element appears beside or beneath it.
If you’ve selected a parent element, like a Box, the new element is added inside it, at the bottom.
If you don’t have an element selected and you click to add an element, it’s 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 the canvas
You can also drag an element from the Add panel and drop it onto the canvas. As you drag in an element, the orange indicator shows which parent element you’re placing it into. The blue indicator shows the position of the element inside the parent element.
If you have the Navigator open on the right, you can also see exactly where you’re dropping the element as you drag it on the canvas.
Drag into the Navigator
The third way to add an element to your page is with the Navigator. The Navigator shows the full visual outline of your page, so you can drag an element from the Add panel and drop it into the Navigator with precision.
Default positioning of elements
When you add an element to the canvas, it’s positioned relative to its sibling elements. This default positioning depends on the default display settings of both the added element and its siblings.
If you add an element with a default display setting of Block, it always appears on its own line, above or beneath the surrounding elements.
Elements with a display setting of Inline Block are placed beneath or above Block elements, or beside other Inline Block elements. All elements in the Add panel are Block elements, except for these Inline Block elements:
The only element with a display setting of Inline is the Text Link element. Inline elements are positioned similarly to Inline Block elements.
You can change the display settings of most elements from the Style panel. Learn more about display settings.