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.
• Work 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.
• Add them anywhere: you can add a Gallery to any block including Articles, Services, Features, and Contact.

Here’s how to add the Gallery block:

1. Choose a location where you want to add your contact details and/or contact forms and click on the Add a block + button.

2. In the Block Library, navigate to the Gallery section in the menu on the left and click on a block that fits your website strategy.  
   
   
3. Click on the Gallery block you like and it will appear on your page. 

Customizing the Gallery block with the title

Insert the block as described above and hover over any element to bring up the dialog box. Click on the “gear” Settings icon and the Block settings menu will appear.

You can change the following settings:

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

 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:

1. Hover over any image in the Gallery block.
2. Click the Edit image icon.
3. Choose the new image from your computer.
4. Click Open and crop the image if needed using a pre-formatted grid.
5. Once done cropping, click Submit and your image will be inserted on the page. 

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. 

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 this tutorial.

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.
3. 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 insert a new Gallery block, hover over it and click the Duplicate icon. The new Gallery block will be inserted below the original one.

Note: for best results, you can stack full-width Gallery blocks showing images of different sizes.

 

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.