Styling and formatting in the Interactive editor

This information applies to the drag-and-drop option in the Interactive editor.

Styling sections

Three styling sections are accessible from the sidebar:

• Body — Configure settings that apply to the entire message.
• Blocks — Blocks are single- or multi-column layout sections. Style columns or rows independently and add content elements. You can save blocks for reuse.
• Content — Add columns, buttons, dividers, text, images, etc., individually or to a block.

Drag and drop blocks and content to create a layout, then edit settings to complete styling the message. When editing a block or content element, you can duplicate, delete, or select the close icon () to close the editing options and return to the top-level options for Blocks or Content.

Body styles

Body style settings affect the entire body of the message:

Blocks and content columns

The Blocks section and the Columns option in Content are the same thing: layout sections that organize your message into rows and columns. When you select a cell, you can style the entire row or individual columns. Most style options are the same for both.

Add a single column or row of columns, then style each column and the row. To resize column widths, select and drag the dividers, and the width percentages display in the sidebar.

See also Saving blocks in the Interactive editor.

Row properties

Set properties for an entire row:

Column properties

Set properties for an individual cell in a row:

Select the add icon ( ) to add another column to a row or the delete icon () to remove.

Content elements

Content elements consume the width of the column you place them in. Elements not contained in a block are rendered full-width. Drag a content element into your message, and then select the element to see its styling options.

The following content elements are available:

^{1. You can insert SnippetsA reusable piece of content that you can define in Airship for later use in your messages and templates. Snippets support text or HTML content and can be used for commonly used elements such as a copyright, header image, or custom CSS. into HTML, Heading, and Text content, but they will not render in the preview.}

These are the default values for Preference Center fields:

Select Desktop or Mobile to access their different settings and options. Your message preview updates dynamically when you switch selections.

Responsive design

When configuring a content element, the following Responsive Design options are available:

Accessibility audit

The Audit section shows a count of accessibility issues in the current design:

• Missing alternate text for images
• Missing links in buttons and menus
• Missing image URLs

Select an issue type to go directly to where you can fix it. The audit is a warning only and does not prevent saving the design or sending the message.

Thumbnail image for Message Center

Message Center supports a message preview, which is how the message appears as listed in the inbox.

To add the image:

1. Select Settings in the left sidebar.

2. Enter the HTTPS URL of an image. See Media guidelines.

   If your Airship plan includes CDN support, you can also upload media or select from previously uploaded media. See Insert media in message content in Media library.

Preheader text for email

For email, the first line of text in the HTML body automatically appears as the Preheader TextA short line of text that displays after or below an email subject line in an inbox. You can also have the text appear in the message body. Preheader text is an easy way to expand on your subject line and improve email open rates. Not all email clients support preheader text. in the inbox. You can override this behavior by defining your own:

1. Select the Body in the sidebar.
2. Under Email Settings, enter a value for Preheader Text.