Gallery blocks help you present numerous images on a website. You can create a portfolio or display photographs from an event in a clean, concise way. You can add stock photos or your own images.
There are two types of Gallery blocks available that display your images in different ways. You can choose a block layout that allows adding a descriptive title and text content to your gallery, or you can add a full-width line of images of different sizes.
Adding a block
Here’s how to add the Gallery block to your page:
- Choose a location where you want to add your image gallery and click the Add a block (+) Plus button.
- 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.
- Click the Gallery block layout you like to add it to your page.
Customizing block settings
You can customize the Gallery block with the help of its control pane. To activate it, click the block and then click the Block settings icon.
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.
- Content layout: Choose the number of items in a row.
- Media settings: Add a black & white filter to the images within this block.
Once you are done customizing block settings, click Save.
Read more about the block general customization options in our Managing blocks article.
Replacing demo images in the Gallery block
You can replace demo images in the Gallery block with your own business-related pictures and then customize them. Most of the customization is done through the image control pane.
You can replace demo images by uploading images directly from your computer or by adding free stock photos from the built-in photo library.
To replace the demo image, follow these steps:
- Click the image you want to replace to enable the image control pane.
- Click the Upload image icon to see the upload options.
- 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.
- Confirm your choice by clicking Open for the Upload a file option and Submit for the Browse free stock photos option.
Cropping the Gallery block 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. Here’s a video of the process.
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.
Customizing Media settings
Another helpful icon on the image control pane is Media settings.
Besides cropping and replacing your image, the Media settings menu allows you to
- Add image title, alt text, and description
- Enable click action for the image
- Delete the images from the Gallery.
Deleting the image from the Gallery
There are two ways to delete the images from the Gallery block: through the Media settings and through the Gallery settings.
Deleting images through the Media settings icon is straightforward:
- Click the desired image, then click the Media settings icon on the control pane.
- In the Media settings menu, scroll to the bottom and click the Delete image button.
The image will be removed from the gallery immediately.
Note: To revert the action, press Ctrl+Z on your keyboard for Windows or Command+Z for Mac, or use the Undo button on the Topbar.
Gallery settings allow you to delete images in bulk. Here’s how to do this:
- Click the desired image in the Gallery block and then click the Gallery settings icon on the control pane.
- In the Gallery menu, click the Select button to enable the image selection.
- Click the items you want to delete. They will be marked with blue ticks.
- Click the trash bin icon.
- Click Submit to save.
Here’s the video of the process.
To select all the Gallery images at once, click the checkmarks icon.
Then you can delete the demo images at once by pressing the trash bin button.
Upload your business-related images in bulk in the same window by clicking the Plus (+) button. You can choose to upload them from your computer storage or the integrated free photo stock.
Resizing images in the Gallery block
You can resize the photos in the gallery to give them a unique look. The resize control activates upon the click, and you can drag it up and down, the layout will adapt automatically. View the video of the process.
Note: You can only resize the heights of the image. The widths resize is not active to maintain the responsiveness of the design.
Image settings shortcuts
The right mouse button click gives you some shortcuts to the features we’ve described in this article. This includes changing the alt title, setting a click action, and copying/cutting and pasting the block in different places.
The shortcut opens a popup window with the target action.
Read more about the copying and pasting block feature in our Managing blocks tutorial.