Flex includes an adaptive Gallery section to enhance your pages. This section is an excellent way to integrate your lifestyle and product shots while presenting your visuals in an aesthetically pleasing way.
The Gallery section is completely configured within the theme editor.
Add this section to the
Gallery Section Settings
Click Gallery to open the section settings.
Gallery style
This section comes with 3 different layout styles: Horizontal masonry, Vertical masonry, and Classic.
Horizontal masonry places images in their optimal position based on available horizontal space.
Vertical masonry places images in their optimal position based on available vertical space.
Classic places images in a standard grid-like design.
Crop images
If you're using the Classic gallery style, consider using the Crop images setting to better fit your images within the provided containers.
Images per row
Control the number of Images per row with the provided slider. This setting applies to Vertical masonry and Classic gallery styles only. Choose from 2 - 5.
Enable lightbox
You can choose to enable a lightbox for your gallery. When enabled, when you click on an image in the gallery a popup modal will appear which you can click through by using the arrows on your keyboard or the arrows that appear on the image on hover.
Overlay and icons
If the Lightbox is enabled, or, if you have links added to your images, you can then choose the Overlay and Icon color settings for the overlay that appears when you 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.
Animation
The Animation setting will determine how the feature appears as it loads. The options for animation are None, Fade in, Fade in down, Fade in left, Fade in right, Slide in left, Slide in right, and Zoom.
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
Add Gallery Images
Click one of the preloaded Image blocks to customize its content.
Click Select Image to connect the image.
Include a Link by entering it into the provided field.
If you choose to link your image, when that image is hovered over, a link icon will appear. If you have both the 'lightbox' and 'link' added, the magnifying glass icon and link icon will appear on hover.