While adding text is one of the first steps in creating and customizing your website design, adding images is what brings your website to life. In this tutorial, you will learn how to customize your website images.
There are several ways to add images to your website pages: individual image elements, image gallery, and background images.
In this article, we will show you how to add single images to your website using the Image Resizer tool in your Sitebuilder as well as where to find the settings controls for image editing. We will also show you how to access the free stock image library that’s built into your Sitebuilder.
You can add images directly from your computer. Here’s how you do it:
1. Click on any demo in your block to activate the control pane, then click Edit image:
2. There are two ways to add a photo. You can upload the image from your computer or choose a stock image from the free image library in the Sitebuilder. To upload a new image, click Upload image in the control pane:
3. To upload the image from your computer or mobile device, choose to Upload a file:
4. To replace the demo image with a free stock image, choose to Browse free stock photos:
Zooming in on images
Images can be re-sized freely by clicking Change zoom:
In the Image resizer tool, drag the image handler:
Once done adjusting, click Submit:
Adding image overlays
Once the image has been added to your website page, you can click on it to open the control pane for further customizations, including adding an overlay:
Click Change overlay and use the handler to adjust the overlay opacity. Adding an overlay on top of bright images helps to make accompanying block text more legible. Check how the text brightness has increased in this example:
Once you are done adjusting the overlay, click Submit.
Publish your site to make the changes live.