Image gallery
Overview:
The Image Gallery section is designed to showcase multiple images in a visually engaging gallery layout. It supports image slides, responsive grid spacing, slideshow functionality, customizable thumbnail sizes, color schemes, and spacing controls. This section is ideal for displaying product galleries, brand visuals, customer photos, portfolio showcases, lifestyle imagery, or promotional collections.
Blocks Configuration
Image Block:
The Image block displays an individual image inside the gallery section.
Image Settings
| Setting | Description |
|---|---|
| Image | Uploads an image displayed inside the gallery section. |
Section Configuration
Grid Settings:
| Setting | Description |
|---|---|
| Desktop Grid Spacing | Adds spacing between gallery images on desktop devices. |
| Mobile Grid Spacing | Adds spacing between gallery images on mobile devices. |
Slideshow Settings:
| Setting | Description |
|---|---|
| Show Slideshow Arrows | Displays navigation arrows for switching between gallery images. |
| Enable Auto Play | Automatically rotates gallery images in slideshow mode. |
| Slideshow Interval | Controls the autoplay delay timing between image transitions. |
Layout:
| Setting | Description |
|---|---|
| Thumbnail Size | Controls the display size of gallery thumbnails. |
| Container Layout | Determines whether the section uses Contained, Contained Content, or Full Width layout. |
| Container Width | Controls the maximum width of the section container on desktop devices. |
Color Scheme:
| Setting | Description |
|---|---|
| Section Color Scheme | Applies a predefined color palette to the image gallery section background and content. |
Inner Spacing:
These settings control spacing inside the image gallery section.
| Setting | Description |
|---|---|
| Top Padding (Desktop) | Adds spacing inside the top area of the section on desktop devices by default 10px. |
| Bottom Padding (Desktop) | Adds spacing inside the bottom area of the section on desktop devices by default 10px. |
| Left Padding (Desktop) | Controls inner left spacing on desktop devices by default 0px. |
| Right Padding (Desktop) | Controls inner right spacing on desktop devices by default 0px. |
| Top Padding (Mobile) | Adds spacing inside the top area of the section on mobile devices by default 10px. |
| Bottom Padding (Mobile) | Adds spacing inside the bottom area of the section on mobile devices by default 10px. |
| Left Padding (Mobile) | Controls inner left spacing on mobile devices by default 0px. |
| Right Padding (Mobile) | Controls inner right spacing on mobile devices by default 0px. |
Outer Spacing:
These settings control spacing outside the image gallery section.
| Setting | Description |
|---|---|
| Top Margin (Desktop) | Adds spacing outside the top area of the section on desktop devices. |
| Bottom Margin (Desktop) | Adds spacing outside the bottom area of the section on desktop devices. |
| Left Margin (Desktop) | Controls outer left spacing on desktop devices. |
| Right Margin (Desktop) | Controls outer right spacing on desktop devices. |
| Top Margin (Mobile) | Adds spacing outside the top area of the section on mobile devices. |
| Bottom Margin (Mobile) | Adds spacing outside the bottom area of the section on mobile devices. |
| Left Margin (Mobile) | Controls outer left spacing on mobile devices. |
| Right Margin (Mobile) | Controls outer right spacing on mobile devices. |