Components

Component library

Open the Components tab (the puzzle-piece icon, first in the left sidebar) to see all available components grouped by category:

Category	Examples
Layout	Container, Div, Row, Column, 50/50, 3 Cols
Typography	Heading, Paragraph, List, Blockquote, Badge, Text link, Divider
Navigation	Navbar, Breadcrumbs, Button
Interactive	Typed Text, Dark/Light switch, Gallery, Lightbox Image
Media	Image, Video, Audio, Embed
Content	Card, Card Group, Card Media, Card Overlay, Icon

For pre-built full-section blocks (hero sections, CTAs, testimonials, etc.), use the Blocks tab instead. See Blocks.

Add a component

1. Open the Components tab.

2. Find the component you want — use the search box or scroll through categories.

3. Drag the component onto the canvas. Move over the page until the drop highlight appears, then release to place it there.

4. Drop between existing components to insert at that position, or drop inside components that accept children, such as containers, rows, and cards.

Expected result

The component appears on the canvas and is automatically selected. Its settings appear in the right sidebar.

Adding a component from the Components panel

Select and edit a component

• Click a component to select it.
• Double-click text inside a component to enter inline edit mode.
• Use the Layers panel when the element is covered, deeply nested, or hard to click directly on the canvas.
• Use the Design tab in the right sidebar to change spacing, colors, and layout.
• Use the Settings tab to change component-specific properties (image src, link href, …).

Selecting a component and entering inline text edit mode

Move a component

You can move a component in three ways:

• On the canvas — click and drag the component itself to a new position.
• With the drag handle — select the component, then drag it by the move handle in the component toolbar.
• From the Layers panel — open the Layers tab and drag the component layer above, below, or inside another layer.

Moving a component from the canvas and the Layers panel

Duplicate or delete a component

Select the component, then use the toolbar that appears above it:

• Duplicate (copy icon) — creates a copy immediately below the selected component
• Delete (trash icon) — removes the component (can be undone with Cmd/Ctrl+Z)

Duplicating and deleting a component

Toggle visibility

In the Layers tab, hover over any component row to reveal an eye icon on the right. Click it to hide or show that component on the canvas. Hidden components are not removed — they are simply invisible while you work, and they are still included in the exported site.

This is useful for temporarily hiding a section so you can focus on what’s behind it, or for comparing layouts with and without a specific element.

Toggling component visibility in the Layers tab

Nest components

Some components are containers (Container, Row, Column). Drag other components inside them to build complex layouts. The Layers tab shows the nesting hierarchy.

Nesting a button inside a container

Common issues

Component won’t drop in the right position — try releasing it over the Layers tab instead of the canvas to control exact nesting.

Can’t select a component inside another — click the outer component first, then click the inner one. Or use the Layers tab to select by name.

Not sure which nested level is selected — use the Layers panel to verify whether you selected the Container, Row, Column, or content element before editing styles.