The Photo Gallery element is designed to help users effortlessly create professional and visually appealing galleries without requiring technical expertise. Perfect for showcasing visual content on websites and funnels, this element enhances user engagement and aesthetic appeal through advanced features such as lightbox functionality, lazy loading, and customizable 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 color from the color picker, add a custom color, or select one of your brand colors.
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. Additionally, you can 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 optimize image option to enhance page loading speed.
Heading
Enter the text to be displayed on the element header, choose the color you wish for it to be and adjust the size to your preferences.
Image
In the Image section, you can choose your overlay color and text color, 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 optimized for all devices.
Margin & Padding
Increase the spacing between the element and the section and the spacing between images by adjusting the margin and padding settings.
Shadow
Enhance your design by applying box shadows and customizing them to suit your preferences. For more intricate designs, add multiple shadows to any element by clicking the plus button. Customize each shadow by selecting its type (outer or inner) and adjusting the X and Y offsets, blur radius, spread, and color.
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 an essential feature for anyone looking to create visually stunning and highly functional galleries. With its customizable options and user-friendly design, it simplifies the process of showcasing content, improves user engagement, and adds a professional touch to websites and funnels. Elevate your visual presentations today with this versatile tool.