Image Gallery allows you to easily add and manage the images on your site with various visualisations.
Galleries enhance the visual appeal of your website, enabling you to showcase photos, artwork, or products in an organised and attractive manner. You can create multiple galleries, each tailored to specific themes or categories, ensuring that your content is displayed in a structured way. Galleries can be customised with different layouts, such as grids and slideshows allowing you to choose the format that best suits your site's design and user experience.
Advanced features like lightbox effects, image captions, and hover animations can further enhance the presentation of your images. Additionally, responsive design ensures that your galleries look great on all devices, from desktops to smartphones. By utilizing an image gallery, you can improve user engagement, making your site more interactive and visually engaging.
To add a gallery:
1. Click on Build in the left menu
2. Select the Gallery tab
3. Drag and drop one of the available gallery types on the page
4. Chose the way to upload image, once you have selected the Add New Image button
- To upload directly from your device, select the "Upload Image" from the available dropdown menu
- 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".
- You can as well simply drag & drop an image from your device to the respective area
- An additional option is to use our Free Images gallery via the respective button. This gallery offers a wide range of high-quality images that you can easily incorporate into your own galleries.
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.
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. |
To configure the different types of galleries:
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
The following options are shared between all types of galleries
Image Effects (Not applied in Large Image Viewer)
|
Image Shapes (Not applied in Large Image Viewer) You can change the image preview shape. Available shapes are: - Original - Oval - Circle |
Large Image Viewer is triggered when the website visitor clicks on a single image.
- Show Caption option to enable or disable Image Description text below the image in large image viewer. |
Notes:
- There is a limit of 200 images per upload, though this may vary depending on your internet connection.
- Uploading compressed files, such as .zip or .rar, is not supported.