---
title: Simple content
slug: campaign/docs/simple-content
docTags: 
createdAt: 2026-07-20T15:45:14.495Z
---

## Text-based elements

### Heading

The *heading* content element lets you insert HTML header tags, creating a structured hierarchy within your design. Titles play a significant role in SEO for landing pages, as search engines prioritize header content when scanning for keywords and generating search results. Titles also enable screen readers to navigate and interpret your content correctly.

### Paragraphs and Lists

The *paragraph* content element is optimized for long-form text, offering fine control over paragraph styles and spacing. The *list* content element serves to create ordered or unordered lists, complete with customizable styles and spacing options.

Some settings in the side panel are exclusively available for lists:

- List Type: ordered (numbered) or unordered (bulleted).
- List Style: Customize the style of bullets or numbers.
- Start List From: This option becomes available when you select an ordered list, allowing you to specify the starting number.
- Item Spacing and Indent: Fine-tune the spacing and indentation between list items.

### Using the AI writing assistant

**Context:** The AI writing assistant can create or refine your copy. It is available for the content elements *heading*, *paragraph*, *list* and *button.*

**Prerequisites:** You see a design in the Design Editor. Your design contains a content element of the type *heading*, *paragraph*, *list* or *button*.

1. Select the content element.
2. In the side panel, click on *Write with AI*.
   → The AI writing assistant overlay appears.
3. In the bottom text field, enter a prompt describing your subject.
4. Click *Generate*.
   → A text on your subject is generated.
5. Optional: Enter another prompt for adjusting the text. You can also select typical prompts from a menu as soon as you place the cursor in the text field.
6. When you are happy with the text, click *Apply*.
   → The generated text is added to your design.

## Images

### Adding a local image

**Prerequisites:** You see the design editor. The image you want to use is on your local system.

1. Add an *image* content element to the design (see [Design editor basics](docId:3vJ7k3AuL3jpWqnm09bGQ): *Adding an object*).
2. Drag and drop an image from your local system to the empty image element.
   → The image is added to your design.

### Adding an image from the file manager

**Prerequisites:** You see the design editor. The image you want to use is in the file manager (see [Content management](docId\:ca5Zp0abCSk8wiF5pcNVR)).

1. Add an *image* content element to the design (see [Design editor basics](docId:3vJ7k3AuL3jpWqnm09bGQ): *Adding an object*).
2. In the empty image element, click *Browse*.
   → The file manager opens.
3. Find the file you want to use.
4. Near the file preview, click on *Insert*.
   → The image is added to your design.

### Closing the file manager

**Context:** If you open the file manager and then decide not to add an image from there, you have to close the file manager manually.
**Prerequisites:** You see the file manager.

1. In the top right area of the file manager, click on ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/3gzjStTojI3KwBN4b9buK-20260720-145240.png) (close). → The design editor is displayed.

### Adding an externally hosted image

**Prerequisites:** You see a design in the editor. The image you want to use is available online via a permanent URL.

1. Add an image content element to the design (see [Design editor basics](docId:3vJ7k3AuL3jpWqnm09bGQ): *Adding an object*).
2. Select the image element.
3. In the side panel, in the section *Content Properties*, find the field *URL*.
4. In the field *URL*, enter the image’s URL.
5. Press the *Enter* key or click into another field.
   → The image is added to your design.

### Opening the image editor

**Context:** You can edit images with a built-in tool.
**Prerequisites:** You see a design with an image in the editor.

1. Select the image element.
2. In the side panel, in the section *Content Properties*, click on *Apply effects*.
   → The image is opened in the image editor.

### Image settings

When an image is selected, the side panel provides several image-specific settings:

- Auto-width: This is activated if your image size is larger than the content element. You can toggle it off if you wish to manually resize the image.
- Align: You can modify the image's horizontal positioning.
- Alt Text: You can enter an alternative text which appears when the image is not displayed.

## Icons

### Overview

Icons serve as small, expressive elements that can accentuate your content. The *icon* content element also simplifies using text and images together: You can add text to an icon on any of its four sides (top, bottom, right or left). One use case of icons is to replace traditional bullet points for a more visually compelling list.

Icons are defined using the file manager. Upload suitable small images to the file manager to use them as icons. If you haven’t uploaded any icon images yet, you can still experiment with icons using the default icon image:

![designarea\_icon\_default.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/NczhGVR_I5J2kIL4MJ-rt-20260720-145240.png)

.

### Adding an icon

**Prerequisites:** You see a design in the editor. The image you want to use as an icon is in the file manager (see *content management*).

1. Add an icon content element to the design (see [Design editor basics](docId:3vJ7k3AuL3jpWqnm09bGQ): *Adding an object*).
2. Select the empty icon element.
3. In the side panel, click *+ Add New Icon*.
   → A new icon section appears in the side panel.
4. In the icon section, click *Change Image*.
   → The file manager opens.
5. Find the image you want to use and click *Insert*.
   → The icon is added to your design.
6. Optional: To add more icons to the same icon element, repeat steps 3-5.

### Adding text to an icon

**Prerequisites:** You have added an icon to a design.

1. Select the icon element.
2. In the side panel, in the icon’s section, activate the toggle *More options*.
3. In the field *Icon text*, enter a text.
   → The field *Text position* is displayed.
4. In the field *Text position*, select where the text is displayed relative to the icon.

### More icon Settings

Some icon-specific settings are available in the side panel when an icon element is selected. To see all of them, you need to activate the toggle *More options* for the respective icon.

If you've included multiple icons within the same icon element, you can rearrange them in the side panel. In an icon’s section, click

![sidepanel\_draghandle.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/cjUp5rLwTdTn9yRR2TRd3-20260720-145240.png)

(drag handle) and drag the icon to another position.

The fields *Icon size* and *Icon spacing* allow you to resize the icons and set the space between them. All icons within one icon element have the same size.

## Favicon

### Overview

A favicon is a small image associated with a website that appears in the browser tab title. It helps users recognize your landing pages and online versions of email messages. Images used as a favicon should contain simple, clear visuals that are easily recognizable at a small size.

### Adding a Favicon

**Prerequisites:** You see a message draft or a landing page in the Design Editor.

1. In the side panel, open the tab *Settings*.
2. In the section *Metadata*, click *+ Add favicon* or *Change favicon*.
   → The file manager displays.
3. Select the image you want to use. You can also upload a new image.
4. In the image tile or row, click *Insert*.
   → The favicon is added to your design.

### Removing a Favicon

**Prerequisites:** You see a message draft or a landing page in the Design Editor. The design contains a favicon.

1. In the side panel, open the tab *Settings*.
2. In the section *Metadata*, in the *favicon* tile, click *Delete*.
   → The favicon is removed from the design.

## Layout elements

### Overview

*Dividers* and *spacers* are content elements that serve to visually structure a design. Both create breaks between other elements. However, their appearance differs and so does the control you have over them in the side panel.

### Dividers

The *divider* content element inserts a line into your design, segmenting different parts visually. Following settings are available in the side panel:

- Transparent: If you prefer no visible line, simply toggle on the *Transparent* option.
- Line: Customize the line's appearance using sidebar settings for line style (solid, dotted, dashed), height, and color.
- Width and Align: You can set the width as a percentage of the container column and align the divider to the left, center, or right.
- Padding: Padding options are available, just like with other content elements. (Maximum padding on any side is 60px.)

### Spacers

Spacers are essentially transparent dividers, creating an empty space rather than a visible line. The only side panel setting for a spacer is *height*, offering control over the amount of blank space in your design.