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 photography or your own images.

There are two types of Gallery blocks available that display your images in a different way. 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.

Why you should use a Gallery block

  • Consistent block design: you can add more images to the block and the block layout will adjust.
  • Works well with other blocks: you can insert Gallery blocks between blocks with large amounts of text to create a visually appealing site structure. Mixing Galleries and text on your page helps improve user experience and make your website design more appealing.

Adding a block

Here’s how to add the Gallery block:

  1. Choose a location where you want to add your image gallery and click on the Add a block + button.
  1. In the Block Library, navigate to the Gallery section in the menu on the left and click on a block that matches your vision:  

gallery_1.png

  1. Click on the Gallery block you like and it will appear on your page.

Customizing block settings

You have several options to make the Gallery block truly yours. To activate the control panel, click anywhere on the block and then click the Block Settings icon:

Screenshot_2021-06-08_at_23.43.19.png

In the Layout section, you can fully switch the block layout or hide some of the block elements. To fully switch the block layout, simply click the respective button and select a new block content layout:

userlmn_5824fe1ee71d9e2eb4cfdf8e0216299f.png

To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to its 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.

Editing the images

To replace the demo images with your own or stock photographs: 

Editing images

Recommended image sizes

 

Editing Gallery text

To replace the demo text with your own text, simply click on any line anywhere on the page and start typing. You can also paste the text from a text editor you are using.

Learn more about text formatting:

Text formatting

Aligning text on the page

 

Editing buttons

You can edit buttons in your Gallery block to lead to different pages on your website or to an external URL. To edit buttons follow the steps outlined in these tutorials:

Editing buttons

Changing the button color

 

Need to showcase more photos?

If you would like to display more images in your Gallery block, simply duplicate the element with numbers and text. Here’s how you can do it:

  1. Hover over the top of the element to trigger the appearance of the dialog box.
  2. Click on the Duplicate icon.

gallery_4.png

  1. The identical block element will appear to the right of the original one. Hover over it to trigger the appearance of the dialog box and click on the Edit image icon to replace it with your own image.

Alternatively, you can insert as many full-width Gallery blocks as you want. Simply hover your cursor over the existing block and click the Duplicate icon.

gallery_5.png

The new Gallery block will be inserted below the original one.

 

Deleting multiple Gallery images

To remove the images inside the gallery and create a new order, hover your cursor over the gallery to activate the menu, and click on the Gallery settings icon:

gallery_6.png

Click on the images you wish to delete and then click on the “trash” icon:

gallery_7.png

 

Another way of deleting block elements

If you would like to showcase fewer images, you can delete any of them.

  1. Hover over the image in the Gallery to trigger the appearance of the dialog box.
  2. Click on the Delete icon to remove the image.

Tip: Any action can be reversed by pressing the Undo button or Ctrl-Z on your keyboard.

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