Images Section
Description
In Squarespace 7.1, you can make an entire section a gallery. This is a great way to display your images in different layouts instead of adding individual image blocks.
There are 5 different layouts to choose from:
Custom CSS
For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.
Advanced Code Injection
For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:
<style>
.ProductList .ProductList-title {
}
</style>Custom CSS
Grid: Simple
To target the image
/* image */
.gallery-grid-item img {
}To target the caption
/* caption */
.gallery-grid-item .gallery-caption * {
}To target the lightbox overlay
/* lightbox overlay */
.gallery-lightbox-background {
}To target the lightbox buttons
/* arrow - left */
.caret-left-icon--small {
}
/* arrow - right */
.caret-right-icon--small {
}
/* lightbox close */
.gallery-lightbox-close-btn-icon {
}Grid: Strips
To target the image
/* image */
.gallery-strips-item img {
}
To target the caption
/* caption */
.gallery-strips-item .gallery-caption * {
}Grid: Masonry
To target the image
/* image */
.gallery-masonry-item img {
}To target the caption
/* caption */
.gallery-masonry-item .gallery-caption * {
}Slideshow: Simple
To target the center image
/* center image */
.gallery-slideshow-item img {
}To target the reel thumbnails
/* reel thumbnails */
.gallery-slideshow-item .gallery-caption * {
}To target the caption
/* caption */
.gallery-slideshow-control-btn svg {
}To target the arrows
/* arrow – left */
.gallery-slideshow-control-btn .caret-right-icon--small {
}
/* arrow – right */
.gallery-fullscreen-slideshow-item img {
}Slideshow: Full
To target the image
/* image */
.gallery-fullscreen-slideshow-item img {
}To target the caption
/* caption */
.gallery-fullscreen-slideshow-item .gallery-caption * {
}To target the arrows
/* arrow – left */
.gallery-fullscreen-control-btn .caret-left-icon--small {
}
/* arrow – right */
.gallery-slideshow-control-btn .caret-right-icon--small {
}Slideshow: Reel
To target the image
/* image */
.gallery-reel-item img {
}
To target the caption
/* caption */
.gallery-reel-item .gallery-caption * {
}
To target the arrows
/* arrow – left */
.gallery-reel-control-btn .caret-left-icon--small {
}
/* arrow – right */
.gallery-reel-control-btn .caret-right-icon--small {
}