Design an Overflowing Image Gallery with GenerateBlocks

Create an engaging and visually appealing Overflowing Image Gallery on your WordPress site using GenerateBlocks. This layout, inspired by the new Woo.com, serves as a fantastic section divider while showcasing various images in a unique, responsive manner.

Prerequisites

Please make sure you have the following installed and activated:

• GenerateBlocks
• Upload various images to get started

Creating Your Gallery

Setting Up the Initial Container

1. Navigate to Pages > Add New to create a new page.
2. Name your page, for example, “Woo”.
3. Insert a Container block by typing ‘container’ in the block search.

Configuring the Container

1. Label your container for organizational purposes in the Advanced > Block Label, e.g., “Section”.
   
2. Change the HTML tag to <section> for semantic accuracy.
   
3. Add padding to the top and bottom to create space from the header and footer.
   

Adding Image Wrappers

1. Insert a new Container within the section to act as the first row’s wrapper.
2. Label this container as “Wrapper Row 1” for clarity.
   

Inserting Images

1. Add a new Container inside “Wrapper Row 1” for each image and call it “Image Wrapper”.
   
2. Upload and insert your image into the container.
   
3. Duplicate the image wrapper four times.
   
4. Change the Layout display from “Default” to “Flex”.
   
5. Set the Wrap to “No Wrap”.
   
6. Justify content to be centered.
   
7. Add a column gap of 24 pixels.
   
8. Select all four image wrappers and adjust the “Min Width” to 40%.
   
9. Select your section container and adjust “Overflow-X” to “Hidden”.
   
10. Duplicate your Wrapper Row 1 (rename it to Wrapper Row 2).
    
11. Select the section container and change the following settings:
    • Display: Flex
    • Direction: Column
    • Row Gap: 24 px
      

Making It Responsive

1. Select your two wrappers and adjust the column gap to “1.5 vw”.
   
2. Select your section container and match the “1.5 vw” in the Row Gap.
   
3. Test the responsiveness by adjusting the browser window size or using the WordPress preview options.

Supplementary Resources

• GenerateBlocks Documentation

Overflowing Image Gallery – Conclusion

By following these steps, you’ve created an Overflowing Image Gallery that is both responsive and stylish, without writing a single line of CSS. Experiment with different images and layouts to make your gallery unique.