How to use the Gallery and Image slider components in Website Builder

Want to display several images on your website? With the Website Builder Gallery and Image slider components, you can insert several images in a grid or arrange them in a slideshow. This guide will show you how to add the components to your page and adjust them to your liking.

• Insert a component on your site
• Change images and add new ones
• Settings of the Gallery and Image slider components

Insert a component on your site

1. Open Website Builder from the one.com control panel.
2. Go to Gallery in the left-side menu and select a gallery variant.
3. Drag the component you want onto your workspace and drop it where you want to place your gallery or slider.
4. Select the images you want to insert or upload them from your computer or an external URL. Click Add to page at the bottom of the pop-up window.
5. Adjust the size and placement of the component to your liking.
6. Click Gallery settings/Image slider settings at the top of the component to adjust the settings of your gallery.
7. Click Save and Publish to make the images visible on your site.

Change images and add new ones

When you click on the inserted component, two tabs will appear: Gallery/Image slider settings and Change images.

Click the Change images tab to change the images of your gallery. You can remove an image by clicking on the bin icon in the corner of it, or edit it by clicking the pencil icon. You can also add new images to the gallery by clicking Add images in the top-right corner.

Note: The title of the image also acts as alt text in these components. If you want to add an alt text, you can do it under Title (alt) on the right-hand side in the Sort & edit images overview.

Settings of the Gallery and Image slider components

Two menus will appear when you click the Settings tab on the component. Here, you can change the following options:

Gallery component:

1 - Top/bottom menu

• Columns - Adjust the number of columns.
• Spacing - Adjust the white space between the images.
• Crop - Check this box if images should be cropped, so they all have the same size in the gallery.
• Compact view - Check this box if you want the images to be as close as possible within the blue margins.
• Full width - Check this box if you want the gallery to stretch over the entire width of your page.

2 - Floating menu

• On click - Select what should happen when a user clicks the image. Choose nothing, show a larger image or open a link.
• Captions - Select if you want to add captions to the images in the gallery. Click "Manage captions" to enter text and alt text. Choose if a caption should be outlined left, right or centred. You can also choose the caption style - the options here are classic, template and custom.
• Image style - Here, you can change the ratio of your image, for example, to landscape or portrait. You can also add borders and rounded corners.
• Full width - Here, you can adjust the entire width of the gallery to be outside the blue margins (full width) or inside them (default).

Image slider component:

1 - Top/bottom menu

• Columns - Adjust the number of columns (1-5) in the slider. In the screenshot, we've selected to have three.
• Transition - Choose between a slide-in or a fade-in effect for the transition between images.
• Crop - You can choose to crop each of your images so they are the same size in the slider. Cropping will always be active if you have multiple images (columns) per slide.
• Speed - Choose the image transition speed. Minimum is 1 second and maximum is 15.
• Full width - Choose whether you want to display your images in full width. This function is only available if you have only one column of images per slide.

2. Floating menu

• Navigation - Choose if images should shift automatically, and adjust or hide navigation arrows and the indicator.
• On click - Select what should happen when a customer clicks on an image. Choose nothing, show a larger image or open a link.
• Captions - Select whether captions should be shown with the images. Ticking this box gives you more customisation options: Add captions and choose alignment and placement.
• Full width - If you only have one column, you can adjust the slider's width to be outside the blue margins (full width) or inside them (default).

Related articles:

• How do I edit an image in Website Builder?
• How do I insert an image?