How to Use the Gallery Element

The Gallery Element is a powerful way to showcase images on your website, whether you're displaying a portfolio, product images, or a photo collection. It allows for flexible layouts, lightbox functionality, and advanced customization.

1. Adding the Gallery to Your Page

Step 1: Insert the Gallery Element

1. Open the page editor.
2. Click Add Elements → Select Gallery.
3. Drag and drop it where you want the gallery to appear.

Step 2: Upload Images

1. Click on each placeholder image.
2. Select Upload Image and choose your files.
3. Repeat this process for each image.

2. Managing Images in the Gallery

Adding More Images

• Click Duplicate to add a new image.
• Replace the placeholder with your desired image.

Rearranging Images

• Select an image and use the left/right arrows in the toolbar to move it.

Resizing Images

• Click and drag the bottom handle of an image to adjust its height.

3. Adjusting Gallery Layout

Choosing the Number of Columns

• Go to the Gallery Settings (top-right toolbar).
• Select between 1 to 6 columns for your layout.
• If adding more images, ensure they fit within the selected column structure.

Spacing Between Images

• Adjust the spacing slider to increase or reduce the gap between images.

Making Images Clickable

• Enable Lightbox Mode so images open in a full-screen preview.
• Set individual image links to external pages, popups, or downloads.

4. Image Customization Options

Focal Point & Zoom

• Select an image and adjust the focal point (blue dot) to ensure important areas remain visible.
• Use the zoom function to control the visible section of an image.

Adding Filters & Overlays

• Apply filters to create effects like grayscale or sepia.
• Use overlays for unique color effects that match your website's theme.

Applying Image Masks

• Choose from pre-designed shape masks (circles, polygons, etc.).
• Upload a custom SVG mask for a unique gallery style.

5. Optimizing for Different Devices

Tablet View

• Adjust the number of columns (e.g., change from 3 to 2 for better spacing).
• Resize images if necessary.

Mobile View

• By default, images stack vertically for better mobile usability.
• Fine-tune image focal points for better cropping on smaller screens.

6. Why Use the Gallery Element?

• Quick & Easy Setup – Drag, drop, and upload images effortlessly.
• Custom Layouts – Adjust columns, spacing, and arrangement.
• Interactive Experience – Enable lightbox and clickable images.
• Mobile Responsive – Optimize image display for all screen sizes.

By using the Gallery Element, you can create visually appealing image layouts that enhance your website’s engagement and aesthetics.