---
title: "Build banners in an email"
slug: "new-editor-build-banners-in-an-email"
description: "An ideal banner has an image that evokes emotions in your target audience, along with complementary copy over this particular image."
tags: ["create email banners", "drag and drop banner"]
updated: 2026-01-13T08:36:00Z
published: 2026-01-13T08:36:00Z
canonical: "academy.insiderone.com/new-editor-build-banners-in-an-email"
excludeFromSearch: true
excludeFromExternalSearch: true
---

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

# Build banners in an email

An ideal banner has an image that evokes emotions in your target audience, along with complementary copy over this particular image.

To build a banner in your email:

1. Drag a 1-column structure into your HTML email template.

2. Pull the **Banner** block into this structure. Click on it to open the settings panel.

3. Add your main image from the **Styles** tab.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/Screenshot%202023-07-24%20at%2013.22.33.png)

- Paste a **link** that will take recipients to the place related to the value offer described on the banner.
- Set the banner **size**.
- **Crop Shape,** where you can choose the orientation: **horizontal** or **vertical**.
- Add the **Anchor link**.
- Enter **alt text**. This text will be shown to recipients if images, for some reason cannot be displayed.
- Set **margins**.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/Screenshot%202025-02-21%20at%2017.49.33.png)

Moreover, you can also automatically generate **Alternate Text** using **AI**, improving content perception and accessibility. For this, simply click the **Generate with AI** button.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/Screenshot%202025-02-21%20at%2017.49.55.png)

4. Switch to the **Styles** tab.

- Configure the **Rotation**, the ability to rotate your image clockwise in degrees.
- Set the **Banner Background color**.
- Choose the needed **Filter** to make your banner alluring.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/Screenshot%202023-07-24%20at%2013.25.31.png)

5. If you need to place text over the banner image, click the **T** button on the settings panel above. Once it gets light, you need to left-click this image again.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/Screenshot%202023-07-18%20at%2013.52.20.png)

You’ll see the **Text node** inscription on the banner. Erase this inscription and enter your **text** here.

A menu for text style settings will open on the right: set **font type**, **size**, **color**, and other text **formatting**.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/Screenshot%202023-07-24%20at%2013.26.46.png)

6. Click on the image above your banner block to add the **additional picture** and set up the styles as well. It can be anything you like: **sticker**, **frame**, **logo**, **background** to make your copy more noticeable, etc.

![](https://cdn.document360.io/c6df4583-da94-4cb2-bb8a-be0cbdd11109/Images/Documentation/Screenshot%202023-07-24%20at%2013.28.39.png)

All the layers, aka elements, get together inside the block and make the banner. The banner will be mobile-optimized.