> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bosscart.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Gallery

> The gallery widget makes it easy to showcase images in a visually appealing way.

The **gallery widget** makes it easy to showcase images in a visually appealing way.

\*\*Layout Options: \*\***Updated**

* **Grid Format** – Arrange images in a structured, organized layout.
* **Interactive Carousel** – Display images in a **scrollable format** for dynamic presentation.
* **Masonry -** Display multiple sized images in a grid like format.

Simply **drag and drop the gallery widget** onto your page and customize the settings to match your design preferences!

<img src="https://mintcdn.com/alavon365/jdtI0XQKlmiI8Ux4/images/builder/0435f5681834c558.png?fit=max&auto=format&n=jdtI0XQKlmiI8Ux4&q=85&s=7abcfc695513f75b28bda6dab98c38a3" alt="" width="1221" height="748" data-path="images/builder/0435f5681834c558.png" />

### **Adding images**

To add an image or multiple images, select the edit images tab

<img src="https://mintcdn.com/alavon365/uuQgZm_Mu6oLUDLv/images/builder/fb40c1e544698d48.png?fit=max&auto=format&n=uuQgZm_Mu6oLUDLv&q=85&s=de96b201517a730e8de8e5df558722e8" alt="" width="988" height="392" data-path="images/builder/fb40c1e544698d48.png" />

### **Edit the styling**

There are three main styling options to chose from: Grid, Carousel and masonry. Within each style option you'll be able to:

* Set the amount of images to display per row
* Add padding between the images
* Image border radius
* Image ratio 'size'

Additional settings are. open the image when clicked in to a larger window, '**lightbox**', display navigation arrows, for visitors to click and scroll through the images, and add animation so the slides move automatically.

<img src="https://mintcdn.com/alavon365/a4e0aobXvzetCcVN/images/builder/e4a724c6ccfa32aa.png?fit=max&auto=format&n=a4e0aobXvzetCcVN&q=85&s=95c6098aed5823fe58334de10a337d32" alt="" width="1027" height="745" data-path="images/builder/e4a724c6ccfa32aa.png" />

### **Editing the image position**

Sometimes you may want to adjust the portion of image displayed, to do so open the images you have selected, select an image you want to adjust. Here you will be able to adjust the focus part of the image by moving the circle on the image.

<img src="https://mintcdn.com/alavon365/FzeaQ9w7x4DDlcd4/images/builder/5e39a0080f0876ba.png?fit=max&auto=format&n=FzeaQ9w7x4DDlcd4&q=85&s=a1f036d7ab3fac523ffd5174741af867" alt="" width="974" height="487" data-path="images/builder/5e39a0080f0876ba.png" />