Styles and layout

The Settings tab in the side panel is your starting point for any design, allowing you to set global values that both rows and content elements will inherit. Most settings can be overridden for specific rows, columns or content elements. Usually, it is advisable to sparingly use the override feature to bring cohesion to your design.

Among the most important settings are:

A page's layout is defined by rows, each of which can have multiple columns. You can define a grid with rows and columns in which you can arrange your content elements. Set styles for individual rows and columns if you want to override the global style.

Rows automatically adjust to the screen size of the device on which they are displayed. There are various settings for rows, which allow you to apply settings to multiple content elements at once.

Here are the most important properties of rows:

Prerequisites: You have selected a row in the design area.

Context: Columns cannot be selected directly in the design area, you have to select their containing row first.

Prerequisites: You have selected a row in the design area.

Context: Cards style makes columns within one row apper as separate areas with even spacing and design, similar to playing cards placed next to each other.

Prerequisites: You have selected a row with columns in the design area. The columns should contain content elements, otherwise you may not see the effects of cards style clearly.

The width of columns is defined as number of minimum width columns, not pixels. You can define up to 12 columns and set any width for each column. The combined width of all columns must always be 12 times the minimum width.

When a new column is added, the nearest column to the left shrinks to accommodate it. If the left-most column is already at its minimum width, the next available column will resize. The width of a deleted column gets distributed to the nearest columns.

Columns cannot be reordered. The Add new button disappears when the maximum number of columns is reached. The Delete button is not visible if only one column is present.

Rows, Columns and content elements inherit the global style or the style of their superordinate object. This inherited style can be overridden by defining an object style.

Prerequisites: You see a design in the editor.

Padding is the inner distance between an object’s borders and its content. It is essential for refining the aesthetics and readability of your design.

For content elements, padding is defined in the side panel section Element Options. By default, you can set the padding around an element for all sides simultaneously. For a more nuanced approach, toggle on More options to apply padding to each side individually.

Rows do not have a padding setting but columns do. If a row has only one column, you can adjust this column’s padding to set the padding for the entire row.

Some content elements have unique padding options:

Borders form a visible frame around a row's content area or around individual columns. Their most important settings are thickness, color and pattern (solid, dotted or dashed). You can apply borders to all sides or specify different borders for each side.

Context: When your row comprises multiple columns, you'll need to set borders for each one individually. Prerequisites: You have selected a row and optionally one of its columns.

Context: You can set rounded corners for an image. This setting is non-destructive and can be changed and undone at any time. Prerequisites: You have selected an image element.

When you select an element that can contain text, the side panel shows text style options. Use these to set a text style for the text in the content element.

In addition to the options in the side panel, a pop-up menu for text styles appears when a suitable content element is selected. Use this pop-up menu to:

Adjusting letter spacing and paragraph spacing can enhance the readability of your content. These settings are available in the side panel for text-based content elements.

Letter spacing applies to all text-based content elements, including paragraph, list, button, title, icon, and menu. Paragraph spacing applies only to the paragraph content element.

Letter spacing has a default value of 0px. Use the - and + buttons in the sidebar to adjust. You can also type in a positive value manually. For negative values, use the – button. The range is -99 to +99 pixels. Rendering may differ across devices and browsers.

Paragraph spacing has a default value of 16px, rendering paragraphs as double-spaced. To adjust, use the - and + buttons or manually enter a positive number or zero. The range is 0 to 99 pixels, and again, rendering may vary.

While it's advised to use these features sparingly, here are some scenarios where they could be beneficial:

For landing pages, you can create internal links, enabling smooth navigation to specific elements.

To use internal links, enable the Element Identifier option located at the bottom of the side panel for each content element that you want to use as a link target. The element identifier is an string that the editor generates when you toggle the feature on. For instance, a generated identifier may look like:

While the automatically generated identifier is functional, it may not be easy to remember or identify. You have the option to rename it to something more user-friendly, especially useful when dealing with multiple internal links.

Once you have your element identifiers set up, you can proceed to create internal links. When you create a link and choose the internal link type, the standard URL field will change into a drop-down menu. This menu will list all the enabled element identifiers in your design. Simply select the identifier you want to link to.

Some devices and email applications are not compatible with HTML layouts. For these, a pure text version is automatically generated. This text version is sent alongside with the HTML version in a multi-part email. The HTML version is shown to most recipients. If the recipient's email software cannot display HTML, the text version is displayed.

Prerequisites: You see a design in the editor.