Canvas editing and layers

The canvas shows the page you are editing. Build it from ready-made sections, then select the smaller elements inside them to change copy, media, and styling.

Return to editing if the header says Exit preview. Preview mode intentionally removes the selection, inline-editing, and drag controls.

Add a section or elementCopy Anchor Link

1. Open the left panel and choose Components.
2. For a complete section, expand Sections & Blocks and open a section family.
3. Browse its variants and choose the one closest to the layout you need.
4. Drag the variant onto the canvas.
5. Release when the insertion indicator marks the intended position.

For an individual heading, image, button, or layout container, use Primitives instead.

Clicking a primitive or block variant adds it to the end of the page, not inside the currently selected element. To place it inside a section, drag it into an available nested area or move it afterward through Outline.

Screenshot placeholder

The canvas is structured rather than a free-position drawing surface. Dropping an element inserts it into page order or into a supported content area. You do not set its final position by dropping it at an arbitrary pixel coordinate.

Select the right elementCopy Anchor Link

Click an element to select it. Its outline and label identify the selection, and the right panel shows its available fields.

A section can contain several nested elements. Clicking the text may select a heading, while clicking surrounding space may select its container.

If selection is difficult:

1. Open Outline in the left panel.
2. Expand the section's children.
3. Click the element you want.
4. Check the breadcrumb at the top of the properties panel.

Click a breadcrumb ancestor to select a containing element. Deep paths collapse some ancestors into a Collapsed path menu. Click Page in the breadcrumb, or click the blank canvas background, to clear the selection and return to theme settings.

Example: space around a headingCopy Anchor Link

If you want more space around the entire hero, select the hero or its container and change its padding. If you want only more space below the heading, select the heading and change its bottom margin.

Changing the parent affects its children as a group; changing the heading affects that element.

Edit text directlyCopy Anchor Link

Supported text fields are editable on the canvas.

1. Move over the text and click to place the caret.
2. Select the words you want to replace and type the new copy.
3. Click outside the field to finish.
4. Confirm that the right-panel content field reflects your change.
5. Click Save to store the page.

For a single-line text field, Enter finishes editing. Escape also finishes the edit and leaves the field; it does not cancel what you typed. Use Undo if you need to reverse the change.

Inline text editing uses plain text. Do not expect pasted formatting, embedded HTML, or a word-processor toolbar. Use the right panel's Typography controls for font, weight, size, alignment, and color.

Screenshot placeholder

If a piece of text does not expose an inline caret, select its element in Outline and look for its content fields in the right panel. Available fields depend on the component.

Move an existing elementCopy Anchor Link

1. Select the element.
2. Drag its label or a non-text part of its wrapper. Dragging inside editable text is reserved for text interaction.
3. Move toward the target content area or between nearby elements.
4. Follow the drop indicator and release.
5. Check both placement and nesting in Outline.

Dragging a nested element out of its container changes its relationship to the surrounding layout. If it unexpectedly fills the page width or stops aligning with nearby elements, check where it landed before changing its styles.

Use Outline as the layers viewCopy Anchor Link

The Outline tab is Studio's hierarchy view. Indentation represents containment, and the row labels identify component types.

Find nested contentCopy Anchor Link

1. Expand a parent using its chevron.
2. Click a child row to select it.
3. Use the properties breadcrumb to move back up when necessary.

Collapsing an Outline row only hides its children in the tree. It does not hide them on the page.

Reorder with OutlineCopy Anchor Link

1. Drag a row using its grip area.
2. Move above or below another row.
3. Wait for the insertion line.
4. Drop to move the element into that position.

To move into an empty content area, drop onto the row labeled Empty … (drop here). You cannot place an element inside itself or its own descendants.

Screenshot placeholder

Example: reorder servicesCopy Anchor Link

Expand the services section until its card containers are visible. Drag the third card's row before the first card. Move the card container, not just its heading, so the image, copy, and action move together.

Duplicate or remove an elementCopy Anchor Link

The selected element's floating action bar includes:

• Duplicate Component to copy the selected element.
• Add this component to Opal AI to attach it to an AI request.
• Delete Component to remove it.

Outline also has a delete control on eligible rows. Deleting a parent removes its contained elements too. Duplicate and delete controls may be unavailable for components that restrict those actions.

After duplicating a section, update the copy, images, links, and any section anchor before using it as a second destination.

For targeted AI editing, read Build and refine with Opal AI. Use AI only with Home open in the current version.

Replace media and check linksCopy Anchor Link

Select the image, video, link, or button itself, rather than only the surrounding section. The right panel exposes the fields supported by that component.

Image fields can provide upload, URL, and media-picker options. Choosing or applying media through the image or video field can trigger a page save, so do not rely on an unsaved state to keep media changes private on a published page.

For navigation, set a destination in the element's link field:

• A page path, such as /about.
• A section anchor, such as #contact.
• An external address, such as https://example.com.

The destination must exist. Creating or renaming a page does not by itself add or update a navigation item.

Use Preview mode to test interactions: edit mode uses clicks to select components.

Undo, redo, and saveCopy Anchor Link

Use Undo and Redo in the floating bottom toolbar to step through canvas document changes. History is limited to recent edits in the editor session; it is not a durable backup.

Use Save after a meaningful group of edits and before changing pages or leaving Studio. Do not expect Undo to recover a deleted website page or reverse an already completed branding upload.

Continue with Styling and responsive design or Pages, settings, and publishing.