Updated
May 27, 2024
Updated
May 27, 2024
Updated
May 27, 2024
Need support?
Need support?
Need support?
Personas Grid
Personas Grid
Personas Grid
Styles a Gallery Block as a layered user persona gallery, perfect for showcasing multiple people in a smaller form-factor.
Styles a Gallery Block as a layered user persona gallery, perfect for showcasing multiple people in a smaller form-factor.
Styles a Gallery Block as a layered user persona gallery, perfect for showcasing multiple people in a smaller form-factor.
How it works
In a Gallery Block set to Grid, set the aspect ratio to 1:1, select "crop images", pick the number of items per row, and remove all padding. To change the color of the border, adjust the "Stroke Color" within that color theme's settings in Site Styles—or if you want to retain the Stroke Color and have more control, paste the snippet below into the Custom CSS window to manually set the border color.
In a Gallery Block set to Grid, set the aspect ratio to 1:1, select "crop images", pick the number of items per row, and remove all padding. To change the color of the border, adjust the "Stroke Color" within that color theme's settings in Site Styles—or if you want to retain the Stroke Color and have more control, paste the snippet below into the Custom CSS window to manually set the border color.
In a Gallery Block set to Grid, set the aspect ratio to 1:1, select "crop images", pick the number of items per row, and remove all padding. To change the color of the border, adjust the "Stroke Color" within that color theme's settings in Site Styles—or if you want to retain the Stroke Color and have more control, paste the snippet below into the Custom CSS window to manually set the border color.
/*Persona Grid Border*/
.sqs-gallery-aspect-ratio-square .slide.sqs-gallery-design-grid-slide{
border-color: var(--black) !important; }
/*white, light, light-bold, accent, accent-bold, dark, dark-bold, or black*//*Persona Grid Border*/
.sqs-gallery-aspect-ratio-square .slide.sqs-gallery-design-grid-slide{
border-color: var(--black) !important; }
/*white, light, light-bold, accent, accent-bold, dark, dark-bold, or black*//*Persona Grid Border*/
.sqs-gallery-aspect-ratio-square .slide.sqs-gallery-design-grid-slide{
border-color: var(--black) !important; }
/*white, light, light-bold, accent, accent-bold, dark, dark-bold, or black*/
Still have a question?
Check out the FAQ page, or send a message via the Contact page.