> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Blum Timeline

**Theme:** Blum · **Section type:** All-template section

The **Timeline** section shows key moments of your brand in order, each with a label (such as a year), a heading, an image, a description, and an optional link. Use it to tell your brand story on an About page.

> **Note:** You can add this section to any template, but not to the header or footer. The section comes with 5 **Timeline item** blocks.
![Timeline section on desktop with 4 milestones](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/timeline-1_1e37xaj.png)

**What you can do**
- Add the section and your milestones
- Add a link to a milestone
- Change the layout and colors
- See what customers see
- Look up every setting
- Fix common problems

---

## Add the section and your milestones

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Timeline**.
3. Under **General**, enter a **Section subheading**, a **Section heading**, and a **Section description**. Leave a field empty to hide it.
4. Click a **Timeline item** block.
5. Enter a **Label**, for example a year, then a **Heading** and a **Description**.
6. Optional: select an **Image**.
7. To add more milestones, click **Add block** > **Timeline item**.
8. Click **Save**.

> **Tip:** Keep the items in time order. Drag the blocks in the left sidebar to reorder them.

## Add a link to a milestone

1. Click a **Timeline item** block.
2. Under **Link**, enter a **Label**, for example "Learn more".
3. Add a **Link**.
4. Optional: check **Open link in a new tab**.
5. Click **Save**.

To hide the link, clear the **Label** field.

## Change the layout and colors

1. Click the **Timeline** section.
2. Under **Layout**, select **Items per row on desktop**: 3, 4, 5, or 6.
3. Under **Timeline**, select an **Accent scheme** to color the line and the labels.
4. Select an **Image ratio** for all the images in the section.
5. Under **General**, check or uncheck **Collapse by default on mobile**.
6. Click **Save**.

## What customers see

- **Desktop:** the milestones sit on a horizontal line, in a row. If there are more milestones than **Items per row on desktop**, customers scroll sideways to see the rest.
- **Mobile:** the milestones stack on a vertical line. With **Collapse by default on mobile**, only the label and heading show. Customers tap a heading to open the image, description, and link.
- **Links:** the link shows below the description. With **Open link in a new tab**, it opens in a new browser tab.
![Timeline on a phone with the first item open](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/timeline-2_1x8njb5.png)

## Settings reference

### General

| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. You can edit color schemes in Theme settings > Colors. |
| Section subheading | Small text above the heading. Leave it empty to hide it. |
| Section heading | The main heading. Leave it empty to hide it. |
| Section description | Short text below the heading. Leave it empty to hide it. |
| Collapse by default on mobile | On mobile, shows only the label and heading of each item. Customers tap the heading to open it. Items need a heading for this to work. |

### Timeline

| Setting | What it does |
| ---- | ---- |
| Accent scheme | Colors the line and the labels with the Main or Extra accent colors from Theme settings > Colors. |
| Image ratio | Sets the shape of the images: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image. |

### Layout

| Setting | What it does |
| ---- | ---- |
| Items per row on desktop | Sets how many items show in a row on desktop: 3, 4, 5, or 6. |
| Content alignment | Aligns the section heading and description to the Left or Center. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Timeline item block settings

| Setting | What it does |
| ---- | ---- |
| Label | Short text in a colored tag, for example a year. |
| Heading | The heading of the milestone. |
| Description | Text about the milestone. |
| Image | An image for the milestone. |
| Label (Link) | The text of the link. Leave it empty to hide the link. |
| Link | Where the link goes. Appears when the link has a label. |
| Open link in a new tab | Opens the link in a new browser tab. Appears after you add a link. |

## Troubleshooting

**On mobile, I can't open an item.**
An item can only open and close when it has a **Heading**. Add a heading to the block, or uncheck **Collapse by default on mobile**.

**My link doesn't show.**
The link shows only when the **Label** under **Link** is filled in.

**Some milestones are hidden on desktop.**
If there are more items than **Items per row on desktop**, the extra items are off to the side. Customers scroll sideways to see them, or you can select a higher number.

**The images have different heights.**
Select **Square (1:1)**, **Portrait (2:3)**, or **Landscape (3:2)** under **Image ratio** instead of **Adapt to image**.

## Related articles

- [Blum Image With Text](https://doc.ecomx.co/en/article/blum-image-with-text-asff90/)
- [Blum Testimonial](https://doc.ecomx.co/en/article/blum-testimonial-16y9v6e/)
- [Blum Icon With Text](https://doc.ecomx.co/en/article/blum-icon-with-text-a8a4ez/)
- [Blum Page Template](https://doc.ecomx.co/en/article/blum-page-template-wpdqk1/)