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:
- Choose a location where you want to add your image gallery and click on the Add a block + button.
- In the Block Library, navigate to the Gallery section in the menu on the left and click on a block that matches your vision:
- 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.
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 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:
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:
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:
- Hover over the top of the element to trigger the appearance of the dialog box.
- Click on the Duplicate icon.
- 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.
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:
Click on the images you wish to delete and then click on the “trash” icon:
Another way of deleting block elements
If you would like to showcase fewer images, you can delete any of them.
- Hover over the image in the Gallery to trigger the appearance of the dialog box.
- 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.