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 the gallery Element, you can begin adding images. Choose from stock images, 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
- Settings
- Alignment
- 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
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 color behind images with transparent backgrounds, like .png files.
Masonry Gallery
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 the 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
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 color) or "contain" (background color). If you have Arrows turned on, be sure to choose an arrow color that displays clearly against images or background color.
Test Slide Animation styles by clicking the Preview button from the sidebar.
Slideshow Settings
Main Image Spacing controls the distance between your main image and the slideshow.
Thumbnail Spacing controls the number of pixels between thumbnails.
Autoplay Controls are the number of seconds between each slideshow rotation.
Lightbox Autoplay are the number of seconds between each rotation when the slideshow is in lightbox mode.
