> ## 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 Image with Text Columns Section

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

The Image with text columns section shows a row of images, each with a short heading and description. Use it to explain your process, list your services, or highlight store benefits such as free shipping and returns.

> **Note:** You can add this section to any template, except the header and footer. When you add it, it comes with 4 columns.
![Image with text columns on desktop, 4 columns per row](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/columns-1_19qlcrl.png)

**What you can do**
- Add the section and your columns
- Choose how many columns show per row
- Turn the columns into a carousel on phones
- Add a button and a badge
- See what customers see
- Change the layout and image settings
- Fix common problems

---

## Add the section and your columns
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Image with text columns**.
3. Under **General**, enter a **Section heading**, and optionally a **Section subheading** and **Section description**.
4. Click an **Image column** block. Select an **Image**, and enter a **Heading** and **Description**.
5. To add a column, click **Add block** > **Image column**.
6. Click **Save**.

> **Tip:** Use images with the same subject size and background. The section crops them all to the same ratio, so a consistent style looks tidier.

## Choose how many columns show per row
1. Click the **Image with text columns** section.
2. Under **Layout**, set **Items per row on desktop** to **3**, **4**, **5**, or **6**.
3. Under **Image item**, choose the **Image ratio**: **Square (1:1)**, **Portrait (2:3)**, or **Landscape (3:2)**.
4. Click **Save**.

If you have more columns than fit in a row, they continue on a new row.

## Turn the columns into a carousel on phones
1. Under **Layout**, turn on **Enable carousel on mobile**.
2. Turn on **Show navigation on mobile** to show the arrows.
3. Click **Save**.

## Add a button and a badge
1. Under **Button**, enter a **Label** and a **Link**. Leave the label empty to hide the button.
2. Under **Prominent badge**, enter the badge **Text**, then choose its **Accent scheme**, **Position**, and **Shape**.
3. Click **Save**.

## What customers see
- **Desktop:** the columns sit side by side, with the number per row you chose. Each column shows its image, heading, and description.
- **Phones:** with **Enable carousel on mobile** on, customers swipe through the columns one at a time, or tap the arrows. With it off, the columns stack one below the other.
![Image with text columns as a carousel on a phone, with the next arrow](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/columns-2_3g7oyw.png)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. Edit schemes in Theme settings > Colors. |
| Section subheading, Section heading, Section description | The text above the columns. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Items per row on desktop | Shows 3, 4, 5, or 6 columns per row on desktop. |
| Content alignment | Aligns the text Left or Center. |
| Enable carousel on mobile | Turns the columns into a swipeable carousel on phones. |
| Show navigation on mobile | Shows the previous and next arrows on the phone carousel. Works only with Enable carousel on mobile. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Image item
| Setting | What it does |
| ---- | ---- |
| Image ratio | Crops all column images to Square (1:1), Portrait (2:3), or Landscape (3:2). |

### Button
| Setting | What it does |
| ---- | ---- |
| Label | The button text. Leave it empty to hide the button. |
| Link | Where the button goes. Appears after you enter a label. |

### Prominent badge
| Setting | What it does |
| ---- | ---- |
| Text | The badge text. Leave it empty to hide the badge. |
| Accent scheme | Colors the badge with the Main or Extra accent from Theme settings > Colors > Accent. Appears after you enter text. |
| Position | Places the badge on the Left or Right. Appears after you enter text. |
| Shape | Star, Diamond, or Asterisk. Appears after you enter text. |

### Image column settings
| Setting | What it does |
| ---- | ---- |
| Image | The column image. |
| Heading | The column title. |
| Description | The column text. |

## Troubleshooting
**I can't find the tablet setting.**
Blum no longer has a separate tablet setting. Set the desktop layout with **Items per row on desktop**, and the phone layout with **Enable carousel on mobile**.

**The arrows don't show on phones.**
**Show navigation on mobile** works only when **Enable carousel on mobile** is on.

**My images are cut off.**
All images are cropped to the **Image ratio**. Choose the ratio closest to your photos, or crop them before you upload.

## Related articles
- [Blum Icon With Text](https://doc.ecomx.co/en/article/blum-icon-with-text-a8a4ez/)
- [Blum Image With Text](https://doc.ecomx.co/en/article/blum-image-with-text-asff90/)
- [Blum Timeline](https://doc.ecomx.co/en/article/blum-timeline-e3guxf/)
- [Blum Collection List](https://doc.ecomx.co/en/article/blum-collection-list-csa3sl/)