Gallery Slider

An image slideshow can be a useful tool to show your products or services in an original way and create an engaging visual experience for your website visitors. It can help you communicate your brand story and highlight the unique features of your offers. You can create an image slideshow or a carousel using the Gallery Slider.

Adding an image slider to your site

Gallery Slider is one of the Gallery block layouts, so you can add it the same as any other block:

  1. Choose a place where you want to add your gallery slider and click the Add a block (+) Plus button.
  2. In the Blocks library, navigate to the Gallery section in the menu on the left and click it to see the pre-designed block layouts. 
  3. Click the Gallery Slider layout to add it to your page.

Here’s a video of the process.


Customizing Slider settings

You can customize the Slider like any other block – with the help of its control pane. To activate it, click the block with the slider layout and then click its Block settings icon. 

No-logo-Gallery-Slider_-1.png

The block settings menu consists of two tabs: the Layout tab and the Appearance tab.

In the Layout tab, you can switch the block layout and choose which elements should be displayed in the block. To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to the element’s name.

In the Appearance tab, you can make the following changes:

  • Block style: Change the color scheme of the block.
  • Block spacing: Change the whitespaces on the top and bottom of the block.
  • Media content settings: Add a black & white filter to the images within this block.

Once you are done customizing block settings, click Save.

Here’s a video of the process. 


Read more about the block general customization options in our Managing blocks article.

Replacing demo images in the Slider

You can replace demo images in the slider with your own business-related pictures and then further customize them. Most of the customization is done through the image control pane. Upload images directly from your computer or add free stock photos from the built-in photo library. 

To replace the demo image, follow these steps: 

  1. Click the image you want to replace to enable the image control pane. 
  2. Click the Upload image icon to see the upload options.

    No-logo-Gallery-Slider_-2.png
  3. Click the option you want to use. If you click the Upload a file option, you will be taken to your computer storage. If you choose to Browse free stock photos, the free stock photos library will open, where you can find the royalty-free image you want to upload.
  4. Confirm your choice by clicking Open for the Upload a file option and Submit for the Browse free stock photos option.

Adding images in bulk 

To speed up your Slider customization, you can use the Gallery settings option that allows you to bulk-add images to your gallery.

Here’s how to do this:

  1. Click the Slider and choose the Gallery settings icon on the image control panel.

    No-logo-Gallery-Slider_-3.png
  2. In the Gallery window, click the Plus (+) button and choose the preferred method of uploading your images. 
  3. Select the images and click Submit (for uploading from the free gallery) or Open (for uploading from your computer). 
  4. In the next pop-up window, choose what you want to do with the default content.
  5. Sort the images in the order you want them to appear in the slider by dragging and dropping them. 
  6. Click Submit

Below is the video of the process. 


Note
: The Slider has two demo images by default, but you can upload as many as you want – they will be added to the carousel. 

Cropping the Slider image

If your image doesn’t ideally fit the frame, you can crop it right in the Sitebuilder. To crop your image, use the Crop icon on the image control panel.

No-logo-Gallery-Slider_-4.png

The cropping icon also allows you to adjust image positioning and its focal point within the container. Get the full instructions from our dedicated article.

Resizing Gallery Slider

Sitebuilder allows you to resize the Slider to give it a unique look. The resize control activates upon the click, and you can drag it up and down, the layout will adapt automatically for all the images in the Slider. 

No-logo-Gallery-Slider_-5.png

Note: You can only resize the heights of the Slider. The widths resize is not active to maintain the responsiveness of the design.

Customizing Media settings 

Another helpful icon on the image control pane is Media settings.

No-logo-Gallery-Slider_-6.png

Besides cropping and replacing your image, the Media settings menu in the Slider allows you to

Slider settings

The last icon on the image control pane is Slider settings.

No-logo-Gallery-Slider_-7.png

These are the features you can manage here: 

  • Slider elements: Choose which elements should be displayed in the slider
  • Slide transition type: Slide in or fade in
  • Slide options: Set your slides to automatically transition at certain intervals
  • Slide auto change: Enable or disable it and set the time between photo transitions

Also, we recommend you read this section about image settings shortcuts as they apply to the Slider images too.

Was this article helpful?
0 out of 0 found this helpful