> For the complete documentation index, see [llms.txt](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/ultra-sections/sections-and-snippets/column-image.md).

# Column image

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/urmyCc7vkKVCOWnlLsZV/column-image1%20(1).png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/FzRu8AEjoBmqxz5NlZhI/column-image2.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/8E7n9Ulfqu44Mjdr3OVt/column-image3%20(1).png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/yCSmHV5IJliqeOynHKUo/column-image4.png" alt=""><figcaption></figcaption></figure>

## **Adding a Section**

In order to add a section, you need to go to **`Customizer`** → **`Add Section`** → **`Column image`**.

## **Section settings**

### Images row

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/OamqofINxjvkjHDVI88i/images-row-settings.png" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - the title of the section;
2. **`Image aspect ratio`** - aspect ratio of the images. Can be Square, Landscape or Portrait;

### Layout

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/7tHXjJIVexC0S39eJeei/images-row-settings-3.png" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.

## **Blocks settings**

**Blocks limit - `2`**

### Image Block

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/C89gyrnH3OaOzjtukqbl/images-row-settings-2.png" alt=""><figcaption></figcaption></figure>

1. **`Image`** - image picker.
