> ## 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).

# Electro How to Use Electro Image With Text Columns Section

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

An Image with text columns section shows a row of columns, each with an image, a heading, and a short description. Use it to present your brand values, store locations, services, or product benefits side by side.

> **Note:** You can add this section to any template, but not to the header or footer.

![Image with text columns with 4 portrait columns on the Electro Skatewear preset](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/itc1_janmwg.png)

**What you can do**
- Add the section and your columns
- Choose the layout and image shape
- Add a button
- See what customers see
- Look up every setting
- 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**. The section comes with 5 columns.
3. Under **General**, enter a **Section subheading** and a **Section heading**, and choose a **Heading size**.
4. Click a **Column** block. Select an **Image**, and enter a **Heading** and a **Description**.
5. To add a column, click **Add block** > **Column**. To change the order, drag the blocks in the sidebar.
6. Click **Save**.

> **Tip:** Use images with a similar subject and lighting in every column, so the row looks consistent.

## Choose the layout and image shape
1. Click the **Image with text columns** section.
2. Under **Image**, choose an **Image ratio**.
3. Under **Layout**, choose the **Items per row on large screen** and a **Content alignment**.
4. If you have more columns than fit in one row, turn on **Enable carousel**. Optional: turn on **Show progress indicator**.
5. Click **Save**.

> **Tip:** Without the carousel, extra columns wrap to a new row. With the carousel, they stay in one row and customers scroll through them.

## Add a button
1. Click the **Image with text columns** section.
2. Under **Button**, enter a **Label** and add a **Link**.
3. Choose a **Button position** and a **Style**.
4. Click **Save**.

| Setting | What it does |
| ---- | ---- |
| Label | The text on the button. Leave it empty to hide the button. |
| Link | The page the button opens. |
| Button position | Shows the button Below content (under the columns) or Next to heading. |
| Style | Sets the button style: Primary, Secondary, or Tertiary. |

## What customers see
- **Large screens:** the section heading, then the columns in a row with the number of items per row you chose. Each column shows its image, heading, and description.
- **Tablets and phones:** the columns show 2 per row on tablets and 1 per row on phones.
- **With the carousel:** customers use the arrow buttons on large screens, or swipe on touch screens, to see more columns. The progress indicator shows how far they've scrolled.
- **Button:** clicking the button opens its link. The columns themselves aren't links.
![Image with text columns on mobile, showing 1 column per row](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/itc2_1wk7du9.png)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the background, text, and button colors. |
| Section subheading | A short tagline above the section heading. |
| Section heading | The heading of the section. |
| Heading size | Sets the section heading size: H2, H3, H4, or H5. |

### Image
| Setting | What it does |
| ---- | ---- |
| Image ratio | Sets the shape of all column images: Square, Portrait (3:4), Landscape (4:3), or Adapt to image. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Items per row on large screen | Shows 3, 4, or 5 columns per row on large screens. |
| Enable carousel | Shows the columns in one scrolling row instead of wrapping them. |
| Show progress indicator | Shows a bar below the carousel that tracks the scroll position. Works only with Enable carousel. |
| Content alignment | Aligns the section heading and column text Left or Center. |

### Button
| Setting | What it does |
| ---- | ---- |
| Label, Link, Button position, Style | See "Add a button" above. |

### Column settings
| Setting | What it does |
| ---- | ---- |
| Image | The column image. |
| Heading | The column heading. |
| Description | A short text below the heading. |

## Troubleshooting
**The progress indicator doesn't show.**
It works only with **Enable carousel** on, and only when there are more columns than fit on screen.

**My images have different heights.**
**Image ratio** is set to **Adapt to image**, so each image keeps its own shape. Choose **Square**, **Portrait (3:4)**, or **Landscape (4:3)** to give all images the same shape.

**The button doesn't show.**
The button is hidden when **Label** is empty. Enter a label under **Button**.

**I want each column to link to a page.**
Columns in this section aren't clickable. To link columns, use **Content collage** or **Icon with text**.

## Related articles
- [Electro Image with text](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-with-text-section-1i58xtt/)
- [Electro Content collage](https://help.ecomx.co/en/article/electro-how-to-edit-electro-content-collage-4yio74/)
- [Electro Icon with text](https://help.ecomx.co/en/article/electro-how-to-edit-electro-icon-with-text-vdplg5/)
- [Electro Theme settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)