Simple content
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.
- Select the content element.
- In the side panel, click on Write with AI. → The AI writing assistant overlay appears.
- In the bottom text field, enter a prompt describing your subject.
- Click Generate. → A text on your subject is generated.
- 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.
- 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.
- Add an image content element to the design (see Design editor basics: Adding an object).
- 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).
- Add an image content element to the design (see Design editor basics: Adding an object).
- In the empty image element, click Browse. → The file manager opens.
- Find the file you want to use.
- 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.
- In the top right area of the file manager, click on (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.
- Add an image content element to the design (see Design editor basics: Adding an object).
- Select the image element.
- In the side panel, in the section Content Properties, find the field URL.
- In the field URL, enter the image’s URL.
- 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.
- Select the image element.
- 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:
.
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).
- Add an icon content element to the design (see Design editor basics: Adding an object).
- Select the empty icon element.
- In the side panel, click + Add New Icon. → A new icon section appears in the side panel.
- In the icon section, click Change Image. → The file manager opens.
- Find the image you want to use and click Insert. → The icon is added to your design.
- 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.
- Select the icon element.
- In the side panel, in the icon’s section, activate the toggle More options.
- In the field Icon text, enter a text. → The field Text position is displayed.
- 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
(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.
- In the side panel, open the tab Settings.
- In the section Metadata, click + Add favicon or Change favicon. → The file manager displays.
- Select the image you want to use. You can also upload a new image.
- 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.
- In the side panel, open the tab Settings.
- 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.