Select & edit components
Move, resize, and layer objects
Position components precisely within a section or move them to another section.
WATCH & FOLLOW ALONG
Select and style components
Recorded in the fictional Willow Studio website using a normal customer account. AI submission steps are explained without running a generation job.
Download video ↓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.
Follow these steps
Select and move
Use the selected object’s move handle to drag. Arrow keys move by 1 pixel; Shift + arrow keys move by 10 pixels when the movement control has focus.
Resize the selection
Drag the blue edges or corners. Text corners change font size; block corners resize the box. Use Size for supported objects to enter width and height.
Move between sections
Choose Move into section… and select Destination section. A whole-section selection offers Move section… instead.
Arrange overlapping objects
Use Layers… to bring an object forward or to front, send it backward or to back, or reset its layer order.
Review and save
Check that the object remains usable at all preview widths, then Save.
More screenshots for this guide
Image sizing and fit controls
Objects are placed and layered where you need them.
Need a hand with this step?
Tell us the website, page, and control you’re using. Include any error code so we can help you faster.