Styling and formatting in the WYSIWYG editor

Learn how to build your message using body settings, blocks, and individual content elements.

Styling sections

The editor has three styling sections, accessible from tabs in the sidebar:

Body — Settings that apply to the entire message.
Blocks — Blocks are single- or multi-column layout sections, and they are synonymous with content columns. You can leave blocks unstyled, style columns or rows independently, and add content elements. You can also 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 click to close the editing options and return to the top-level options for Blocks or Content.

Tip

Use blocks or content columns to lay out your message before you add content. You can add multiple content elements to a single column. For example, you can place text above of an image, and both items will be grouped together in the collapsed mobile view.

Body styles

Body styles affect the entire body of the message.

Background Color — Set the background color for the entire message, both in and outside the content-width. You can override this setting at the row and column levels.
Note
When selecting a transparent background for modal In-App AutomationMessages cached on users’ devices and displayed when users meet certain conditions within your app, such as viewing a particular screen or opening the app a certain number of times., you must also set your project’s default background color to #00000000 for HTML messages. See: In-App Experience Defaults: Setting Transparent Background.
Background Image — Enter the HTTP/HTTPS URL of an image, then set its options.
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.
Content Width — Set the content width of your message. This is generally helpful for email, as it represents your mobile breakpoint as well; when a client width is less than the content width, columns will collapse and cells will stack (unless you set mobile settings denying collapsibility).
Font Family — Set the font for your message. You cannot override this setting at the row or column level.
Links — Configure the appearance of links in the message.

Blocks and content columns

Blocks are identical to the Columns option in Content. They are background elements that help you layout your message before you add content. When you select a cell in a column, you can style the entire row or set styles for individual columns within the row. Most of the style options are the same for both rows and columns.

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

Row properties

Row properties affect the entire row. If you want to set properties for individual columns in a row, go to Column properties.

Background Color — Set the color for the entire row, extending to the entire width of the window, not just the width of the content body.
Content Background Color — Set the background color for content body in the row.
Padding — Set padding — spacing inside the border — for all columns in the row. Use More Options to change padding for individual sides of the row.
Background Image — Set an image as the background of the row. You can overlay the background image with other content elements. Enter the HTTP/HTTPS URL of an image, then set its options. 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.

Column properties

Column properties affect an individual cell in a row. Click to add another column to a row, or to delete.

Background Color — Set the background color for the individual cell.
Padding — Set padding — spacing inside the border — for the cell.
Border — Add and style a border for the cell, helping you provide visual separation between rows and columns where necessary.

Content elements

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

Columns — See Blocks and content columns above.
Divider — Add a dividing line. You can change the line color and style, and set padding around the divider.
Image — Enter the HTTP/HTTPS URL of an image. You can set the image alignment, provide alternate text, set padding, and provide a link if you want the image to be clickable. See also: Actions and 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.
Button — Link to another page, presumably an action (subscribe, unsubscribe, or send the user to a particular product page, etc). You can style button color, border, alignment and padding in the sidebar. Click the button element to see the styling options for the button label text. See also: Actions.
HTML — Add your own custom HTML content element and set padding. 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 content, but they will not render in the editor; you must click Done to see the preview.
Heading — Add text. You can set the type (H1, H2, etc.), font information, color, alignment, line height, and padding in the sidebar. Click the heading element to style the text and add links and emojis. 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 heading content, but they will not render in the editor; you must click Done to see the preview.
Text — Add text. You can set the color, alignment, line height, and padding in the sidebar. Click the text element to style the text and add links, emojis, and tables. 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 text content, but they will not render in the editor; you must click Done to see the preview.
Video (Message Center Only) — Enter a YouTube URL to add video to a message. The video adapts to the width of the column that you place it in.
Note
Video does not play within the WYSIWYG editor. You can play the video in the preview that appears after you click Done and leave the WYSIWYG editor.
Menu — Create a navigation menu. Add menu items and their actions, then style the menu.
Social — Add social media icons. Select icons and configure your social account links. You can set alignment, size, spacing, and padding, and select an icon type to set icon style and color scheme.
Preference Center — You must include at least one Preference Center element when designing an Email Preference CenterA page where users can manage their opt-in statuses for the Subscription Lists in your project. Preference Centers are presented within your app or website or as an Airship-hosted web page. web page.
Select a preference center, then customize loading and saving status text and button labels, and provide an Unsubscribe landing page URL.
- Loading text — Default value: Loading…
- Error loading text — Default value: There was an error loading this preference center. Please try again.
- Submit button text — Default value: Save communication preferences
- Success saving text — Default value: Your preferences have been saved.
- Error saving text — Default value: There was an error saving your preferences. Please try again.
- Unsubscribe button text — Default value: Unsubscribe from all emails
- Unsubscribe landing page URL — Enter a URL.

When configuring a content element, select the Desktop and Mobile tabs for their different settings and options. Your message view in the editor updates dynamically when you switch tabs.

Responsive design

The last section when configuring a content element is Responsive Design, with options:

Hide on Mobile/Desktop — Hides a content element from view. If you create different versions of the same content element for both desktop and mobile, use this option to make sure only the relevant version is viewable in the right context. For mobile, you may want to use this option to hide images and other elements that take up an inordinate amount of the screen in your message.
Do Not Stack on Mobile — Prevents columns in a row from stacking on a mobile device or when the screen width is less than the Content Width (essentially the mobile breakpoint). You can set the Content Width in the Body section of the editor.

Accessibility audit

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

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

Go to the tab to see a count of each issue type. Click the issue type for direct links to where you can fix the issue before completing your design.

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.

Select Settings in the left sidebar.
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

When creating the HTML body for email using the WYSIWYG editor, the first line of text in the message also 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. If you want to add preheader text that appears in the inbox only:

Select the Body section from the sidebar.
Under Email Settings, enter text in the Preheader Text field.