Horizontal Pyramid Gallery

In this session, we will learn how to make a Horizontal Pyramid Gallery by only using a Row block and Cover blocks.

Learning outcomes

1. Create a Horizontal Pyramid Gallery.
2. Nesting the Row block and multiple Cover blocks.
3. Altering the opacity of a Cover block.
4. Removing the block spacing between Cover blocks.
5. Changing the minimum height of a Cover block.
6. Changing the overlay of a Cover block.

Comprehension questions

1. What is the difference between a Group block and a Row block?
2. How do you stack images for mobile when using a Row block?
3. What are the advantages of using a Cover block?

Transcript

Hi, and welcome to Learn WordPress. In this short video, we are going to look at how we can re-create this Horizontal Pyramid Gallery by only using blocks, no code, no plugins and no CSS are necessary. And the best part is that it displays on mobile devices, you will only need a Row block and Cover blocks. So let’s get going.

To start we will create a new page and add a Row block. Then we will add our first Cover block
and then add media. Open up the List View and then click on the three vertical dots to remove the paragraph, as we will not be using this. Then, select the photo and use your sidebar settings and change the focal point picker to the middle of the face to ensure that the most important part of the image will always show, especially on mobile. Lastly, change the opacity to zero so that we have a clear image. Now we will repeat this step four more times.

Make sure you select the Row block, add a Cover block, add media, remove the paragraph, change the focal point picker and set the opacity to zero. And then lastly, the fifth Cover block. Once you have added all your images, you want to remove the spacing between the image pillars. To do this, select the Row block in the List View and change the block spacing in your sidebar settings to zero.

Lastly, we are going to adjust the height of each cover block to create that pyramid effect. You can play around with pixel sizes, but let’s make the minimum height of the first Cover block 100 pixels. Select the Cover block and change the Minimum height of cover to 100. Now we are going to increase the Minimum height of each Cover block by 50 pixels to go from small to large. So the second cover block will be 150, then 200, 250 and 300.

And now we can go ahead and preview it in a different tab and then also in mobile view. Please note, I have left the sidebar settings Allow to wrap to multiple lines off to ensure the images don’t stack on mobile.

You even have the option to change the cover overlay of each Cover block to create a different visual effect by selecting the image, changing the overlay colour and altering the opacity. In a few clicks, you can achieve this, and that’s it.

Happy creating!