> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/media/image-with-text.md).

# Image with text

The Image with Text section displays an image alongside text content, creating a side-by-side layout that's perfect for showcasing products, telling stories, or highlighting features. You can add various content blocks like headings, text, buttons, and more to create rich, engaging sections. The image and text can be arranged in different ways, with options to control their size, position, and alignment to match your design needs.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FDHjWYwzAv7rMYE8Ixz2H%2FCapture%20d'%C3%A9cran%202026-02-20%20171438.png?alt=media&amp;token=ec0a3a9f-c49c-46c2-bd0a-2c5efefea0a0" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Sections** > **Image with text**.
3. Make your changes, preview live, then click **Save**.
   {% endhint %}

### Settings

#### Media

* **Image**: Upload the image that appears alongside your text content. This image can be positioned on the left or right side of the text.
* **Height**: Choose how tall the image appears. Options include Auto (maintains the original image proportions), Small (S), Medium (M), or Large (L) for fixed heights.
* **Width**: Controls how wide the image appears on desktop screens. Options include Small (S), Medium (M), or Large (L). This affects how much space the image takes up relative to the text content.
* **Image placement**: Choose whether the image appears on the left or right side of the text content. On mobile, the image always appears above the text.
* **Image behavior**: Choose how the image animates or behaves when visitors interact with it. Options include None (no animation), Ambient movement (subtle floating effect), or Zoom in on scroll (image zooms as you scroll past it).

#### Layout

* **Layout**: Choose how the image and content relate to each other. Options include No overlap (image and content are separate) or Overlap (content overlaps the image for a layered effect).
* **Enable sticky image and content on desktop**: When enabled, the image and text content stay visible as visitors scroll, creating a fixed position effect that keeps both elements in view.
* **Position**: When sticky columns are disabled, choose where the text content is positioned vertically relative to the image. Options include Top, Middle, or Bottom. This setting only appears when sticky columns are disabled.
* **Alignment**: Controls how text content is aligned horizontally within its container. Options include Left, Center, or Right.
* **Mobile alignment**: Controls how text content is aligned on mobile devices. Options include Left, Center, or Right.
* **Full width**: When enabled, the image with text section spans the entire width of the browser window instead of being contained within the page margins.
* **Remove space between image and content**: When enabled, removes the gap between the image and text content, creating a seamless connection between the two elements.
* **Enable custom border settings**: When enabled, you can customize the border width and border radius specifically for the image and content in this section, overriding the global theme settings.

#### Custom border settings

These settings only appear when "Enable custom border settings" is enabled.

* **Horizontal space**: Adjusts the space between the image and content horizontally. This setting only appears when custom borders are enabled and gapless grid is disabled.
* **Image border width**: Controls the thickness of the border around the image. Set to 0 to remove borders completely.
* **Image border radius**: Controls how rounded the corners of the image are. Higher values create more rounded corners.
* **Content border width**: Controls the thickness of the border around the text content area. Set to 0 to remove borders completely.
* **Content border radius**: Controls how rounded the corners of the text content area are. Higher values create more rounded corners.

#### Colors

* **Color scheme**: Choose a color scheme for the entire section. This affects the background and text colors.
* **Container color scheme**: Choose a color scheme specifically for the image and text content containers. This can be different from the section's main color scheme.

#### Padding

* **Top**: Adds space above the image with text section to create visual separation from other content.
* **Bottom**: Adds space below the image with text section to create visual separation from other content.

#### Content blocks

The Image with Text section uses content blocks to build your text content. You can add multiple blocks in any order:

* **Heading Text**: Adds a title or heading to your content.
* **Text**: Adds paragraph or body text content.
* **Buttons group**: Adds one or two call-to-action buttons.
* **Button**: Adds a single button.
* **Caption**: Adds a small caption or tagline.
* **Rich text**: Adds formatted text content with titles, paragraphs, or detailed messages.
* **Icon with text**: Adds an icon alongside text content.
* **Running text**: Adds animated scrolling text.
* **Product block**: Displays product information.
* **Countdown**: Adds a countdown timer.
* **Scroll reveal text**: Adds text that reveals as you scroll.

***

### Tips

* Use the "Overlap" layout option to create a modern, layered look where text appears on top of the image. This works best with high-contrast images where text remains readable.
* The sticky columns feature is great for long content, as it keeps both the image and text visible while visitors scroll through the section.
* The image behavior options add subtle interactivity. "Ambient movement" creates a gentle floating effect, while "Zoom in on scroll" adds depth as visitors scroll past.
* Use the custom border settings to create unique card-style designs that match your brand, but remember these override your global theme settings.
* Test your layout on mobile devices, as the image always appears above the text on smaller screens regardless of desktop placement.
* Combine different content blocks to create rich, engaging sections. For example, use a heading, multiple text blocks, and buttons to create a complete call-to-action section.