Image Gallery allows you to easily add and manage the images on your site with different visualizations.

 

To add a Gallery:

1. Click on Build in Left Menu.

2. Click on Gallery.

3. Drag and drop one of the available gallery types on the page.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 




When the element is added on the page you will see Gallery Properties menu on the right.

To add an image*:

 

1. Click on the "Add New Image" and you will be presented with three options.
 
  • To upload directly from your device, click on "Upload Image". 
  • To upload from an URL click on "Add from URL", paste the URL of the image you wish to upload, then click on "Add Image".
 
 
To edit the settings of a single image, mouse over the image preview in right panel, and click on the cogwheel icon to access Image Options. To remove single image you need to mouse over the image preview in right panel and click on the bin icon.
 
 

Image Options:

  • The first things that you see are the back button, which allows to you go back to the Gallery Options and a small preview of the image.
  • Edit button - the option is available for custom images only, and allows you to modify the image with the built-in editor
  • Change button - replace the existing image.
  • Image Title (ALT Text) - used by screen readers and search engines
  • Image description - a short description for the image and the image caption that is visible on page
  • Use image file name as Image Description - this will overwrite the 'Image Description' option.
  • Link Type - you can choose when the images is clicked to open the Large Image Viewer (the original image or just a larger copy of the image) an Internal page or an External page.
  • Add Custom Thumbnail - adding a custom thumbnail will change the preview image. The original image will only be visible in the Large Image Viewer.
 

 
 
 
Scrolling down further within the Properties menu you will find options to change the gallery's appearance such as Gallery Type, Appearance Options, Image Effects, Image Shape, Large Image Viewer and more. 
 
 
Thumbnails
 
  • Image size  -  you can choose from a predefined size (Small, Medium and Large) or set any Custom size that fits your design.
  • Show Caption - choose to see a caption/description below the image or not.
  • You can select the number of Thumbnails Columns.
  • Crop Image - when Crop Image is checked, the uploaded image will be cropped to the aspect ratio of the gallery image size before being resized. When this option is not checked, the uploaded image will preserve its original aspect ratio in the gallery.
  • Thumbnail Columns number, by default 3.

Slideshow


  • Image size  -  you can choose from a predefined size (Small, Medium and Large) or set any Custom size that fits your design.
  • Show Caption - choose to see a caption/description below the image or not.
  • Animated Captions - choose if the captions should be animated or static (visible only when 'Show Caption' option is enabled).
  • Crop Image - when Crop Image is checked, the uploaded image will be cropped to the aspect ratio of the gallery image size before being resized. When this option is not checked, the uploaded image will preserve its original aspect ratio in the gallery.
  • Show Prev Next button  - navigation buttons that allow you to switch between gallery images.
  • Timeout - the delay in seconds that takes the images to automatically change.
  • Autoplay - you can set the images to switch automatically
  • Show Play / Pause - the buttons allow you to pause or resume the Autoplay option
  • Loop - enabling the option will tell the gallery to continue to autoplay, even after reaching the last image.
  • Transition  - you can choose between a Fade or a Slide effect or have no transition effect.
  • Navigation Type  - you can add a navigation option below the image preview - buttons, numbers or both.

 


Filmstrip

  • Image size  -  you can choose from a predefined size (Small, Medium and Large) or set any Custom size that fits your design.
  • Show Caption - choose to see a caption/description below the image or not.
  • Crop Image - when Crop Image is checked, the uploaded image will be cropped to the aspect ratio of the gallery image size before being resized. When this option is not checked, the uploaded image will preserve its original aspect ratio in the gallery.
  • Show Prev Next button  - navigation buttons that allow you to switch between gallery images.
  • Show Scrollbar - you can add a scrollbar to switch between images.
  • Crop Icon - when Crop Icon is checked, the icons will be cropped to the aspect ratio of the Thumbnail Size before being resized. When this option is not checked, the icons will preserve the original aspect ratio in the gallery.
  • Set thumbnails (image icon) size in pixels.
  • Set thumbnails (image icon) position with Thumbnails Placement - Top, Bottom,Left,Right.
  • Timeout - the delay in seconds that takes the images to automatically change.
  • Autoplay - you can set the images to switch automatically.
  • Show Play / Pause - the buttons allow you to pause or resume the Autoplay option.
  • Loop - enabling the option will tell the gallery to continue to autoplay, even after reaching the last image.
  • Transition  - you can choose between a Fade or a Slide effect or have no transition effect.

Mosaic

  • Image size  -  you can choose from a predefined size (Small, Medium and Large) or set any Custom size that fits your design.
  • Show Caption - choose to see a caption/description below the image or not.
  • Crop Image -  When Crop Image is checked, the uploaded image will be cropped to the aspect ratio of the gallery image size before being resized. When this option is not checked, the uploaded image will preserve its original aspect ratio in the gallery.
  • Show Prev Next button  - navigation buttons that allow you to switch between gallery images.
  • Show Scrollbar - you can add a scrollbar to switch between images.
  • Enable or disable Crop Icon option to shrink image icon.
  • Set thumbnails (image icon) size in pixels.
  • Set thumbnails (image icon) position with Thumbnails Placement - Top, Bottom,Left,Right.
  • Autoplay - you can set the images to switch automatically.
  • ​Show Play / Pause - the buttons allow you to pause or resume the Autoplay option.
  • Loop - enabling the option will tell the gallery to continue to autoplay, even after reaching the last image.
  • Transition  - you can choose between a Fade or a Slide effect or have no transition effect. 

Slider

  • Image size  - Small, Medium, Large and Custom.
  • Show Prev Next buttons  - navigation buttons that allow you to switch between gallery images.
  • Show Scrollbar - you can add a scrollbar to switch between images.
  • Show Caption - choose to see a caption/description below the image or not.
  • Autoplay - you can set the images to switch automatically.
  • ​Show Play / Pause - the buttons allow you to pause or resume the Autoplay option.
  • Loop - enabling the option will tell the gallery to continue to autoplay, even after reaching the last image.

Grid

  • Type - Responsive, Masonry, Fixed Columns layouts.
  • Columns Number
  • Row Height
  • Column gap
  • Row Gap
  • Image Border radius - adds a circular effect to the image thumbnails.
  • Grid Item - modify each grid item individually.
  • Grid Item Columns
  • Grid Item Rows

 

All Gallery types share the options listed below.

Large Image Viewer is available when the user clicks on a single image.

- Show Caption option to enable or disable Image Description text below the image in large image viewer.
- Dim Lights - with the option enabled, the content behind the Large Image Viewer will be dimmed.
- Zoom - if you have a very large image, you will have the option to click on it to zoom
- Size - the size of the Large Image Viewer
Slideshow options:
- Set timeout in seconds - delay between changing images.
- Autoplay - you can set the images to switch automatically
​- Show Play / Pause - the buttons allow you to pause or resume the Autoplay option
- Loop - enabling the option will tell the gallery to continue to autoplay, even after reaching the last image.
- Set Navigation type to buttons, 
- Overlay Prev / Next arrow buttons to navigate between the images.
 
 
Image Effects (Not applied in Large Image Viewer)
You can change the image preview effect. The available options are:
- None
- Polaroid
- Reflection
- Grayscale
- Sepia
- Light
- Dark

 
 
 
 
Image Shapes (Not applied in Large Image Viewer)
You can change the image preview shape. Available shapes are:
- Original
- Oval
- Circle
 
 
*Note: There is no option to upload zip files with images. There is a limit of 200 images per upload.