Gallery Block
Description
The gallery block is a great way to add multiple images and videos to your website pages. There are different layouts available that showcase your images in different ways.
💡 Gallery blocks are available in 7.1 for pages that use Classic Editor (individual blog posts, event pages, products additional info).
If you are a circle member, the gallery block can be use anywhere on the site.
Layouts:
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>
.sqs-block-gallery {
}
</style>Slideshow
Custom CSS
To target the entire block
/* entire gallery block */
.sqs-block-gallery {
}To target the main image
/* slideshow main image wrapper */
.sqs-gallery-design-stacked {
}
/* slideshow main image */
.sqs-gallery-design-stacked img {
}To target the thumbnails
/* slideshow thumbnail wrapper */
.sqs-gallery-design-strip {
}
/* slideshow thumbnail images */
.sqs-gallery-thumbnails .sqs-gallery-design-strip-slide {
}To target the title and description
/* slideshow title and description wrapper */
.sqs-gallery-block-slideshow .meta-inside {
}
/* slideshow title */
.sqs-gallery-block-slideshow .meta .meta-title {
}
/* slideshow description */
.sqs-gallery-block-slideshow .meta .meta-description p {
}To target the arrows
/* slideshow arrow left wrapper */
.sqs-gallery-controls .previous {
}
/* slideshow arrow left */
.sqs-gallery-controls .previous:before {
}
/* slideshow arrow right wrapper */
.sqs-gallery-controls .next {
}
/* Slideshow arrow right */
.sqs-gallery-controls .next:before {
}Carousel
Custom CSS
To target the whole strip
/* carousel strip */
.sqs-gallery-design-strip {
}
/* carousel strip wrapper */
.sqs-gallery-design-strip .sqs-wrapper {
}To target the images
/* carousel images */
.sqs-gallery-design-strip-slide {
}To target the arrows
/* carousel arrow left wrapper */
.sqs-gallery-controls .previous {
}
/* carousel arrow left */
.sqs-gallery-controls .previous:before {
}
/* carousel arrow right wrapper */
.sqs-gallery-controls .next {
}
/* carousel arrow right */
.sqs-gallery-controls .next:before {
}Grid
Custom CSS
To target the grid
/* grid */
.sqs-gallery-block-grid {
}To target the images
/* grid images */
.sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor {
}To target the title
/* grid title */
.sqs-gallery-block-grid .image-slide-title {
}Stacked
Custom CSS
To target the entire gallery
/* stacked */
.sqs-gallery-block-stacked {
}To target the images
/* stacked images */
.sqs-gallery-block-stacked img {
}To target the title and description
/* stacked title and description wrapper */
.sqs-gallery-block-stacked .meta-inside {
}
/* stacked title */
.sqs-gallery-block-stacked .meta-title {
}
/* stacked description */
.sqs-gallery-block-stacked .meta-description {
}