Using the advanced Inspector and the Layers panel

When you want to see how a section is built under the hood or fine-tune every property with precision, use the Layers panel on the left and the Inspector (available under Advanced options) on the right.

Navigating page structure from the Layers panel and the editing path

Sometimes an element sits inside several nested containers (for example: Section → Grid → Card → Block → Heading) and clicking the exact parent container on the canvas is tricky. You have two direct ways to select it:

1. Layers panel (left rail): shows the full page tree, split between global pieces (Site menu, Banner, Site footer) and the current page’s Content. Use the arrows to expand or collapse levels and click any row to select it.
2. Editing path (context bar / breadcrumbs): when you select an element on the canvas, right-click and choose Select container to step up one level to its parent block or wrapping section.

Reordering, grouping into a block, wrapping, locking, renaming, or deleting elements

From Layers—or by right-clicking an element on the canvas—you can organize your structure:

• Reorder: drag rows up or down in Layers, or use Move up / Move down (Bring forward / Send backward).
• Group into a block / Wrap in: select one or more elements and choose Group into a block (or Wrap in → Block / Section) to place them inside a shared container and align them together.
• Rename: double-click any layer’s name in the Layers panel (Click to rename) to give it a clear label (for example, Pro Pricing Card).
• Lock element: click the padlock icon in Layers (Lock the element) so that piece can’t be moved or selected by mistake on the canvas until you unlock it.
• Hide or delete: hide the element on the current device or delete it with Backspace / Delete.

Layout group: Block, Row/Column (Flex), or Grid arrangement, alignment, direction, Gap, Padding, and Margin

With Advanced options turned on, the first group in the right-hand inspector is Layout:

• Arrangement type:
  • Row or Column (Flex): arranges child elements side by side (Row) or stacked vertically (Column). Lets you pick Align children, Distribution (Space between, Space around, Space evenly), and whether items Wrap onto new lines.
  • Grid: defines how many columns and rows the container has. When you select a Grid child, you’ll also see Columns it spans and Rows it spans so a featured card can span, for example, 2 columns.
• Gap between children (Gap): the automatic spacing between items inside the container. You can also drag it directly on the canvas (Drag to adjust the gap).
• Inner (Padding) and Outer (Margin) spacing: the space inside the box (between its border and its content) and outside the box. Edit them By axis (vertical and horizontal) or switch to Edit each side to set top, right, bottom, and left individually.
• Position: Static, Relative, Absolute, Fixed, or Sticky, plus stacking order (Z-Index).

Size group: width and height (Fixed, Fit content, Fill the space), min/max limits, and Overflow

In the Size group, you control how containers grow or shrink:

• Width and Height modes:
  • Fit content: the box sizes itself to match its text or child elements.
  • Fill the space (Fill): stretches the element to take up all available room inside a row, column, or grid cell (Fill cell).
  • Fixed (px), Relative (%), or Screen (vw / vh): sets an exact measurement in pixels, a percentage of the parent container, or a percentage of the viewport.
• Limits: add Min width, Max width, Min height, or Max height so a flexible block never stretches too wide on large monitors.
• Overflow: choose what happens when inner content exceeds the box size (Visible, Hidden, Clip, or Scroll).

Visual and Effects groups: fill layers (solid, gradient, background image/video), per-side borders, per-corner radius, shadows, opacity, and Blur

• Fill: stack multiple fill layers on a single element (for example, a background photo on the bottom and a semi-transparent linear or radial Gradient on top) and drag to reorder them.
• Border and Rounding: pick border width, style (Solid, Dashes, Dots), and color (on all sides or Edit each side), plus corner radius (Match all corners or Edit each corner).
• Shadows and Effects: add an outer Drop shadow, Inner shadow, adjust Opacity (%), apply a Filter, or add Background blur for frosted-glass effects.
• Interaction states (Normal, Hover, Pressed, Focused): use the Element state switcher at the top of the inspector to define what changes visually when a visitor hovers over or clicks the element.

Animation group: individual entrance and Hover animations, triggers, timing, and stagger

If you want a specific element to have a custom animation different from your brand’s global motion, open the Animation group:

• Entrance tab: choose from Fade (Fade in, Fade up, Fade down, From left/right), Scale (Zoom in, Zoom out, Pop, Blur in), Motion (Flip up, Flip sideways, Rotate in), Reveal, Letters animations (Rising letters, Letter by letter, Words, Typewriter), or Image masks (Iris, Cinematic zoom).
• Timing and When tabs: choose whether it starts On scroll into view or On page load, plays Once or Every time, set its Duration, Delay, Easing (Smooth, Snappy, Spring, Linear), and pick What animates—either The element as a whole or Its content, one by one with a Stagger gap between each card or letter.
• Hover tab: add a desktop micro-interaction on hover (Lift, Grow, Press, Glow, Dim, Shadow, Outline, or Tilt).

Editing interactive components from their dedicated tab

Whenever you select a composite component—or any piece inside it—a dedicated panel bearing that component’s name and icon appears both in the Essential mode context bar and as the first tab of the Inspector:

• Questions (FAQ) and Reviews: add, reorder, or edit questions and testimonials, and toggle stars, author photos, or the “See more” button.
• Gallery, Carousel (Slider), Card rail, and Tabs: manage slides or panels, how many cards are Visible at once, Autoplay, and navigation arrows or dots.
• Countdown: pick the target date and time and choose what happens When it ends.
• Before / After: swap the Before and After photos and set the divider’s Initial position.
• Pop-up window (Modal) and Popover: click Open the window / Open the popover to edit it to reveal and design the hidden overlay content directly on the canvas.