Gallery block

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 Galleryblocks 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:

  1. Choose a location where you want to add your image gallery 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 block layout you like to add it to your page.

    Gallery-block-1.png

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.

Gallery-block-2.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.

Gallery-block-3.png

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 further 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: 

  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.

    Gallery-block-4.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.

    Gallery-block-5.png
  4. 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.

Gallery-block-6.png

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

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:

  1. Click the desired image, then click the Media settings icon on the control pane. 
  2. In the Media settings menu, scroll to the bottom and click the Delete image button.

Gallery-block-7.png

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: 

  1. Click the desired image in the Gallery block and then click the Gallery settings icon on the control pane. 
  2. In the Gallery menu, click the Select button to enable the image selection.
  3. Click the items you want to delete. They will be marked with blue ticks.
  4. Click the trash bin icon.
  5. Click Submit to save. 

Here’s the video of the process.

To select all the Gallery images at once, click the checkmarks icon. 

Gallery-block-8.png

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. 

https://youtu.be/T-cQaz4kgpA

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.

Gallery-block-9.png

The shortcut opens a popup window with the target action. 

Read more about the copying and pasting block feature in our Managing blocks tutorial.

We hope you find this guide helpful. If you have any questions, please contact our Support Team

Ready to use your new knowledge? – Edit your site!

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