This tutorial will guide you through utilizing container flex properties for constructing a gallery with a parent container and two child containers, surpassing the capabilities of a standard Gallery widget.
Why not just use a gallery widget/plugin?
While a gallery widget or any 3rd party gallery plugin would be a straightforward option, mastering the flex properties detailed here allows for more sophisticated designs. Moreover, this method enables individual image linking.
Getting started
- Create or edit a Page: Start by making a new page or editing an existing one.
- Add a new container: Click the + icon to add a new container to your page, opting for a two-container layout. Consider adding a margin to the parent container via the Advanced tab for added white space.
Setting up the Content Container
- Insert widgets: Drag a Heading widget into the left child container, customizing the text. Adjust font size or apply a global style in the Style tab. Follow up by adding a Text Editor widget beneath the heading, editing or retaining placeholder text. Then, include two Button widgets, edit their text, and link them as desired.
- Adjust with Flex Properties: Select the content container for editing. In the Layout tab, maintain the default Width and Height. Opt for the Wrap property and set Direction to Row for side-by-side button alignment. Apply padding (e.g., 21PX) in the Advanced tab.
Configuring the Gallery Container
- Layout adjustments: Select and modify the right child container. Keep Width and Height default. Set Direction to Row and Gap property to 0px, opting for padding on images for easier workflow. Enable the Wrap property and choose Flex Start under Align Content.
- Add images: Drag an Image widget into the gallery container, you can either set it to Lightbox by setting the Link property to Media File and enabling the Lightbox option that appears afterward or linking it elsewhere by setting the link to Custom URL.
In the Advanced tab, adjust the Width to 50% for the widget’s wrapper and apply padding (e.g., 5PX). Ensure image consistency by setting Width to 100% and Height accordingly in the Style tab, selecting Cover for Object Fit options.
Expanding your gallery
- Duplicate images: Right-click an image widget to duplicate it, aiming for four images. Select desired images from your media library or upload new ones, ensuring they fit well due to preset dimensions.
- Add more rows: Duplicate the last image widget, adjusting the wrapper Width to 33.3% and altering the image height (e.g., 125PX) for a new row.
- Adjust for responsiveness: Check and tweak the design in responsive mode, though the container's flex properties should minimize the need for adjustments.