> For the complete documentation index, see [llms.txt](https://help.branch.io/llms.txt).

# Design Banner Creatives (New)

> Create, edit, and reuse banner creatives in the drag-and-drop editor, customize desktop QR codes, and edit legacy Journeys creatives in the code editor.

> **Note**
>
> Journeys is becoming Banners. Opt-in access starts October 13, 2026. To get access, fill out the [Banners opt-in form](https://forms.gle/8naw5houv8zfi1aNA). Your existing Journeys keep running whether or not you opt in.

A creative is the design a banner shows, including its layout, text, images, and the call to action (CTA) button or QR code that opens your app. You build creatives in the **Creative Manager** and add them to banner campaigns.

Branch has two creative editors, and the type of creative decides which one opens:

- Creatives you build in Banners open in the drag-and-drop editor. There's no option to build a creative in code.
- Legacy creatives, which came from Journeys, open in the code editor.

## Create a creative

You start a creative from a Branch template and then customize it.

1. In Branch, go to **Campaigns > Banners**.
2. Select the **Creative Manager** tab.
3. Select **Design Creative**.
4. Select **Mobile Creative** or **Desktop Creative**. The **Create Banner Creative** builder opens.
5. In **Creative Name**, enter a name.
6. Under **Format**, select a format.
7. Under **Options**, select a template from **Branch Templates**. The template opens in the editor.
8. Design the creative. See [Use the drag-and-drop editor](#use-the-drag-and-drop-editor).
9. Select **Save Draft** to return to the builder.
10. Select **Save Creative**.

Branch saves the creative to the **Creative Manager**, ready to add to a campaign. You can also start a creative from a template in a campaign's **Creative** step. See [Create a Banner Campaign](https://help.branch.io/marketer-hub/create-banner-campaign-new.md).

## Edit a creative

If a campaign uses the creative, Branch warns you that your edits will affect that campaign. To try changes without affecting the campaign, [duplicate the creative](#reuse-a-creative) first. Legacy creatives open in the code editor instead. See [Edit legacy creatives](#edit-legacy-creatives).

1. In the **Creative Manager**, hover over the creative's card.
2. Select **Edit creative**. The **Edit Banner Creative** page opens.
3. Select **Edit Creative** to open the editor.
4. Make your changes.
5. Select **Save Draft** to return to the **Edit Banner Creative** page.
6. Select **Update Creative** to save your changes.

## Use the drag-and-drop editor

You design a creative by dragging blocks onto the canvas and then selecting each element to change its settings in the right panel.

### Add blocks

Drag blocks from the **Blocks** panel onto the canvas. The panel sorts blocks into four groups, and every creative needs blocks from the first two:

| Group | Blocks | Rule |
| --- | --- | --- |
| **Required** | **CTA Button** on mobile, or **QR Code** on desktop | Every creative needs one |
| **Add at least one of these** | **Dismiss Button** and **Dismiss Text** | Every creative needs at least one |
| **Layout** | **Column Container** and **Row Container** | Optional, for arranging other blocks |
| **Basic** | **Image**, **Text**, and **Rating** | Optional |

In **Layers**, you can select, reorder, and show or hide blocks. To start over, select **Clear Banner**.

### Edit an element

Select an element on the canvas to open its settings in the right panel. The settings depend on the element:

- For the **CTA Button**, enter the CTA text in **Text (has app)** and **Text (no app)**. Branch shows the first to visitors it believes have your app and the second to everyone else. Use the **General**, **Flex**, **Dimension**, **Typography**, and **Decorations** groups to style the button.
- For an **Image**, select **Replace image**, or enter an **Image URL**. Add **Alt Text** for screen readers.

### Choose the placement

Placement settings sit at the top of the right panel, and only the Standard and Button formats have them:

| Format | Setting | Choices |
| --- | --- | --- |
| Standard | **Banner Placement** | **Top** or **Bottom** |
| Standard | **Banner Scrolling Behavior** | **Inline** scrolls with the page. **Sticky** stays in place as the visitor scrolls. |
| Button | **Banner Placement** | **Top** or **Bottom** |
| Button | **Offset Y** | The vertical offset, in pixels |

A Partial Page creative gets its placement from the **Top** or **Bottom** template you choose.

### Check your work

Use the toolbar to check the creative before you save:

- **Preview** shows the banner as visitors see it. Select **Exit Preview** to return to editing.
- **Show Outlines** draws an outline around every block. Select **Hide Outlines** to remove them.
- **Show Code** opens a read-only view of the HTML and CSS that the editor generates.
- The undo and redo buttons step back and forward through your changes.

## Customize the desktop QR code

Every desktop creative has a QR code that visitors scan with their phone to open your app.

1. On the canvas, select the QR code.
2. Select **Edit** to open **Customize QR Code**.
3. Under **Select your styles**, choose a pattern, a finder (the corner squares), and a shape.
4. (Optional) Turn on **Add a border**.
5. Under **Select your colors**, choose one of the **Preset colors**, or set **Code Color**, **Finder Color**, and **Background Color**.
6. (Optional) Upload a logo or link to one under **Add a logo**.
7. Select **Save Changes**.

## Edit legacy creatives

Legacy creatives came from Journeys. They have a **Legacy** label in the **Creative Manager** and open in the code editor, where you edit their HTML and CSS. If a campaign uses the creative, your saved edits affect that campaign.

1. In the **Creative Manager**, hover over the legacy creative's card.
2. Select **Edit creative**. The **Edit Banner Creative** page opens.
3. Select **Edit Creative** to open the code editor.
4. Edit the code in the **HTML** and **CSS** panes. The editor formats your code, and the preview updates as you type.
5. (Optional) To preview another screen size, choose **Phone (390 × 844)** or **Tablet (768 × 1024)**.
6. (Optional) In the right panel, change **CTA Text (has app)**, **CTA Text (no app)**, **Banner Placement**, or **Banner Scrolling Behavior**.
7. Select **Save Draft** to return to the **Edit Banner Creative** page.
8. Select **Update Creative** to save your changes.

The code editor won't save while the code has errors. It marks syntax errors and shows "Fix code errors before saving." It also checks the HTML for these required elements and names any that are missing:

| Element | Required markup | Applies to |
| --- | --- | --- |
| Banner wrapper | `id="branch-banner"` | All creatives |
| Content container | `class="branch-banner-content"` | All creatives |
| Close button | `class="branch-banner-close"` or `class="branch-banner-continue"` | All creatives |
| CTA button | `id="branch-mobile-action"` | Mobile creatives |
| QR code image | An `img` element with `class="branch-banner-image-qrcode"`, inside the QR container | Desktop creatives |

> **Note**
>
> If a legacy creative's CSS has `//` comments, the code editor marks them as errors and won't save. CSS accepts only `/* */` comments, so change each one to that format or delete it.

When you duplicate a legacy creative, the copy is also a legacy creative. To design in the drag-and-drop editor instead, [create a new creative](#create-a-creative) from a Branch template.

## Reuse a creative

Duplicate a creative to try a new design without changing the original or the campaign that uses it. Branch doesn't save the copy until you select **Save Creative**.

1. In the **Creative Manager**, hover over the creative's card.
2. Select **Duplicate creative**. The **Create Banner Creative** builder opens, and **Creative Name** reads "Copy of" followed by the original name.
3. (Optional) In **Creative Name**, enter a different name.
4. (Optional) To change the design:
   1. Select **Edit Creative**.
   2. Make your changes.
   3. Select **Save Draft** to return to the builder.
5. Select **Save Creative**.

## Find a creative

The **Creative Manager** keeps all your creatives in one library. These controls help you find one:

- **Search for creatives** finds a creative by name.
- **Filter** narrows the list by **Device Type**, **Creative Type**, or **Created By**.
- **Pick a date** narrows the list by date.

Each card shows the creative's name, creator, creation date, and device type. If a campaign uses the creative, the card also shows that campaign and its status.

Hover over a card to see the **Edit creative**, **Analysis**, **Duplicate creative**, and **Delete creative** actions. **Analysis** opens the creative's results in a new tab. See [Manage and Measure Banners](https://help.branch.io/marketer-hub/manage-and-measure-banners-new.md).

## Delete a creative

Deleting a creative is permanent. If a campaign uses the creative, remove it from that campaign first. Until you do, Branch blocks the deletion and offers a **Go To Campaign** button.

1. In the **Creative Manager**, hover over the creative's card.
2. Select **Delete creative**.
3. Select **Confirm Delete**.