> 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/image-with-text.md).

# Image with text

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/ERXqNTYDiIlipw5evFTy/2024-02-1519-28-53-ezgif.com-gif-to-webp-converter.webp" alt=""><figcaption></figcaption></figure>

## **Adding a section**

In order to add a section, you need to go to **`Customizer`** → **`Add Section`** → **`Image with text`**.

## Section settings

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/xYRUA6mJuaD0xezlghrm/Untitled.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/ywAtOWysHCmd7ck3MaOB/Untitled%201.png" alt=""><figcaption></figcaption></figure>

1. **`Image position`** - setting allows you to select the position for the image;
2. **`Text alignment`** - setting allows you to select the alignment of the text;
3. **`Enable animation`** - setting allows you to turn on the mouse-move animation for the image;
4. **`Image`** - setting allows you to select the image;
5. **`Image background`** - setting allows you to select the background-color of the image;
6. **`Label`** - setting allows you to set the text for the label;
7. **`Heading`** - setting allows you to set the text for the title;
8. **`Text`** - setting allows you to set text content;
9. **`Button label`** - setting allows you to set the label for the button;
10. **`Button aria-label`** - setting allows you to set the `aria-label` for the button. This attribute allows screen readers to better convey information to people with disabilities;
11. **`Button link`** - setting allows you to set a link for the button;
12. **`Button type`** - setting allows you to set the type of the button;

### Layout

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/SmCmauNa8fCPOCouyjni/Untitled%202.png" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - 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**

### Block Image

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/YVuILPEa1qcdfBJnX5eT/Untitled%203.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/1kkyuSLxN9rM5Y7mvIcA/Untitled%204.png" alt=""><figcaption></figcaption></figure>

1. **`Image`** - allows you to add logos for the section;