Max Addons Product Gallery element for Bricks Builder allows you to create visually appealing galleries and transform plain WooCommerce product pages into engaging showcases.
In this overview doc, we will see all available options and features of the WooCommerce Product Gallery element.
Getting Started#
Before using the Product Gallery element, ensure that the following tools are installed and activated:
Steps to Get Started#
- Create or Edit a Page: Open an existing page, create a new page, or edit the WooCommerce single product page template in the Bricks Builder editor.
- Search for the Product Gallery Element: In the element search bar, type "Product Gallery".
- Add the Element: Add the Product Gallery element to your page. Ensure you're using the Max Addons version by checking for the "Max" tag in the top-right corner of the element.
Customization Options in the Content Tab#
Once added, customization options appear in the left sidebar. The first setting is Layout, offering three choices:
- Grid
- Carousel
- Thumbnail Slider
You can also customize:
- Product Image Size: Adjust the size of product images to match your layout preferences.
- Enable Lightbox: Toggle this option to allow images to open in a lightbox for a better viewing experience.
Note: The customization options in the Content Tab vary based on the layout you choose.
Grid Layout Customization#
If you choose Grid layout, two subsections appear:
- OPTIONS
- THUMBNAILS
OPTIONS#
- Columns: Set the number of columns to arrange the images.
- Spacing: Adjust the space between images to achieve a clean layout.
THUMBNAILS#
- Border: Customize border width, style, and color to enhance the thumbnail appearance.
Carousel Layout Customization#
Selecting Carousel Layout provides four subsections:
- OPTIONS
- THUMBNAILS
- ARROWS
- PAGINATION
OPTIONS#
- Type: Choose from Loop, Slide, or Fade for different scrolling effects.
- Direction: Set the movement (Left to Right, Right to Left, or Vertical) to match your design needs.
- Spacing: Adjust spacing between items for better alignment.
- Start Index: Define which item appears first in the carousel.
- Items to Show: Select the number of visible items at a time.
- Items to Scroll: Define how many items scroll simultaneously.
- Speed (ms): Adjust animation speed for smooth transitions.
AUTOPLAY OPTIONS
- Autoplay: Enable/Disable automatic sliding of images.
- Pause on Hover: Toggle this to pause scrolling when hovered.
- Pause on Focus: Enable to stop autoplay when an image is focused.
- Interval (ms): Set the autoplay interval to control timing.
THUMBNAILS#
- Border & Active Border: Customize thumbnail border styles to highlight selected images.
ARROWS#
- Show: Enable or disable navigation arrows.
- Size & Color: Adjust arrow size, background, and text color to match the design.
- Border & Shadow: Customize border and text-shadow for better visibility.
- Prev Arrow & Next Arrow Positioning: Modify position (Top, Right, Bottom, Left) for better navigation control.
PAGINATION#
- Show: Toggle pagination visibility to display image navigation dots.
- Margin, Height, Width, Color, Border: Customize pagination styles for better aesthetics.
- Active Pagination: Set different styles for the active pagination item to improve usability.
- Positioning: Adjust placement (Top, Right, Bottom, Left) for optimal placement.
Thumbnail Slider Layout Customization#
Choosing Thumbnail Slider Layout provides four subsections:
- OPTIONS
- THUMBNAILS
- ARROWS
- PAGINATION
OPTIONS#
- Type: Choose from Loop, Slide, or Fade to define the sliding effect.
- Direction: Set movement (Left to Right, Right to Left, or Vertical) for better orientation.
- Spacing, Start Index, Speed: Customize scrolling behavior for seamless navigation.
AUTOPLAY OPTIONS
- Autoplay: Enable/Disable autoplay to automate scrolling.
- Pause on Hover & Focus: Toggle options to refine user experience.
- Interval (ms): Set autoplay speed to control transition timing.
THUMBNAILS#
- Position: Place thumbnails at the Top, Right, Bottom, or Left for better layout adaptability.
- Spacing & Items to Show/Scroll: Configure display settings for optimal arrangement.
- Opacity & Active Opacity: Adjust visibility to highlight active thumbnails.
- Border & Active Border: Customize borders to create a structured gallery look.
ARROWS#
- Show, Size, Color, Border, Background: Customize arrow appearance for easier navigation.
- Disabled State: Define styles for disabled arrows to maintain consistency.
- Prev & Next Arrow Positioning: Adjust position (Top, Right, Bottom, Left) for a precise layout.
PAGINATION#
- Show, Margin, Height, Width, Color, Border: Adjust styles for navigation dots.
- Active Pagination: Set unique styles for active items to improve clarity.
- Positioning: Modify placement (Top, Right, Bottom, Left) to fit your design preferences.
This was the complete overview of the Max Addons Product Gallery element for Bricks Builder and WooCommerce!