The Photo Gallery element helps you create professional, visually appealing galleries without any technical expertise. It's well suited to showcasing visual content on websites and funnels, improving user engagement and aesthetic appeal through features such as lightbox functionality, lazy loading, and customisable layouts.

Key Features & Benefits

  • Image Integration: Easily upload and display images to create dynamic galleries.
  • Lightbox Support: Enhance the viewing experience by enabling images to open in a lightbox.
  • Heading Option: Add a custom heading to your gallery to provide context or highlight branding.

How to Use

Navigate to the website or funnel builder and locate the Photo Gallery element in the left sidebar.

Drag and drop the element into the desired section of your page.

Click the element to access its settings. Here, you can configure the element to suit your preferences.

General

Element Name

Enter a custom name for the element in this field to ensure easy identification.

Background Color

Choose a background colour from the colour picker, add a custom colour, or select one of your brand colours.

Content

The content section displays the images added to your Photo Gallery. Edit or delete an image by clicking the corresponding option within the associated actions dropdown. You can also reorder the images by dragging and dropping the hamburger sign next to each image.

Add Image

Add additional images from your media library by clicking the image buttons, or enter an image link in the provided field.

Enable the optimise image option to enhance page loading speed.

Heading

Enter the text to be displayed on the element header, choose the colour you wish for it to be, and adjust the size to your preferences.

Image

In the Image section, you can choose your overlay colour and text colour, opt to display the image title or the description, and adjust the font sizes of the title and description.

Layout Customization

Switch to the Layout tab to customize:

  • Grid, Vertical, and Horizontal Masonry Layouts: Select the optimal layout to display your images.
  • Column Control: Customize the number of columns for your gallery to suit your design.
  • Spacing Between Images: Adjust spacing for a polished and organized presentation.

Advanced

In the Advanced section, you can adjust the Size, Margin & Padding, Shadow, General Settings, Watermark, and Custom Class Settings of the Photo Gallery.

Size

Enter the desired height and width of the element to ensure your gallery is fully responsive and optimised for all devices.

Margin & Padding

Increase the spacing between the element and the section, and between images, by adjusting the margin and padding settings.

Shadow

Enhance your design by applying box shadows and customising them to suit your preferences. For more intricate designs, add multiple shadows to any element by clicking the plus button. Customise each shadow by selecting its type (outer or inner) and adjusting the X and Y offsets, blur radius, spread, and colour.

General Settings

Define what happens when users click on an image (e.g., open the image in a popup or redirect to a URL).

Watermark

Protect or brand your images by adding a watermark.

Custom Class

Assign a custom class name to your element, enabling you to apply custom styles specifically to that element.

Visibility

Choose whether the element should be displayed on mobile, desktop, or both.

The Photo Gallery element is a great choice for anyone looking to create visually impressive, functional galleries. With its customisable options and straightforward design, it simplifies the process of showcasing content, improves user engagement, and gives websites and funnels a professional finish.