Creating A Gallery With Image Elements

04/12/2018

The Image Element allows you to create a photo gallery on a page or post through the 'Gallery ID' option. In this article, we'll show you how to use the 'Gallery ID' option to add multiple Image Elements creating a lightbox gallery. To learn how to do this please continue reading below.

Read Our Image Element Article
View The Image Element Gallery In Action

Note: This post covers how to create a gallery, where each image is its own Image Element linked through a common Gallery ID. This is primarily to have a lightbox gallery. If you're looking to create a single element which displays a gallery of images, you may want to check out our Gallery Element for that.

Read Our Gallery Element Article

How To Insert An Image Element

Step 1 - Create a new page or edit an existing one.

Step 2 - Click the ‘Use Fusion Builder’ button to activate the Fusion Builder.

Step 3 - Insert a Container into the page and then choose a column layout.

Step 4 - Click the ‘+ Element’ button to bring up the Elements window. Locate the Image Element and click to add it to the page. Alternatively, just search for 'Image' and the Image Element will be filtered for your selection.

Step 4 - Insert an image using the ‘Image’ option, and set the ‘Image Lightbox’ option to Yes. If you’d like to set a different lightbox image, assign one using the ‘Lightbox Image’ option.

Step 5 - Configure the Image Element. You can adjust options such as the border, alignment, hover type, and animations.

Step 6 - Add more Image Elements by repeating Steps 4 - 5. If you'd like to retain the styling options you've chosen previously, then simply click the 'Clone Element' icon on the first Image Element, and then only change the assigned image.

Image Element > Location

The 'Gallery ID' Option

Step 1 - Once you've added all your Image Elements, you can start determining which Image Elements you'd like to add to your Lightbox gallery.

Step 2 - Edit the Image Element you want to add to the Lightbox gallery and locate the 'Gallery ID' option. To this option, insert a unique gallery ID. For example, TravelGallery.

Step 3 - Keep repeating Step 2 until you've added your unique gallery ID to all the Image Elements that will be displayed in the Lightbox gallery. You can add the gallery ID to as many Image Elements as you wish.

Step 4 - Click 'Save Draft' or 'Publish' to save your changes.