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!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Gallery ElementStep 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.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: 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 ScreenItem Options
Image – Upload an individual image to add it to the gallery.
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 ScreenGeneral TabBulk 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.
Gallery Layout – Controls the gallery layout type. Choose between Default, Grid, or Masonry.
Picture Size – Choose between Default, Fixed, or Auto. Fixed 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.
View The Options ScreenCaption Tab
Caption – Choose the caption style. By default set to Off. Choices are Off, Above, Below, Navin, Dario, Resa, Schantel & Dany.
Image Title Color – Controls the color of the image title.
Image Title Size – Controls the font size of the image title. Enter value including any valid CSS unit, ex: 20px.
Image Title Heading Tag – Choose 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.
Text Transform – Choose how the title is displayed. Choose from Default, Normal, or Uppercase.
Image Caption Color – Controls the color of the image caption.
Image Caption Background Color – Controls the background color of the caption.
Image Caption Size – Controls the font size of the image caption. Enter value including any valid CSS unit, ex: 20px.
Image Caption Font Family – Controls the font family of the image caption.
Image Caption Transform – Choose how the image caption is displayed.
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 ScreenGlobal OptionsLocation: 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 Auto. Fixed 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,Useful Links & ResourcesHow To Use Captions On Image Based ElementsCreating A Gallery With Image ElementsMasonry Layout Options