Gallery Element

Last Update: March 30, 2024

The Gallery Element is a fantastic way to quickly create a responsive and stylish image gallery on your Avada site. Select various layouts like Grid or Masonry, choose column width, column spacing, lightbox options, captions and more.

The Gallery Element is regularly updated to add new features, so make sure you’re on the latest version of Avada to take advantage of them all. Below, we’ll walk you through the various options and settings for this very useful element, and remember to watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Gallery Element

In Avada Builder, click the + Element button to open the Elements list. You can visually find the Gallery Element or you can type in the search bar in the upper right-hand corner to filter for the Gallery Element.

Once the Element is inserted into the page, you can now add your images to the gallery. You can bulk upload images by choosing + Bulk Add on the Children tab, or by using the Bulk Image Upload option on the General tab (this one has the option of dynamic content). Adding items in bulk is ideal if you have all your images ready to go. Upload your images or if they’re already uploaded, just select them from the Media Library (with Cmd/Ctrl click, or Shift/Click for contiguous images) and when you are finished, click ‘Insert Into Post’. Alternatively, you can add your images one at a time, under the Add / Edit Items options. Just click the + Add Images button and then the edit button on the item, or you can clone an image to retain its settings and then just change the image out.

Next, configure the settings which will style your gallery as desired. These settings are found on the General tab. There are options for layout, image size, number of columns and more. Please see below for a complete list of available settings and what they do, or checkout the Gallery Demo page for some great examples. There is also a Captions tab, if you wan to configure your Gallery to have captions.

When you have finished styling your element, be sure to remembr to save your changes.

Parent Element Options

Note: The Default settings will use the global settings assigned for this element in the Options > Avada Builder Elements > Gallery section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Bulk Image UploadThis option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time.
Order ByDefines how items should be ordered. NOTE: In the case of order by ASC and RAND, pagination in Live Builder will not work the same as the regular front-end.
Number Of ItemsChoose the number of items you want to display. Set to -1 to display all. Set to 0 to use number of items from Settings > Reading.
Pagination TypeChoose the pagination type.
Load More Button TextInsert custom load more button text.
Gallery LayoutSelect the gallery layout type.
Picture SizeFixed = width and height will be fixed.Auto = width and height will adjust to the image.
Images Aspect RatioSelect an aspect ratio for the gallery images. IMPORTANT: Aspect ratio won't work with masonry layout.
Custom Aspect RatioSet a custom aspect ratio for the image.
Images Focus PointSet the gallery images focus point by dragging the blue dot. You can customize the focus point for each image.
Masonry Image Aspect RatioSet the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). IMPORTANT: The value of "1.0" represents a special case, which will use the auto calculated ratios like in versions prior to Avada 5.5.
Masonry 2x2 WidthThis option decides when a square 1x1 image should become 2x2. This will not apply to images that highly favor landscape or portrait layouts. IMPORTANT: There is a “Masonry Image Layout” setting for every image in the WP media library that allows you to manually set how an image will appear (1x1, landscape, portrait or 2x2), regardless of the original ratio. In pixels.
Image LightboxShow image in lightbox. Lightbox must be enabled in Global Options or the image will open up in the same tab by itself.
Lightbox ContentChoose if titles and captions will display in the lightbox. Titles and captions can only be displayed when this is globally enabled for the lightbox on the corresponding Global Options tab.
Lightbox IDSet an ID for the lightbox of the gallery items. This can be used in Image elements to add images to the same lightbox gallery.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

children

HeadingDescription
Add / Edit ItemsAdd or edit new items for this element. Drag and drop them into the desired order.

Design

HeadingDescription
Number of ColumnsSet the number of columns per row. IMPORTANT: Masonry layout does not work with 1 column.
Column SpacingControls the column spacing for gallery images.
Hover TypeSelect the hover effect type. Hover Type will be disabled when caption styles other than Above or Below are chosen.
Gallery Image Border SizeIn pixels.
Gallery Image Border ColorChoose the border color.
Gallery Image Border RadiusControls the gallery image border radius. In pixels (px), ex: 1px, or "round".
Load More Button SpanControls if the load more button spans the full width/remaining width of row.
Load More Button AlignmentSelect the button's alignment.
Load More Button Text ColorSelect load more button text color.
Load More Button Background ColorSelect load more button background color.

Caption

HeadingDescription
CaptionChoose the caption style.
Image Title Heading TagChoose HTML tag of the image title, either div or the heading tag, h1-h6.
Image Title TypographyControls the typography of the image title. Leave empty for the global font family.
Image Caption Background ColorControls the background color of the caption.
Image Caption TypographyControls the typography of the image caption. Leave empty for the global font family.
Caption Border ColorControls the color of the caption border.
Image Overlay ColorControls the color of the image overlay.
Caption AlignChoose how to align the caption.
Caption Area MarginIn pixels or percentage, ex: 10px or 10%.

Child Element Options

HeadingDescription
ImageUpload an image to display.
Image Focus PointSet the image focus point by dragging the blue dot.
Image TitleEnter title text to be displayed on image.
Image CaptionEnter caption text to be displayed on image.
Image LinkAdd the url the image should link to. If lightbox option is enabled, you can also use this to open a different image in the lightbox.
Link TargetControls how the link will open.

Useful Links & Resources

In this article