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 the Gallery block

Insert the block as described above and hover over any element to bring up the dialog box.

Click on the “gear” Block settings icon and the Block settings menu will appear.

gallery_2.png

You can change the following settings:

  • Block title: check the box to display the line of text above the main title. To remove the secondary title, uncheck the box.
  • Primary and Secondary buttons: use these options to display an outlined button in your Gallery block.

In the Appearance section, you can customize the following settings:

  • Block Style: The color scheme of the block (light or dark)
  • Content Layout: The number of items per row (2, 3 or 4)
  • Block Spacing: The size of indents and spacing between the block elements 
  • The black and white filter that would be applied automatically to all Gallery images

 Once you are done customizing the Block settings, click Save to confirm the changes.

Editing the images

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

Editing images

 

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 the 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

Managing buttons on mobile

 

Need to showcase more photos?

If you would like to display more images in your Gallery block, simply duplicate the element with numbers and a 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