Gallery Element

07/08/2019

The fantastic Gallery Element has been updated with Avada 5.8, with the ability to add links to individual images, and lazy loading by default. 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. Below, we’ll walk you through the various options and settings for this very useful element.

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

How To Use The Gallery Element

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

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 your Theme Options > Fusion Builder Elements > Gallery Element 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.

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

  • 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 Fusion Builder Elements tab in the Theme 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 > Theme Options > Fusion Builder Elements > Gallery Element

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

Gallery Element Parameters

Each of these parameters correspond to each individual Element option as shown above, in this document. Likewise, the format illustrated below is what you will see if the Fusion builder is deactivated in your page/post.

Copy to Clipboard
  • layout – Choose between grid and masonry.
  • picture_size – Choose your image size from: Fixed and Auto. Fixed will use a theme generated image size for all images in the gallery. Auto will use the natural image size and scale down automatically to fit your columns as needed.
  • columns – Set the number of columns your gallery will have. It can range from 1 – 6
  • column_spacing – Set the the desired space between your gallery images without px. e.g. 10
  • gallery_masonry_grid_ratio – Accepts a numerical value. For example, 1.5. Set the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width).

  • gallery_masonry_width_double – Accepts a pixel value. For example, 2000px. 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.

  • hover_type – Set if your images will have a hover animation. Choose from: none, zoomin, zoomout and liftup
  • lightbox – Choose if you want to open the images in a lightbox on click. Choose from: yes or no

  • lightbox_content – Choose from default, titles, title_and_caption, or none. Choose if titles and captions will display in the lightbox.

  • bordersize – Accepts a pixel value. For example, 2px. Sets the gallery image border size.
  • bordercolor – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the gallery image border color.
  • border_radius – Accepts a pixel value or round. For example, 1px. Sets the gallery image border radius.

  • hide_on_mobile – Choose what screen sizes your element can be viewed on. This is a comma separated list. Choose any combination of the following: small-visibility, medium-visibility, large-visibility
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Child Settings

  • link – The URL path where the image links to. For example, http://www.example.com/. If lightbox is enabled, use the uploaded image’s URL to display it in a lightbox.
  • link_target – Choose from _blank or _self. Choose _blank to open the link in a new window, or _self to open it in the same window.
  • alt – The alternative text that will be displayed if the image can’t be viewed.