Home/Documentation/Design Elements, Images/

Gallery Element

Last Update: February 14, 2023

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.
I Accept

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. Default currently set to 0. Reset to default.Using default value.
Pagination TypeChoose the pagination type. Default currently set to Load More Button.
Load More Button TextInsert custom load more button text. Default currently set to Load More.
Gallery LayoutSelect the gallery layout type. Default currently set to Grid.
Picture SizeFixed = width and height will be fixed.Auto = width and height will adjust to the image. Default currently set to Auto.
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. Default currently set to 1.5. Reset to default.Using default value.
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. Default currently set to 2000. Reset to default.Using default value.
Image LightboxShow image in lightbox. Lightbox must be enabled in Global Options or the image will open up in the same tab by itself. Current value set to Yes.
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. Default currently set to None.
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. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Number of ColumnsSet the number of columns per row. IMPORTANT: Masonry layout does not work with 1 column. Default currently set to 3.
Column SpacingControls the column spacing for gallery images. Default currently set to 10. Reset to default.Using default value.
Hover TypeSelect the hover effect type. Hover Type will be disabled when caption styles other than Above or Below are chosen. Default currently set to None.
Gallery Image Border SizeIn pixels. Default currently set to 0. Reset to default.Using default value.
Gallery Image Border ColorChoose the border color. Leave empty for default value of Light Gray. Reset to default.Using default value.
Gallery Image Border RadiusControls the gallery image border radius. In pixels (px), ex: 1px, or "round". Leave empty for default value of 0px.
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 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