Select & edit components

Select components and use the element tree

Select the exact text, image, button, or container you want to change.

4 clear stepsReal product screenshots

WATCH & FOLLOW ALONG

Select and style components

Captioned · No audio

Recorded in the fictional Willow Studio website using a normal customer account. AI submission steps are explained without running a generation job.

Read the video transcript

Select and style a component
Click an object to select it. Double-click editable text when you want to type.
The toolbar changes with your selection: text, image, button, field, or container.
Set a font, size, emphasis, colour, and alignment for the selected text.
Spacing controls adjust padding inside the object and margins around it.
Borders controls colour, width, style, and corner radius.
Move into section chooses a destination. Layers controls stacking when objects overlap.
Review your changes, then Save. Publish separately when you are ready to go live.

Click an object
Click directly on an editable object on the canvas. A selection outline and floating toolbar identify the current target.
Use the element tree
Expand the selected section in the left panel. Choose a named child element to reach objects that are hard to click or overlap.
Check the selected target
The right panel shows Editing and the selected element. Toolbar controls change for text, image, button, field, and block selections.
Return to the whole section
Use Back to section properties in the right panel or select the section entry again.

More screenshots for this guide

What you should see

Your next change applies to the intended component.

Tell us the website, page, and control you’re using. Include any error code so we can help you faster.

Insert any of the 14 available object types without AI.

Change copy, fonts, size, emphasis, colour, and alignment.

Set the label and destination for your calls to action.

Control space inside and around a selected component.