Gallery Element

28/01/2021

The Gallery Element can be used to quickly create a responsive and stylish image gallery on your site. Select various layouts like Grid or Masonry, choose column width, column spacing, lightbox options and more. It was updated with Avada 5.8, with the ability to add links to individual images, and lazy loading by default. Below, we’ll walk you through the various options and settings for this very useful element.

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 scroll down and find the Gallery Element or you can use the search bar in the upper right-hand corner to filter for the Gallery Element.

Step 2 – That will open the element’s settings. You can now add images to the gallery in two ways. You can bulk upload images at the top right of the Element Options Panel, by choosing Select Images, in the Bulk Image Upload option. This is ideal if you have all your images ready to go. Either upload your images or select them from the Media Library (with Cmd/Ctrl click, or Shift/Click for contiguous images) and when you are finished, click ‘Insert Into Page’. Alternatively, you can add your images one at a time on the left hand side, under the Add / Edit Items options. Just click the + Images button and then the edit button, or you can clone an image to retain its settings and then just change the image out.

Step 3 – Next, you’ll configure the settings which will style your gallery as desired. You’ll start with choosing a layout, image size, column count 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.

Step 4 – When you have finished styling your element, click Save. You will be returned to your page content. Click preview to view your gallery on the front end, and you can always return to edit the element to make changes.

Avada Website Builder

729,869 Businesses Trust Avada

Get Avada
Avada Website Builder

729,869 Businesses Trust Avada

Get Avada
Avada Website Builder

729,869 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.

Parent Options

  • Bulk Image Upload – Allows you to bulk upload or select images from the media library, which will populate into individual items. When using the Gallery Element in Layouts, dynamic content options will also be available. See the Dynamic Content In Layouts section below.
  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

Add / Edit Settings

  • Add / Edit Items – This is where all your child element’s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

  • 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.

  • Add New Toggle Button –  Allows you to add a new Toggle.

View The Options Screen

Child Options

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

  • 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

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.

  • 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

Dynamic Content In Layouts

When using the Gallery Element in Avada Layouts, you will find a dynamic content option under the Bulk Upload option. Here you can add Featured Images, ACF Galleries, or Woo Galleries.

Gallery Element In Layouts > Dynamic Content
Avada Website Builder

729,869 Businesses Trust Avada

Get Avada
Avada Website Builder

729,869 Businesses Trust Avada

Get Avada
Avada Website Builder

729,869 Businesses Trust Avada

Get Avada