Creating Gallery Blocks in Squarespace 7.1 (2024)

This tutorial will cover creating and customising Gallery Blocks in Squarespace 7.1 using the Fluid Engine.

This feature is handy for showcasing images in a visually appealing way.

Adding and Customizing a Gallery Block

1. Creating a Gallery Block:

   • Go to the page where you want to add the gallery.

   • Click on the "+" button to add a new block.

   • Select "Gallery" from the list (it’s the fourth option).

   • Drag the Gallery Block to your desired location on the page.

2. Adding Images to Your Gallery:

   • Click on the Gallery Block to select it.

   • Click on the pencil icon to edit the gallery.

   • In the "Content" tab, click "Add Images."

   • Upload images from your computer or choose from the stock photo library.

   • Note: You can only add one image at a time, so repeat this process for each image.

3. Configuring Gallery Layout:

   • In the "Design" tab, choose the layout for your gallery. Options include:

     • Grid: Displays images in a uniform grid.

     • Slideshow: Features one large image with thumbnails below.

     • Carousel: Images scroll horizontally.

     • Stacked: Images are stacked vertically.

   • For this tutorial, we’ll stick with the Grid layout.

4. Adjusting Gallery Settings:

   • Items per Row: Set the number of images per row. For example, set it to 4 to display four images per row.

   • Padding: Adjust the space between images. A padding of 20 works nicely for a balanced look.

   • Row Height: Adjust the height of each row to make the section more compact or spacious as needed.

   • Background Color: Change the background color of the gallery section to differentiate it from other sections. For instance, set it to the darkest color for a striking effect.

5. Tweaking Section Settings:

   • Remove extra spacing at the top and bottom of the section to create a balanced layout.

   • Click and drag to manually adjust the position of the gallery and other content blocks.

   • If you encounter issues with touchpad sensitivity, use a mouse for more precise control.

Full-Width and Offset Galleries

1. Creating Full-Width Galleries:

   • To make the gallery full width, drag the edges of the gallery block to extend it to the screen's edges.

   • Ensure the content within the gallery looks balanced and aligned.

2. Offset Content:

   • Offset galleries can create a unique visual effect by aligning content blocks to the left or right of the gallery.

   • Be cautious with text alignment to avoid a cluttered look.

Testing and Adjusting for Mobile

1. Mobile View Optimization:

   • Switch to mobile view to check how the gallery appears.

   • Adjust text and image positions for better mobile experience.

   • Ensure the desktop layout remains unchanged while optimizing for mobile.

That’s it! You’ve successfully created and customized a Gallery Block in Squarespace 7.1.

---

NEW COMMUNITY!

I am launching my premium community to help you solve your biggest headaches when building your website or starting a web design business. If you would like to find out more, you can join the waitlist here: https://community.pixelhaze.academy/interest

We also have a free Skool community dedicated to website builders, including Squarespace, Wix (from Autumn 2024), and Hostinger here: https://www.skool.com/website-builders/about

Check Out Square Forge, our Squarespace Template Builder: https://squareforge.net