Using images in Website Builder

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.

Play around with the image component

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.

How do I insert an image?

Edit your images directly in Website Builder

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.

How do I edit an image in Website Builder?


Display your images in a slideshow

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.

How do I insert a slideshow?


Place your images in a grid with the gallery component

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.

How do I insert multiple images in a grid?







Add a fixed background to your website

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.

How do I add a fixed background?





Give your site that extra touch with professional images

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.

How do I buy a Bigstock photo?








Add a responsive header to your website

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.

How do I add a responsive header?



Related articles:

How do I add a component to a page in Website Builder?
How do I create a page with a different template?