Gallery Element

The gallery element is incredible and allows you to make beautiful photo galleries in seconds. Select various layouts like Grid or Masonry, choose column width, column spacing, lightbox options and more. Creating photo galleries with Avada is intuitive, easy and fun to do.

Gallery Layouts

The Gallery element allows you to choose a classic Grid layout or Masonry layout. In addition, Grid allows you to choose if the images are cropped to show the same width and height (fixed), or if they show the original image ratio (auto). Below is a set of 3 tabs that display various settings and the results of each.

Column Size & Spacing Control

The Gallery element gives you full control over column size and spacing which is so important for creative designs. Set the exact column size from 1-6 along with column spacing down to the exact pixel amount providing major creative freedom. The two examples below show you column size and spacing variations.

Border Control

Now you can control the border size, border radious and border color to the Gallery Element.

Border Size Control

Border Radious Control

Border Color Control

Bulk Image Uploads

Grab and upload as many images as you like in one go, and the Gallery Element from Fusion Builder and Avada will do the rest.

Image Hover Effects

The Gallery Element that you use allows the full set of images to have a hover effect. Choose from Zoom in, Zoom Out and Lift up.

Zoom In Effect

Lift Up Effect

Zoom Out Effect

Individual Image Hyperlinks

You can set each individual image in a single gallery with its own hyperlink pointing to anywhere you like.

Gallery Lightbox Settings

Images you display using the Gallery Element have the option to open in the lightbox which has 6 different design skins along with various display options. You can also choose to show the titles, the captions, both titles and captions or none inside the Lightbox.

Masonry Options & Overrides

Masonry Layouts have an added setup that allows large images to spread across 2×2 columns, both vertically as well as horizontally, all at the same time. Additionally, there are threshold options to give you the flexibility to control how your masonry layout displays. Individual images also have over-rides in your media library. You can force an image to be 1×1 or 2×2, landscape or portrait in your masonry layouts.

Mobile Visibility Settings

Our mobile visibility system gives you full control over what displays based on 3 customizable screen sizes. Every Fusion Builder Element has these settings and they allow you to show or hide elements on various screen sizes. In addition, you can choose what those screen sizes are! This gives you maximum control to set the exact point when an element should show or hide. Resize the page to see the elements appear or disappear based on what we set.

Only Show on Desktop

Only Show on Tablet

Only Show on Mobile

Complete Set of Options

Every option and description included with the Gallery Element is listed below.

  • layout – Choose between grid and masonry.

  • picture_size – Choose your image size from: Fixed and AutoFixed 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.

  • link – The URL path where the image links to. For example, 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.

Join The 500,000+ Satisfied Avada Users!