Skip to main content

Grid Gallery

Written by Bonzai
Updated today

A multi-column layout widget for displaying multiple assets simultaneously in a structured grid.

Tutorial Video:

Assets: (same dimension required)

  1. Images(JPG/PNG/WebP): Min 2

Steps

  1. Add Grid widget

  2. Upload assets

  3. Set column structure

  4. Enable interaction (expand/hover)

  5. Adjust layout spacing

Properties

  1. Live Preview: Enable to instantly preview the gallery on the canvas.

  2. Background Properties: Customize the background styling.

  3. Gallery Images: Upload images/slides for the grid.

  4. Transition Speed: Set the speed of slide transitions.

  5. Slide Gap: Adjust spacing between grid images.

  6. Loop: Enable continuous looping of slides.

  7. Auto Play: Automatically animate the gallery.

  8. Show Navigation Arrows: Toggle visibility of navigation arrows.

  9. Show Pagination Dots: Toggle visibility of pagination dots.

  10. Arrow & Dot Properties: Customize color and size of arrows and dots.

Inspirations

Points to Note

  • Maintain consistent image ratios

  • Optimize asset sizes

  • Ensure responsiveness

FAQs

  1. How many images we can show at a time on screen?

    Its compley depainds on the design, we can show multiple images at the same time on screen.
    ​

  2. Can we add every image, separate clicks, and track it?

    Yes, we can add separate clicks for every image and we can track it.

Did this answer your question?