The visual side of your website matters, and Sitebuilder offers many features to help you catch visitors’ attention. You can customise your images – cropping, resizing and adjusting the focal point – to make your site more visually appealing.
Demo content versus your own images
All Sitebuilder templates come with demo images that match the template’s theme. You can keep them or replace them, either with your own images or with free stock photos from the built-in image library.
Once you’ve added a new image, you can crop it, resize it and adjust its position to make it look its best.
Cropping your image
If an image doesn’t fit its frame perfectly, crop it directly in Sitebuilder:
- Click the image to activate its customisation menu.
- Click the Crop icon to open the control panel where you can zoom in and out.
- Drag the slider along the scale to the position you want, and release when you’re happy with the size. You can also click the magnifier icons on either side of the slider to zoom in or out 10% at a time.
- To return to the original view, click the Fit icon.
- Click the tick icon to confirm.
Note: you can use Undo to go back.
Resizing the image frame
You can resize image frames individually or as a group.
To resize a single image frame:
- Click the image to activate the resize handle along its bottom edge.
- Drag the handle to the position you want – the block resizes automatically to fit the image.
To resize several images at once:
- Click one image in the group to activate its resize handle.
- Hold Shift and drag the handle to a new position.
Tip: as you drag, a vertical guide line appears near sibling images of the same height, helping you align them precisely.
Resizing works for every block on your site that contains images. If the handle doesn’t appear when you click an image, go to Block settings → Appearance and untick Fullscreen.
Image position and focal point
To change the position and focal point of a foreground image:
- Click the image to activate the customisation menu.
- Click the Crop icon to open the control panel.
- With resize mode active, drag and drop the image inside the frame to the position you want.
This also works for background images:
- Click the block to activate its control panel.
- Click the Edit image icon to open the block settings.
- In the Appearance tab, click Crop.
- With resize mode active, drag the background image inside the frame to set the focal point.
- Click the tick icon to confirm, then Save.