Styles and layout

  • Updated

Global style

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:

  • Content Area Width: This specifies the maximum width for the content area when viewed on large devices. On smaller screens, this setting is ignored.
  • Content Area Alignment: This sets the alignment of the entire content area. It can be placed in the center or on the left side of your design.
  • Background Color: Defines the default background color.
  • Content Area Background Color: This sets the background color specifically for the content area.
  • Default Font: Font family that will apply to all content elements.
  • Link Color: Default color for hyperlinks.

Layout with Rows and Columns

About rows and columns

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.

Row Properties

Here are the most important properties of rows:

  • Row Background Color: Set the background color for the entire row.
  • Content Area Background Color: Specify the background color for just the content area within the row.
  • Content Area Border: Set a border around the content area with customizable color, width, and style.

Defining columns

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

  1. In the side panel, find the section Columns Structure.
  2. Click Add new… to add as many columns as you want.
  3. If you added too many columns, click Delete to delete the active column.
  4. To adjust the widths of columns, click and drag sidepanel_draghandle_vertical.png (drag handle) between two columns.

Selecting a column

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.

  1. In the side panel, find the section Columns Structure.
  2. If there are multiple columns, click on a column.
    → The column is highlighted and its properties are displayed in the side panel.

Column behavior and limitations

The width of columns is defined as number of minimum width columns, not pixels. 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.

The maximum number of columns of an email message draft is 6 and the minimum column width is 2. For a landing page, the maximum number of columns is 12 and the minimum column width is 1.

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.

Object style

About object styles

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.

Configuring an object’s style

Prerequisites: You see a design in the editor.

  1. Select an object.
    → The object’s properties are displayed in the side panel.
  2. Adjust the properties as desired.

Padding

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:

  • Buttons: Padding is useful for customizing button dimensions or text positioning.
  • Icons: Offers padding options only for the icon images within the element. Icons can combine both text and images in a single element.
  • Menus: Provides additional padding option for padding between the menu items.

Borders

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.

Defining borders

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.

  1. In the side panel, set a border pattern, a width and a color.
  2. Optional: Use the More options toggle to specify borders for each side individually.

Text style and links

Element style and character style

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:

  • style selected parts of a text,
  • add special characters,
  • add links.

Letter and paragraph spacing

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:

  • Making all-caps text more readable.
  • Emulating the text style of a logo or hero image in your content.
  • Tailoring text for optimal display on various screen sizes.

Internal links for page navigation

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:

module_626b3859-43d7-4b30-861c-d5f506c92882

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.