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

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

The Image with text section pairs one or two overlapping images with a heading, description, and up to 2 buttons. Use it to tell a brand story, introduce a collection, or explain a product benefit.

> **Note:** You can add this section to any template, except the header and footer.
![Image with text on desktop, with two overlapping images on the left](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/iwt-1_hakhgb.png)

**What you can do**
- Add the section, your images, and text
- Place the image left, right, or above the text
- Add a prominent badge
- See what customers see
- Change the image ratios and text settings
- Fix common problems

---

## Add the section, your images, and text
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Image with text**.
3. Under **Image**, select a **Primary image** and choose its **Image ratio**.
4. Optional: select a **Secondary image** and choose its **Image ratio**. The two images overlap to form a small collage.
5. Under **Text**, enter a **Subheading**, **Heading**, and **Description**.
6. Under **Buttons**, enter a **Primary button label** and **Primary button link**. Add a secondary button the same way, or clear a label to hide that button.
7. Click **Save**.

> **Tip:** Mix ratios for a livelier collage, for example a Landscape primary image with a Portrait secondary image.

## Place the image left, right, or above the text
1. Under **Layout**, set **Image position** to **Left**, **Right**, or **Center**. Center places the images and text in one column.
2. With Left or Right, set **Content alignment** to **Top**, **Middle**, or **Bottom** to line up the text with the images.
3. Click **Save**.

## Add a prominent badge
1. Under **Prominent badge**, enter the badge **Text**. Leave it empty to hide the badge.
2. Choose the **Accent scheme**, **Position**, and **Shape**.
3. Click **Save**.

## What customers see
- **Desktop:** the images sit on the side you chose, with the text beside them. With Center, the text sits above the images.
- **Two images:** the secondary image overlaps the corner of the primary image.
- **Phones:** the text and images stack in one column.
![Image with text on a phone, with the text and images stacked](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/iwt-2_cohm6y.png)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section. Edit schemes in Theme settings > Colors. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Image position | Places the images on the Left or Right of the text, or Center (images and text in one column). |
| Content alignment | Lines up the text at the Top, Middle, or Bottom of the images. Hidden when Image position is Center. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Image
| Setting | What it does |
| ---- | ---- |
| Primary image | The main image. |
| Image ratio (primary) | Shapes the primary image as Square (1:1), Portrait (2:3), or Landscape (3:2). Appears after you select the image. |
| Secondary image | A second image that overlaps the primary image. |
| Image ratio (secondary) | Shapes the secondary image as Square (1:1), Portrait (2:3), or Landscape (3:2). Appears after you select the image. |

### Text
| Setting | What it does |
| ---- | ---- |
| Subheading | Small text above the heading. |
| Heading | The section title. |
| Enable large heading | Shows the heading in the larger headline size. Appears when the heading isn't empty. |
| Description | The section text. |

### Buttons
| Setting | What it does |
| ---- | ---- |
| Primary button label, Secondary button label | The button text. Leave a label empty to hide that button. |
| Primary button link, Secondary button link | Where the button goes. Appears after you enter the button 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. |

## Troubleshooting
**I can't find the Content alignment setting.**
**Content alignment** is hidden when **Image position** is **Center**. Choose **Left** or **Right**.

**I don't see the Image ratio setting.**
Each **Image ratio** appears only after you select its image.

**I only want one image.**
Leave **Secondary image** empty. The primary image then shows on its own.

## Related articles
- [Blum Hero Image With Text](https://doc.ecomx.co/en/article/blum-hero-image-with-text-10ms29c/)
- [Blum Video With Text](https://doc.ecomx.co/en/article/blum-video-with-text-185javp/)
- [Blum Image with Text Columns Section](https://doc.ecomx.co/en/article/blum-image-with-text-columns-section-131afjd/)
- [Blum Image Banner](https://doc.ecomx.co/en/article/blum-image-banner-jzf00j/)