---
title: "Images with text block"
slug: "image-with-text-block"
description: "Add text and an image to the home page using the Image and text block. This is similar to the Text block but also includes an image.  For example, you want to showcase a feature and its description"
tags: ["Body blocks", "Customization", "Image with text block"]
updated: 2026-07-20T09:19:46Z
published: 2026-07-20T09:19:46Z
canonical: "docs.document360.com/image-with-text-block"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Images with text block

The Image with text block lets you place an image alongside a heading and paragraph on your knowledge base home page. Where the [Rich text block](https://docs.document360.com/docs/en/text-block) is purely text-based, this block brings in a visual dimension, pairing an image with structured text so readers get context and imagery together in a single layout. This makes it well suited for content where a screenshot, illustration, or thumbnail adds meaning that text alone cannot convey.

![Knowledge base site showing an Image with text block with an image, heading, and paragraph displayed side by side](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Image%20with%20text%20-%20KB%20site%20preview.png)

---

## When to use the Image with text block

- **Feature highlights** - Showcase a specific product feature with a screenshot or illustration alongside a short description.
- **Release announcements** - Pair a new feature image with a brief paragraph describing what's new and where to find it.
- **Visual introductions** - Use an image to set the tone for a section of your knowledge base, with supporting text to orient readers.
- **Promotional content** - Highlight a guide, video tutorial, or key article with a thumbnail and short call to action.

When the content is text-only, use the [Rich text block](https://docs.document360.com/docs/en/text-block) instead.

---

## Add an Image with text block

1. Navigate to **Settings** () in the left navigation bar of the Knowledge base portal.
2. In the left navigation pane, navigate to **Knowledge base site** > **Site customization**.
3. Click the **Customize site** button.

![Site customization page showing the Customize site button](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Site%20customization%20-%201st%20page.png)

1. From the left dropdown, select **Home** page. The **Body section** displays the list of body blocks.
2. Click **Add section** and select **Image with text**. The block is added to the list.
3. Use the **Reorder** () icon to rearrange the block. The Reorder and **Hide** () icons appear when you hover over any body block.
4. Expand the **Image with text** dropdown to access the **Image**, **Heading**, and **Paragraph** elements.

![Home page builder showing an Image with text block expanded with Image, Heading, and Paragraph elements](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Image%20with%20text%20block.png)

---

## Configure the elements

### Image

1. Click **Image** to open the Image panel.
2. Click **Change** to upload or update the image.
3. In the **Image** tab, enter the image URL or upload one from your Drive.
4. In the **Alignment** section, choose **Left**, **Center**, or **Right** to position the image within the block.

![Image panel showing alignment options and image upload controls](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image%20element.png)

### Heading

1. Click **Heading** to open the Heading panel.
2. Enter the desired text in the **Heading text** field.
3. Use the **Text color** palette to choose a heading color.
4. In the **Alignment** section, choose **Left**, **Center**, or **Right**.
5. Click **Delete** to remove only the Heading element from this block.

![Heading panel showing text input, color palette, and alignment options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/heading%20element.png)

### Paragraph

1. Click **Paragraph** to open the Paragraph panel.
2. Enter your content in the **Paragraph text** field.
3. Format the text using the following options:

| Option | What it does |
| --- | --- |
| **Bold** () | Applies bold formatting |
| **Italic** () | Applies italic formatting |
| **URL/Link** () | Adds a hyperlink |
| **Unordered list** () | Creates a bulleted list |
| **Ordered list** () | Creates a numbered list |

 NOTE

Markdown syntax is supported in the Paragraph text field.

1. Use the **Text color** palette to set the paragraph text color.
2. In the **Alignment** section, choose **Left**, **Center**, or **Right**.
3. Click **Delete** to remove only the Paragraph element from this block.

![Paragraph panel showing text formatting toolbar, color palette, and alignment options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/paragraph%20element.png)

---

## Save and publish

- Use the **Preview** toggle on the right to review your changes.
- Click **Save** to save your changes.
- Click **Publish** to make changes live.

---

## Best practices

- **Keep image and text balanced** - a large image next to a short sentence looks mismatched. Aim for roughly equal visual weight between the image and the text beside it.
- **Use Left alignment for the image** when the reading direction is left-to-right; it's the most natural layout for most readers.
- **Use the heading to anchor the block** - even if the heading is short, it gives readers a quick label for what the image and paragraph are about.
- **Avoid uploading oversized images** - large images slow page load. Resize images before uploading, keeping them web-optimized (typically under 200KB for home page visuals).
- **Use consistent image dimensions** - if you have multiple Image with text blocks on the same page, keep image sizes consistent for a cleaner layout.

---

## FAQ

**How do I delete an Image with text block from the home page?**

Navigate to {{variable.Settings}} () > {{variable.Knowledge base site}} > **Site customization** and click **Customize site**. From the left dropdown, select **Home** page. Click the desired **Image with text** block. Click **Delete** and confirm by clicking **Yes** in the Delete confirmation prompt. Click **Save** and then **Publish** to apply the changes.

## Related

- [Rich text block](/rich-text-block.md)