Media Gallery elements allow you to upload and display collections of images. They can be found in the Media section of the elements pop-up menu.
To get started, hover on a block where you want to add the Media Gallery and click Add Element.
Click Media in the elements menu, then select one of the gallery elements. These include Grid Gallery, Masonry Gallery, Slideshow (Below), Slideshow (Above) and Slideshow (None).
Once you select a gallery element, you can begin adding images. Choose from either stock images or previously uploaded images, or upload new ones. You can click more than one to add them at the same time.
From the Manage Media tab, you can add titles and descriptions as well as crop your image.
Click Save Changes when you are done.
Click anywhere on your gallery to launch the settings toolbar. Your options are:
- Add media
- Manage media
- Change layout
- Move content
- Copy content
- Remove content
Use the Layout option on the toolbar to switch between gallery types. Each gallery has slightly different options.
Grid Gallery: images are displayed in a neat square grid with identical sizes and aspect ratios.
Turning on Image Background allows you to display a colour behind images with transparent backgrounds, like .png files.
Masonry Gallery: images are stacked in columns of identical width, but images are different heights, similar to Pinterest.
Grid and Masonry Gallery Settings
In the Settings for the Grid and Masonry gallery you have Spacing, which controls how many pixels your thumbnails are separated by.
If you have Lightbox Autoplay selected, clicking on a thumbnail will expand and advance to the next image after a few seconds.
Text Style refers to how text captions (the title and description you added under the Manage Media tab) are displayed in relation to thumbnails:
- Banner: text appears on the thumbnail and the image once you enlarge it
- Overlay: text appears on the image thumbnail when you hover on it
- Below Image: text appears directly below the image thumbnail
You can also choose if your Title and Description display only on hover, only on lightbox or on both.
Slideshow: one large image is displayed at a time, with an optional thumbnail display at the top or bottom.
For the Image Style option, choose between 'cover' (no background colour) or 'contain' (background colour). If you have Arrows turned on, be sure to choose an arrow colour that displays clearly against images or background colour.
Test Slide Animation styles by clicking the Preview button from the sidebar.
Main Image Spacing controls the distance between your main image and the slideshow.
Thumbnail Spacing controls the number of pixels between thumbnails.
Autoplay Controls control the number of seconds between each slideshow rotation.
Lightbox Autoplay controls the number of seconds between each rotation when the slideshow is in lightbox mode.