> 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/timeline.md).

# Timeline

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/s5LyhOb3UNQqOIWShe8w/2024-06-0315-13-22-ezgif.com-video-to-gif-converter.webp" alt=""><figcaption></figcaption></figure>

## **For customers**

## **Adding a section**

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

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

## **Section settings**

### Layout

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/3cXgoCWYO3f8aTzEBKEg/timeline2.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**.

## **Block settings**

### General

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

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/kjwyriACPG2BGN8c2bNR/Untitled%20(2).png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/zOJXgzpxPW28zUjJ4eez/Untitled%20(3).png" alt=""><figcaption></figcaption></figure>

1. **`Tab heading`** - setting allows you to set the text for the tab;
2. **`Image desktop`** - setting allows you to select an image for the **desktop**;
3. **`Image mobile`** - setting allows you to select an image for the **mobile**;
4. **`Image aspect ratio`** - aspect ratio of the image;
5. **`Image position`** - setting allows you to select the position for the image;
6. **`Text alignment`** - setting allows you to select text alignment;
7. **`Heading`** - setting allows you to set the text for the title
8. **`Subheading`** - setting allows you to set the text for the subtitle;
9. **`Text`** - setting allows you to set text content;
10. **`Button label`** - setting allows you to set the label for the button;
11. **`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;
12. **`Button link`** - setting allows you to set a link for the button;
13. **`Button style`** - setting allows you to set the style of the button.

## **Additional information**

A section can have a maximum of 7 blocks.