Adding Elements
Every element on a page came out of the Add panel. Open it with the + button () near the left end of the toolbar,
by pressing Ctrl+A (Cmd+A on Mac), or — on an empty page — by clicking the + in
the middle of the canvas.
Click a tile
Clicking a tile inserts that element immediately, and what you had selected decides
where it goes:
- With an element selected, the new element goes inside it, as its last child.
- With nothing selected — press Esc to deselect — it's added at the end of the
page.
After inserting, the panel closes and the new element is selected, so you can style it or
keep nesting into it straight away.
Drag a tile onto the canvas
Dragging puts the element exactly where you want it instead of relying on the selection.
As you drag, a placeholder shows where it will land; drop when it's in the right spot.
Use the click when you're building downward into the thing you just made, and the drag
when the destination is somewhere else on the page.
Undo
Inserted the wrong thing, or into the wrong place? Ctrl+Z (Cmd+Z on Mac) removes it.
Finding elements
The search box filters every category at once — type "link" and you get Text Link and
Container Link. Below it, elements are grouped into four categories. Click a category
header to expand or collapse it.
Basic — the elements most pages are built from:
- Container
- Image
- Text
- Rich Text
- Container Link
- Text Link
Advanced:
- JavaScript Code
- Swiper
- Component
- Shortcode
- Container Shortcode
Dynamic:
- Post Loop Builder
- Repeater Field
- Term Loop Builder
- Widget
Other:
- CSS Code
- HTML5 Video
- HTML Code
- PHP Code
- SVG Icon
- OEmbed
Elements that can't be used in the document you're editing aren't offered — for example,
Template Content Area (which only works in templates) doesn't appear in the panel when
you're editing a page.
Design Library
The book icon () in the top-right corner of the panel's header
opens the Design Library, where you insert
pre-built designs instead of building from single elements.
Good to know
The Add panel and the element tree share the left side of the editor, so opening one
closes the other.