The Flex theme includes a Gallery page template which is a perfect way to create lookbooks, combine your lifestyle and product shots, and present your media with style.
The template is customized with the theme editor (Customize) then assigned to a page (or multiple) in the Pages admin. Add your images through content blocks, then adjust general settings for the feature in the Gallery section.
Add Gallery Images
Open the theme editor (Customize), then use the page selector to open Pages, then gallery.
In the left sidebar, select one of the preloaded Image blocks to customize its content.
Select image
Click Select Image to connect the image to the block.
Link
Connect a Link to the image using the provided field. Leave this field blank to exclude a link.
Gallery Settings
Click the Gallery section to open general settings for the feature.
Gallery style
This gallery page template includes 3 different layout styles: Horizontal masonry, Vertical masonry, and Classic.
Horizontal masonry
Horizontal masonry places images in optimal positions based on available horizontal space.
Vertical masonry
Vertical masonry places images in optimal positions based on available vertical space.
Classic
Classic places images in a standard grid-like design.
Crop images
If you're using images that are different in size and/or image aspect ratio, they may look unaligned with large white space in between. To make them uniform, enable the Crop images setting which will align the different sized images by cropping them. This setting only applies to the Classic layout.
Show gutter
When enabled, the Show gutter setting will add space (margin) in between your gallery 'image' content blocks. If you don't want space between the images and want them to be flush with each other, you can disable this setting.
Images per row
This setting applies to Vertical masonry and Classic gallery styles only. Choose from 2 - 5 images per row.
Enable lightbox
Activate Enable lightbox for a popup modal to appear when images are clicked by customers. Arrow controls are included in the modal window to browse the sequence of images.
Colors
Select the Overlay and Icons color settings for the overlay that appears when customers hover over your gallery images.
Width
The width can either be set to Standard or Wide. Selecting Wide will spread out the full width of the screen. Selecting Standard will keep the section in a container and not spread the full width.
Spacing
You can choose to add space (padding) above and below the section by adjusting the Top spacing and Bottom spacing settings.
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature
In the CSS Class field, you can create a new class to apply to the feature, or you can add a class that already exists to apply those styles as well.
The Custom CSS field is where you can add in the actual CSS code.
Gallery Banner Settings
The Banner is an optional feature for the Gallery Page page template. Click Banner to open its settings.
Show banner/Image
Enable Show banner to activate the feature. The gallery page's title will then display on top of the banner image. A 1800 x 800px image size is recommended.
Darken banner image
Enable the Darken banner image setting to add a subtle overlay on top of your banner image. This comes in handy if you have a 'busy' banner image as it will improve legibility.
Subheading
Include a Subheading using the provided text field.
Width
The width can either be set to Standard or Wide. Selecting Wide will spread out the full width of the screen. Selecting Standard will keep the section in a container and not spread the full width.
Banner height
Select Small, Medium, or Large to control the Banner height.
Spacing
You can choose to add space (padding) above and below the section by adjusting the Top spacing and Bottom spacing settings.
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature
Mobile Layout
When viewed on a mobile device, if your Gallery style is set to Vertical masonry or Classic, the gallery images will stack vertically.
If your Gallery style is set to Horizontal masonry, the gallery images will stack vertically as well. However, if there are smaller images these will still be placed based on available horizontal space. Meaning that if there's room, some smaller images could be placed beside each other.