---
title: Image with text
description: "#### The appearance of the Image with text ![](https://shopibuffet.com/wp-content/uploads/2025/02/Screenshot_2.png) #### Step 1: Image Settings | ****Settings**** | ****Description**** | | --- | --- | | **Image** | Upload via image picker | | **Height** | adapt (default), small, medium, large…"
url: "https://shopibuffet.com/doc/image-with-text/"
updated: "2025-02-24"
category: Sections
---

# Image with text

#### The appearance of the Image with text

![](https://shopibuffet.com/wp-content/uploads/2025/02/Screenshot_2.png)

#### Step 1: Image Settings

| ****Settings**** | ****Description**** |
| --- | --- |
| **Image** | Upload via image picker |
| **Height** | adapt (default), small, medium, large |
| **Desktop Image Width** | compact, balanced (default), expanded, full width |

#### Step 2: Layout Settings

| ****Settings**** | ****Description**** |
| --- | --- |
| **Layout** | image_first (default), text_first |
| **Enable Rounded Corners** | true/false (default: true) |
| **Full Width** | true/false (default: false) |

#### Step 3: Content Positioning

| ****Settings**** | ****Description**** |
| --- | --- |
| **Desktop Content Position** | top (default), middle, bottom |
| **Desktop Content Alignment** | left (default), center, right |
| **Mobile Content Alignment** | left (default), center, right |

#### Step 4: Style Settings

| ****Settings**** | ****Description**** |
| --- | --- |
| **Color Scheme** | background-1 (default) + other theme color options |

#### Heading Block

| **Settings** | ****Description**** |
| --- | --- |
| **Heading** | Input heading text here. |
| **Heading size** | Select heading size here. |

#### Caption Block

| **Settings** | **Description** |
| --- | --- |
| **Caption Text** | Input Caption text here. |
| **Caption Text style** | Select Caption size here. |

#### Text Block

| **Settings** | **Description** |
| --- | --- |
| **Text Content** | Input text content here. |

#### Button block

| **Settings** | **Description** |
| --- | --- |
| **Button label** | Input button label here. |
| **Button link** | Input button URL here. |
| **Button size** | Select button size here: – Small – Medium – Large |
| **Use a secondary button style** | Select button style here |

#### Section padding settings

| **Settings** | **Description** |
| --- | --- |
| **Desktop**: Padding top | The section’s **top inner space** height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the desktop.** |
| **Desktop**: Padding bottom | The section’s **bottom** **inner space** height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the desktop.** |
| **Mobile:** Padding top | The section’s **top inner space** height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the mobile.** |
| **Mobile:** Padding bottom | The section’s **bottom** **inner space** height is determined. From 0 to 150 px, will be incremented by 5px. **It will affect the desktop.** |