How to Change Portfolio Gallery Settings Across Pages in Squarespace 7.1

Squarespace Tutorial
Written By Walid Hasan

When you're using portfolio pages or gallery sections across multiple pages in Squarespace 7.1, it's essential to ensure a consistent design and user experience. Whether you're a photographer, designer, or agency, a cohesive gallery layout improves visual flow, professionalism, and user engagement.

However, Squarespace doesn't offer a "global setting" for gallery customization — so how do you apply the same layout, hover effect, or image ratio across all your portfolio galleries?

This guide walks you through the best practices and options — both manual and automated — to change portfolio gallery settings site-wide.

Why Change Portfolio Gallery Settings Across Pages?

✔ Create consistent branding
✔ Improve user navigation and readability
✔ Avoid repetitive manual adjustments
✔ Save time when working with large portfolios

Understanding How Portfolio Galleries Work in Squarespace

In Squarespace 7.1, portfolio content may appear in three ways:

  • Portfolio Pages: Groups of project pages in a grid or list.

  • Gallery Sections: Individual gallery modules inside page layouts.

  • Gallery Blocks: Image sliders or grids added within text/image areas.

Each type has different settings and limitations.

Step-by-Step: How to Change Portfolio Gallery Settings Across Pages

Method 1: Manually Edit Gallery Layouts Page by Page

If you're using multiple portfolio pages or gallery sections:

  1. Go to Pages → Click each Portfolio or Gallery page.

  2. Click Edit → Hover over the gallery section → Click the Edit (✎) icon.

  3. Customize:

    • Layout (Grid, Slideshow, Stack, Carousel)

    • Image Aspect Ratio

    • Hover Behavior

    • Text overlays & spacing

  4. Click Apply, then Save.

Repeat for each page or section.

Tip: Use Saved Sections to speed up the process (explained below).

Method 2: Use Saved Sections for Faster Reuse

If you want the same gallery layout across pages:

  • Design one perfect gallery section.

  • Hover over the section → Click the ••• menu → Select “Save Section”.

  • Go to other pages → Click Add Section → Choose your saved layout.

This ensures visual consistency without starting from scratch every time.

Method 3: Apply Global Styling with Custom CSS

For a site-wide update to image ratios, hover effects, or gallery layout styles:

Go to: Pages → Custom code → Custom CSS
Add this code:

Copied!

/* Set consistent image aspect ratio across all galleries */
.portfolio-grid-basic .grid-image .grid-image-inner-wrapper {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Add a hover zoom effect */
.portfolio-grid-basic .grid-image .grid-image-inner-wrapper img:hover {
  transform: scale(1.1) rotate(5deg) !important;
  transition: 0.3s ease-in-out;
}

You can also style:

  • Title font

  • Caption positioning

  • Gallery spacing

  • Border radius or shadow effects

Method 4: Target Specific Portfolio Pages via Page Collection ID

Want to style only your portfolio pages and not other galleries?

Use this format:

Copied!

/* Apply styles to only portfolio pages */
.portfolio-text .portfolio-title {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 18px;
  color: #333;
}

This targets only pages with the “portfolio” type in Squarespace, helping you avoid unwanted styling on blog or product pages.

Method 5: Advanced Automation Using JavaScript (Optional)

If you're managing many galleries and want a more dynamic solution:

You can use JavaScript to auto-detect and style gallery sections.

Copied!

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll('.grid-image-inner-wrapper').forEach(gallery => {
    gallery.style.aspectRatio = "4/3";
  });
});

Add this code to:
Settings → Advanced → Code Injection → Footer

Bonus: What If You're Using Gallery Blocks?

If you're inserting gallery blocks manually across various pages:

  • You must adjust the settings block by block.

  • There's no way to apply one setting to all blocks at once.

  • However, you can use CSS to make them look consistent.

Copied!

.portfolio-grid-basic .grid-image {
  border-radius: 10px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

Summary Table

Goal Method
Update the layout on all galleries Manual + Saved Sections
Uniform image size and spacing Custom CSS
Hover effects across galleries Custom CSS
Page-specific styling .page-collection-type-portfolio
Advanced auto layout changes JavaScript in Footer Code Injection

Final Thoughts

Squarespace doesn’t have a built-in “Apply to All” feature for its portfolio galleries, but with the above steps, you’ll end up with a consistent professional look.

Begin by designing a master section that is saved, then apply CSS for the global rules. For developers or power users, even a simple JavaScript logic can automate layout consistency as well.

Frequently Asked Questions (FAQ)

1. How do I change the settings of all the portfolios in Squarespace 7.1 to make them the same?

Squarespace doesn’t have a built-in “global apply” feature for galleries. But you can do this with Saved Sections for reusable layouts and Custom CSS for making it consistent throughout the site.

2. Portfolio Page vs Gallery Section vs Gallery Block: What’s the difference?

  • Portfolio Pages: Single project pages in a list/grid style.

  • Gallery Sections: Drag and drop image galleries you can drop into page layouts.

  • Gallery Blocks: Small galleries inserted into other blocks (such as text or image areas).

Both with their styling opportunities and constraints.

3. How do I create a master gallery design I can reuse?
Design your ideal gallery section → click the three-dot menu (•••) → select “Save Section.” You can then add it to any page without rebuilding it from scratch.

4. Is Custom CSS applied to all galleries on the site?

Yes, unless you hit specific templates or sections with unique classes or page types (e.g., .portfolio-grid-basic, .page-collection-type-portfolio). Target with precision if you don’t want to also hit those other places, which could be blogs or products.

5. Can I create several types of galleries, i.e., Grid gallery on one page and Carousel gallery on another, and everything is consistent everywhere?

Yes. You can specify the various layouts manually, but utilize CSS to keep elements like image aspect ratio, spacing, and color behavior consistent across layouts.

6. How would I insert the code to be active only on portfolio pages and not affect other galleries?

Use the selector. page-collection-type-portfolio, or you should check what your specific layout classes are in a browser. This way, your CSS only affects portfolio galleries, and no other sort of image block.

7. What if I want to repeat the Gallery Blocks throughout my website?

Its settings for each block will have to be manually set. But you can still get unified styling by targeting classes with global CSS. sqs-block-gallery or. grid-image.

8. Do I need JavaScript to change the gallery settings?

Not necessarily. JavaScript is not required, but it is helpful for power users who want dynamic behavior or want to style all code blocks by default. 99% of your use cases could be done with Saved Sections + CSS.

9. Will these techniques apply to Squarespace 7.1 templates?

Yes. Squarespace 7.1 templates are all built from the same foundation. If you check and use the right class or section IDs, those methods should function globally.