Select & edit components

Adjust padding and margins

Control space inside and around a selected component.

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.

Select the object
Click the text, button, image, or container you want to adjust.
Open Spacing
Choose Spacing in the floating toolbar. You can also use the selected object’s spacing controls in Properties.
Adjust the sides
Change padding to add space inside the object, and margins to add space around it. Use the available side controls to adjust individual edges.
Check nearby objects
Inspect the surrounding layout and all preview widths. Use Undo if spacing pushes content out of place, then Save.

What you should see

The selected component has the intended breathing room.

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

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

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.