The Image Gallery Element combines several images in columns and rows, so there is no need to position each Image as a separate element.
You can easily resize, align, and move all Images together. You can also add Captions, Hover Effects, and show a large image preview on click, usually called the Lightbox. Your visitors can filter the Gallery if you assign it to Images.
The Image Gallery is mobile-friendly, as Images automatically transform into columns on smaller screens of mobile devices.
Video Lesson
Add Image Gallery Element
Add the Image Gallery Element from the Add Panel of the Quick Access Pane.
You can also find the Image Gallery Element in the Image section.
Image Gallery Layouts
You can also start with the Gallery Layouts, like Gallery Slider, Gallery Thumbnails, Gallery Caption, and Gallery Carousel.
Change Gallery Images
You can double-click the Gallery Image to change it.
You can replace the Gallery Images by dragging other ones from the desktop.
Multiple Gallery Image Replacement
You can make multiple replacements for the Gallery Images. If you select fewer images in the Media than in the Image Gallery, only the desired number of Images will be replaced.
Add More Gallery Images
You can add items to the Gallery by clicking the Add Image icon. You can add multiple images to a Gallery by selecting several images in the Add Image dialog.
You can also add images to the Gallery by dragging. Drag several Images from the PC desktop onto a Blank Block to automatically create the Gallery Element with those images.
SEO Alt Property
The Gallery Images are SEO friendly so that search engines can index them. The SEO Alt option is filled automatically when you add the Image Title.
Image Gallery Properties
All Image Gallery Properties are now distributed among three main Panels: Image Style, Categories, and Text Style.
The following are the main changes in the Property Panel for the Image Gallery Element.
We have combined the Columns, Rows, and Gap properties into one section.
The Image Style Panel contains all properties and Animation.
There is a separate Panel for Image Gallery Categories.
The Hover Shading, Text Animation, and Spacing are on the Text Style Panel.
Show Large Image On Click
You can set the Image Zoom Image On Click property to open the large Image view on click.
Proportional Image Resize in Responsive Modes
The Gallery Image resized proportionally in the Mobile Views.
## Summary
- Overview
- Video Lesson
- Add Image Gallery Element
- Image Gallery Layouts
- Add More Gallery Images
- Add New Images To Gallery
- Change Gallery Images
- Multiple Gallery Image Replacement
- SEO Alt Property For Gallery Images
- Image Gallery Properties
- Show Large Image On Click
- Image Resize In Responsive Modes
## Overview
The **Image Gallery Element** combines several images in columns and rows, so there is no need to position each Image as a separate element.
!image-gallery-overview.png!
You can easily resize, align, and move all Images together. You can also add Captions, Hover Effects, and show a large image preview on click, usually called the Lightbox. Your visitors can filter the Gallery if you assign it to Images.
The Image Gallery is mobile-friendly, as Images automatically transform into columns on smaller screens of mobile devices.
## Video Lesson
<iframe width="600" height="320" src="https://www.youtube.com/embed/MFWhq4az5Cs" title="Nicepage Lessons: Image Gallery Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
## Add Image Gallery Element
Add the **Image Gallery Element** from the Add Panel of the Quick Access Pane.
!add-image-gallery.png!
You can also find the Image Gallery Element in the Image section.
!add-panel-image-gallery.png!
## Image Gallery Layouts
You can also start with the Gallery Layouts, like Gallery Slider, Gallery Thumbnails, Gallery Caption, and Gallery Carousel.
!image-gallery-layouts.png!
## Change Gallery Images
You can double-click the Gallery Image to change it.
!double-click.png!
You can replace the Gallery Images by dragging other ones from the desktop.
!drag-image-to-gallery.gif!
## Multiple Gallery Image Replacement
You can make multiple replacements for the Gallery Images. If you select fewer images in the Media than in the Image Gallery, only the desired number of Images will be replaced.
!replace-multiple-images.gif!
## Add More Gallery Images
You can add items to the Gallery by clicking the Add Image icon. You can add multiple images to a Gallery by selecting several images in the Add Image dialog.
!add-more-images.png!
You can also add images to the Gallery by dragging. Drag several Images from the PC desktop onto a Blank Block to automatically create the Gallery Element with those images.
!drag-images-add.png!
## SEO Alt Property
The Gallery Images are SEO friendly so that search engines can index them. The SEO Alt option is filled automatically when you add the Image Title.
!seo-alt.png!
## Image Gallery Properties
All Image Gallery Properties are now distributed among three main Panels: **Image Style**, **Categories**, and **Text Style**.
!image-gallery-properties.png!
The following are the main changes in the Property Panel for the Image Gallery Element.
1. We have combined the Columns, Rows, and Gap properties into one section.
2. The Image Style Panel contains all properties and Animation.
3. There is a separate Panel for Image Gallery Categories.
4. The Hover Shading, Text Animation, and Spacing are on the Text Style Panel.
##
!gallery-property-panels.png!
## Show Large Image On Click
You can set the Image Zoom Image On Click property to open the large Image view on click.
!image-gallery-lightbox.png!
## Proportional Image Resize in Responsive Modes
The Gallery Image resized proportionally in the Mobile Views.
!proportional-resize.png!
##
