Using the Bricks Panel

How to browse, search, and add bricks to your page from the Bricks panel in the Page Builder.

Updated 2026-06-21
bricks
page builder
drag and drop
add section

The Bricks panel is the left-hand sidebar in the Page Builder. It lists every brick available to your plan, organised by category, and lets you add any brick to your page with a single click or drag.

Opening the Bricks panel

Click the Bricks icon (the grid icon) in the left toolbar of the Page Builder. The panel slides open and shows all available brick categories.

Browsing bricks

Bricks are grouped into tabs:

  • All — every brick in one scrollable list.
  • Layout — structural bricks (Hero, Container, Two-column, Spacer).
  • Content — text and media bricks (Rich Text, Image, Video, Accordion).
  • Marketing — conversion bricks (Feature Grid, Testimonials, CTA).
  • Media — gallery and visual bricks (Carousel, Gallery, Video Hero).

Premium bricks show a crown icon. You can still add them on any plan — they display a plan-upgrade prompt on the live storefront until you upgrade.

Searching for a brick

Type in the search box at the top of the Bricks panel to filter by name. The search is instant — results appear as you type.

Adding a brick to the page

There are three ways to add a brick:

  1. Click — click any brick thumbnail. Sellrn inserts it at the end of the page (or after the currently selected brick).
  2. Drag and drop — drag a brick from the panel and drop it anywhere on the canvas to insert it in a specific position.
  3. + button on canvas — hover between two existing bricks to reveal the + insertion handle, then click it to open a mini brick picker.

Reordering bricks

Once a brick is on the canvas, you can reorder it by:

  • Dragging it up or down using the drag handle that appears when you hover over a brick.
  • Using the Move up / Move down arrows in the brick's context menu (right-click or three-dot menu in the toolbar above the brick).
  • Opening the Layers panel and dragging items in the layer list.

Duplicating and deleting bricks

Select a brick on the canvas, then use the toolbar above it:

  • Duplicate — creates an identical copy directly below.
  • Delete — removes the brick. Use Cmd Z / Ctrl Z to undo.

Keyboard shortcut

Press B anywhere in the Page Builder to toggle the Bricks panel open or closed.