No website is complete without images or illustrations. Images add life to your website, they can be used to draw attention to specific content or explain how something works.
In Website Builder there are a lot of possibilities with images. In this guide we will introduce some of the options available to you.
- Play around with the image component
- Edit images directly in Website Builder
- Display images in a slideshow
- Align images in a grid
- Set an image as fixed background
- Buy professional stock images
- Create a responsive header image
Easily adjust size and placement of each component
You can drag the resize handles of a component to make it bigger or smaller. If you want to set an exact size, simply type in the height and width in the green box that is visible when the component is selected.
To change the placement of a component, select it and drag it to the position you want. Use the arrow keys on your keyboard to move it one pixel at a time. A blue line appears when the component is centered or aligned with other components on your page.
Play around with the image component
You can do more with the image component than you think. These are some of the tricks our design team uses when creating our templates.
Show only part of an image - Set image scaling to Crop. Use the Scale slider to zoom in on your image. Double click the component and move the image inside the component until the part you want to show is visible.
Make a picture round - Adjust the size of an image component to a square, so width and length are the same. Under properties, locate corners and add a value that is exactly half of the width and length of your image.
Add a color overlay to an image - Place a background component over the image. Choose a color and set transparency of the background component, to fade the image and give it a color tone. Add a text component on top, to keep it visible on small screens.
Edit images directly in Website Builder
Need more editing options? Use the photo editor to easily edit your images directly inside Website Builder. You don't need to use a local program on your computer.
Make images look better by changing color, brightness or size. Or use the Enhance tool to give your image a one-click makeover.
Remove imperfections like red eyes and blemishes, or mirror an image so it better fits in your site. You can also pimp up your images with styling tools, like stickers, frames and overlays.
Display images in a slideshow
Show your favorite images in a slideshow. You can for example use a slider to show what your site is about. Place a short text on top of the slider to make it complete.
You can also create a slideshow to draw attention to products in your webshop. Link each slide directly to the corresponding product page to increase sales.
When you insert a slideshow, make sure that you don't include more than 3-5 images. Too many images will increase the loading time of your website and it could distract your visitors.
Align images in a grid
If you want to display a number of images on one page, it can be tedious to allign all components with each other. That's why we created the Gallery component.
It allows you to include up to 100 images in one component and allign them perfectly in a grid. You can adjust the size of the images and even add captions.
Set an image as fixed background
You can set a fixed background image, so the image doesn't move when you scroll through your page. This can be handy if you want to have a background of a landscape or scenery.
For example add a beach or sunset, if you are making a travelling website. The image will stay where it is, even when your visitors scroll down. It gives your site a professional and unified design and you avoid those ugly repeats and borders.
Buy professional stock images
To give your website that extra touch, you can purchase professional images from Bigstock. Consider selecting a beautiful background to start building your site.
One.com customers can buy single Bigstock images with a discount, directly from Website Builder.
Create a responsive header image
Half of all searches on the internet are done on mobile devices, so it's important that your site looks good on screens with different sizes.
One of the ways to do this is to add a responsive header image. A responsive header automatically adjusts its size to the size of the screen. Use the background component to insert an image and stretch it to the width of your screen.
Note: A background component is hidden on smaller screens, unless you add another component on top of it.