Gallery Element

24/07/2022

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 was updated back in Avada 5.8, with the ability to add links to individual images, and lazy loading by default, and again with Avada 7.5 with the ability to add captions. 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.

View Element Demo Page!

Overview

How To Use The Gallery Element

Step 1 – 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.

Step 2 – 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.

Step 3 – 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.

Step 4 – When you have finished styling your element, save your changes.

Avada Website Builder

858,309 Businesses Trust Avada

Get Avada
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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.

Children Tab

  • Add / Edit Items – This is where add or edit new items for this Element. You can reorder elements by dragging them and dropping them into place.

  • + Add Image – Allows you to add Items individually to the gallery. The item then needs to be edited to add the image to it.
  • + Bulk Add – Allows you to bulk upload or select images from the media library, which will populate into individual items.
  • Item Options

  • Edit Item Icon – Allows you to edit an item.

  • Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

  • Delete Item Icon –  Allows you to delete an item.

  • Re-order Feature –  Allows you to drag and drop the item to your desired order to rearrange them. A small thumbnail of the image is shown to assist you in this.

View The Options Screen

Item Options

  • Image – Upload an individual image to add it to the gallery.

  • Image Focus Point – Set the image focus point by dragging the blue dot.

  • Image Title – Enter title text to be displayed on image.

  • Image Caption – Enter caption text to be displayed on image.

  • Image Link – Add 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 Target – Choose whether to open the link in the same browser tab (_self) or in a new one (_blank).

View The Options Screen

General Tab

  • Bulk Images Upload – Allows you to bulk upload or select images from the media library, which will populate into individual items. Dynamic content options are also available with this option.
  • 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. Leave empty for default value.

  • Pagination TypeChoose the pagination type. Choose from Load More Button, or Infinite Scrolling.

  • Load More Button TextInsert custom load more button text.

  • Gallery Layout – Controls the gallery layout type. Choose between DefaultGrid, or Masonry.

  • Picture Size – Choose between DefaultFixed, or AutoFixed will load a theme generated image size, which will be cropped to a predefined size. This will allow you to have a uniform layout even when your images aren’t the same size. Auto will use the image’s natural shape, and scale the image in keeping with its aspect ratio and the image will not be cropped.

  • Images Aspect Ratio Select an aspect ratio for the gallery images. IMPORTANT: Aspect ratio does not 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 Ratio – Sets 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 2×2 Width – This option decides when a square 1×1 image should become 2×2. 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 (1×1, landscape, portrait or 2×2), regardless of the original ratio.

  • Image Lightbox – Choose between Yes or No. This will determine if the images are displayed in the lightbox. Lightbox must be enabled in Theme Options or the image will open up in the same tab by itself.

  • Lightbox Content – Choose between Default, None, Titles, Captions, or Titles and Captions. Set if titles and/or captions will display in the lightbox. All titles and captions from each image are pulled from the image itself in the WordPress Media Library. NB. Titles and Captions must be enabled globally in Theme Options > Lightbox for them to display.

  • MarginEnter values including any valid CSS unit, ex: 4%.

  • Element Visibility – Allows you to choose which devices to display the element. Choose one or more from Mobile, Tablet, or Desktop. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.
  • CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

  • CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

View The Options Screen

Design Tab

  • Number of Columns – Can be set to a number 1 – 6. This setting will determine the max number of columns your layout can reach. IMPORTANT: Masonry layout does not work with 1 column.
  • Column Spacing – Controls the column spacing between each gallery image.

  • Hover Type – Choose between Default, None, Zoom In, Zoom out, or Lift Up. This will determine which animation style is applied to the image on hover.

  • Gallery Image Border Size – Sets the border size of the gallery image.

  • Gallery Image Border Color – Sets the border color of the gallery image.

  • Gallery Image Border Radius – Sets the border radius of the gallery image. For example, 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 Styling
  • Regular Options

  • Load More Button Text ColorSelect load more button text color.

  • Load More Button Background ColorSelect load more button background color.

  • Hover Options

  • Load More Button Hover Text ColorSelect load more button hover text color.

  • Load More Button Hover Background ColorSelect load more button hover background color.

View The Options Screen

Caption Tab

  • Caption – Choose the caption style. By default set to Off. Choices are Off, Above, Below, Navin, Dario, Resa, Schantel & Dany.

  • Image Title Heading TagChoose HTML tag of the image title, either div or the heading tag, h1-h6.

  • Image Title Typography

  • Font Family – Controls the font family of the image title.

  • Font Size – Controls the font size of the image title.

  • Line Height – Controls the line height of the image title.

  • Letter Spacing – Controls the letter spacing of the image title.

  • Text Transform – Choose how the title is displayed. Choose from Default, Normal, or Uppercase.

  • Font Color – Controls the color of the Image Title.

  • Image Caption Background Color – Controls the background color of the caption.

  • Image Caption Typography

  • Font Family – Controls the font family of the image title.

  • Line Height – Controls the line height of the image title.

  • Letter Spacing – Controls the letter spacing of the image title.

  • Text Transform – Choose how the title is displayed. Choose from Default, Normal, or Uppercase.

  • Font Color – Controls the color of the Image Title.

  • Caption Border Color – Controls the color of the caption border.

  • Image Overlay Color – Controls the color of the image overlay.

  • Caption Align – Choose how to align the caption.

  • Caption Area Margin – In pixels or percentage, ex: 10px or 10%. Only available on Above, and Below.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Options > Avada Builder Elements > Gallery.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

  • Number Of Items Choose 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. Choose from Load More Button or Infinite Scrolling.

  • Load More Button Text Insert custom load more button text.

  • Picture Size – Choose between Fixed, or AutoFixed will load a theme generated image size, which will be cropped to a predefined size. This will allow you to have a uniform layout even when your images aren’t the same size. Auto will use the image’s natural shape, and scale the image in keeping with its aspect ratio and the image will not be cropped.

  • Gallery Layout – Controls the gallery layout type. Choose between Grid, or Masonry.

  • Number of Columns – Can be set to a number 1 – 6. This setting will determine the max number of columns your layout can reach. IMPORTANT: Masonry layout does not work with 1 column.

  • Column Spacing – Controls the column spacing between each gallery image.

  • Hover Type – Choose between None, Zoom In, Zoom out, or Lift Up. This will determine which animation style is applied to the image on hover.

  • Lightbox Content – Choose between None, Titles, Captions, or Titles and Captions. Set if titles and/or captions will display in the lightbox. All titles and captions from each image are pulled from the image itself in the WordPress Media Library.

  • Gallery Image Border Size – Sets the border size of the gallery image.

  • Gallery Image Border Color – Sets the border color of the gallery image.

  • Gallery Image Border Radius – Sets the border radius of the gallery image. For example, 1px or round.

View The Options Screen
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada