Gallery Block
Use the versatile Gallery Block to display your images in a slider, grid or single image format.
Quick links
Overview
In the Gutenberg editor, open the block section and click or drag the Gallery Block to the editor area. Main elements of the block are:
- Subtitle
- Title
- Paragraph
- Gallery
Note: Because of the frequency of use, the first three elements (Subtitle, title and paragraph) of the Text Block are integrated in almost every Sana block.
Settings
If the settings side panel is not visible while working on your page or post, click on the Settings icon in the top left corner of the editor toolbar. Once opened you will see all the available options of the selected block, organized into collapsible tabs.
General
Choose one of three style options for your gallery:
1. Slider
- Height – Choose between Adaptive, Aspect Ratio or Fixed Value modes
- Ratio – All slider images have the same aspect ratio (if Aspect Ratio is selected)
- Size – Image width inside the container, or image height (if Fixed Value is selected)
- Full Width on Mobile – Image has a 100% width on mobile screens
- Show Caption – Display the image caption text in the bottom left corner
2. Grid
- Columns – Display images in two, three or four columns
- Show Caption – Display image caption text in the bottom left corner
- Shadow – Add background shadow to the images
3. Single Image
- Style – Choose Normal, Rounded or Circle image style
- Ratio – The images fits into a specific aspect ratio
- Radius – Choose how round the image corners will be (if Rounded style is selected)
- Size – Image width inside the container (%)
- Full Width on Mobile – Image has a 100% width on mobile screens
- Show Caption – Display the image caption text in the bottom left corner
- Shadow – Add a background shadow to the image
- Content Align – Align the entire block content left, center or right
- Padding – Add top and bottom block padding
- Background – Choose a solid color or a background image
Subtitle, Title, Paragraph
- On/Off toggle – Display or hide the element
- Text Align – Align text left, center or right within its own container
- Font Size – Choose from nine preset sizes or add a custom font size
- Text Color – Select a color for the subtitle, title and paragraph
Navigation
(visible if the gallery style is set to Slider)
- Display Navigation – Make the navigation arrows visible
- Navigation Arrows Color – Select a color for the arrows
- Display Pagination – Make the pagination below the slider visible
- Pagination stye – Display the slides as bullets or lines
- Pagination colors – Select a color for the pagination bullets/lines
Responsive
- Hide on Desktop – Block is visible on mobile, but not on desktop screens
- Hide on Mobile – Block is visible on desktop, but not on mobile screens
Tip: You can create two separate blocks for a section of your page and load each block on a different screen size.
