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

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

## 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! ##