Gallery 2017-07-12T21:56:37+00:00

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.

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

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 and captions of the image inside the Lightbox.

Complete Set of Options

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

  • image_ids – This takes a comma separated list of image IDs to be added to the gallery.

  • 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

  • hover_type – Set if your images will have a hover animation. Choose from: none, zoomin, zoomout and liftup

  • column_spacing_all – Set the the desired space between your gallery images. e.g. 10px

  • show_titles – Choose how the image titles should be displayed. You can select from: none, under_image, in_lightbox or both Note: The title used will be the title set in your WordPress Media Library settings.
  • lightbox – Choose if you want to open the images in a lightbox on click. Choose from: yes or no

  • 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. Please refer to this documentation section.

  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.

Join The 380,000+ Satisfied Avada Users!


Sliding Bar Section For Widgets

This is the sliding section that can be enabled or disabled on any demo. You can insert anywhere from 1-6 columns along with any widget that comes with Avada, WordPress or additional 3rd party plugins. It's perfect for placing additional information on your site.

Recent Works

Contact Info

12345 North Street, New York City, NY 555555

Phone: 1-800-555-5555

Mobile: 1-234-567-8910

Fax: 1-234-879-5641

Web: http://yourwebsite.com