# Gallery

The **Gallery** displays a quick list of desired images with links to catch visitors' attention.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/Z6KdSrhDHHoIx34jM8T5/image.png" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Gallery**
3. **Save**
   {% endhint %}

## Section settings <a href="#gallery-settings" id="gallery-settings"></a>

### **Section header and general:**

Use the provided text fields to add a suitable heading/subheading/description. Leave any of them blank if you do not want to display them.

Adjust the text alignment (left/center/right) along with the background color and container type.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/vVQCjMsVIAPyP5ds88sn/image.png" alt=""><figcaption></figcaption></figure>

**Layout:** You can choose between Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video.

**Color schema:** You are allowed to change text color, background color, etc. with preset color.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/xlsWtpy1xqjWg5Zk0m7Y/image.png" alt=""><figcaption></figcaption></figure>

### **Gallery settings**

Type of the gallery can be selected between Grid and Carousel.

**Column gap** refers to the space between two images.

The **Aspect ratio** can be configured using preset options or customized according to your preferences.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/NCejReWaGycmHNg7Msh1/image.png" alt=""><figcaption></figcaption></figure>

### **Grid and Carousel settings**

Specify the grid layout by setting the **number of columns per row** and adjust the carousel by determining the **number of items displayed per row**.&#x20;

Furthermore, for the carousel, you have the option to activate autoplay, enable infinite looping, and add arrow buttons to facilitate navigation through the slides either forward or backward.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/9KDPsN0JKhril3BNH1f7/image.png" alt=""><figcaption></figcaption></figure>

### **Section padding**

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/dQHxIPi17nyLlFNCP267/image.png" alt=""><figcaption></figcaption></figure>

## **Blocks settings**

Select images for the gallery and assign direct links to each, enabling visitors to access additional content or pages by clicking on the gallery images.

<figure><img src="https://content.gitbook.com/content/z14kVz432NnMEq8AbqBr/blobs/ANFwhtntiwiV1V5ymPGP/image.png" alt=""><figcaption></figcaption></figure>