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

This topic was covered at: https://learn.wordpress.org/tutorial/horizontal-pyramid-gallery/

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?
Music teacher and student playing piano

Music Studio

NOTE: I had to add custom CSS in order to reduce the gap:

.horizontal-pyramid-gallery-row-gap {
	column-gap: 0em;
}