Simple content

Text-based elements

Titles

The title 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.

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: 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).

1. Add an image content element to the design (see Design editor basics: 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  (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: 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: .

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: 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 (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.

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.