Inspector Panel Overview
How to use the Inspector panel — the right-hand sidebar in the Page Builder that controls every brick's content, style, and layout settings.
The Inspector panel is the right-hand sidebar in the Page Builder. It shows editable fields for the currently selected brick — including content, style, animation, and advanced settings. If nothing is selected, the Inspector shows page-level settings.
Opening the Inspector
Click any brick on the canvas to select it. The Inspector panel opens automatically with that brick's settings. Press Escape to deselect and return to page settings.
Inspector tabs
The Inspector has up to four tabs, depending on the brick:
| Tab | What it contains |
|---|---|
| Content | Text fields, image uploads, links, and data sources (e.g. linked product). |
| Style | Background color, text color, padding, margin, border, and typography overrides. |
| Layout | Alignment, column count, gap, aspect ratio, and brick-specific layout options. |
| Advanced | Animation, custom CSS class, visibility conditions, and element ID. |
Content tab
The Content tab is brick-specific. A Hero brick shows heading, subheading, body text, CTA button label and URL, and a background image upload. A Product Grid shows the linked collection and number of columns. A Testimonials brick shows a list of testimonial entries.
All text fields support inline editing — you can also click the text directly on the canvas to edit it there without opening the Inspector.
Style tab
Common style controls across all bricks:
- Background — solid color (uses theme tokens or custom hex), gradient, or image. Transparency is supported.
- Padding — top/bottom and left/right section padding. Presets: Compact, Default, Relaxed, None.
- Text color — override the inherited foreground token for this brick.
- Border — bottom border for divider-style separation between sections.
Layout tab
Layout options are highly brick-specific. Examples:
- Hero — content alignment (left, center, right), image position (background, right column), height.
- Feature Grid — number of columns (2, 3, 4), icon style, card layout.
- Product Grid — columns (2–5), image aspect ratio, show/hide price and add-to-cart.
Advanced tab
- Animation — fade-in, slide-up, slide-in-left, scale-in. Set duration and delay. Animations trigger when the brick enters the viewport.
- Custom class — add a CSS class for targeting with custom CSS in Settings → Advanced.
- Element ID — set an anchor ID (e.g.
contact) so navigation links can scroll to this brick (/page#contact). - Hide on — conditionally hide the brick on mobile, tablet, or desktop.
Page-level settings (no brick selected)
When no brick is selected, the Inspector shows:
- Page title and slug.
- SEO meta — title tag and meta description.
- Social preview — Open Graph title, description, and image.
- Page background — default background color for the page.
- Status — Published or Draft.