Message Editor includes a WYSIWYG zone that you can use to add a text block to any section of your message. When you use the WYSIWYG zone, you can create a standalone text block or use it within a Column Layout for extra control of borders, padding, and background colors.

ACCESSIBILITY: Any time you're designing webpage or email-based content, it's important to keep current accessibility principles in mind. Because this article touches on content design, we recommend referring to Best Practices - Accessibility and its associated resources.

Simply drag the WYSIWYG zone from the Zones menu into the content-creation area (the "canvas"), as shown.

TIP: Use the different color options in the Section Background Color dropdown to distinguish different content in your message (e.g., a dark shade for information; a medium shade for entertainment; a light shade for association events and happenings).

Watch the video

Watch a short video that highlights the redesigned Zones iconography and the new, pre-configured Layouts options.

Editor toolbar options

Use the WYSIWYG Editor toolbar to format your text in a variety of ways, insert images, tables, attachments, and more. The toolbar options are described below (discussed from left to right).

Button	Description
Cut	Cut (i.e., copy to clipboard and delete) any text you've entered.
Copy	Copy content to your clipboard so that it can be pasted elsewhere.
Paste	Paste any text that is stored in your clipboard.
Paste as Plain Text	Paste any text that is stored in your clipboard but don't include any applied formatting or styling. This is often useful when pasting content from another source.
Paste from Word	When pasting text from Microsoft Word, use this option to retain as much formatting (bold, italic, bullets, indents, etc.) as possible. Note that some styles (such as headings) may not display exactly as they did in the Word document due to translation limitations (i.e., some Word formats cannot be transferred). Most text will retain the Word formatting which have been converted using proper HTML coding. NOTE: It's not possible to strip out all MS Word coding when using this feature, and some Word tags may cause deliverability issues. We suggest pasting your copy as plain text and formatting it using the WYSIWYG editor.
Undo	Undo text edits performed during the current editing session.
Redo	Redo any actions that you'd undone by clicking the Undo button during the current editing session.
Anchor	Add an anchor to your text block so you can link to that specific text block from other places in your message. This is perfect for when you add a Table of Contents to your message that links to sections in the message body. NOTE: Anchor links do not work in all versions of all email clients.
Remove Link	Use this to removes links in your text. Simply highlight the text that includes the hyperlink and click this to remove it.
Insert Link	Click this button to add a text-based or button hyperlink to your message. The Edit Link dialog simplifies link creation with all the fields necessary to create and customize in-message links. Refer to Working with URL links, below, for a sample URL-link set up. NOTE: Learn how to use Link Labels with this option. Link Type - Choose the type of link you need, including URL, Email, or Anchor. URL - Enter the URL (can be internal or external), email address, or Anchor name you want to link to (Anchors must already be created to be selectable). Target - Controls whether the link opens in a new browser window or the same window as the email. Style - Use these options to control whether the link appears as a button or traditional hyperlink. If traditional, you can also check the Underline box to give it an underline for easier link identification. Google Analytics - If you have Google Analytics enabled for your account, you can select and name the additional tracking code items you would like to include in the link. You can choose a preselected profile, or pick and choose which tags to add to your link, including: Source, Medium, Keyword, Content, and/or Campaign. Adding your identifying text to any of these fields will automatically generate the correct Google Analytics code for optimal Google tracking. TIP: If you're using Google Goals, you don't have to fill out these fields because your account is configured to automatically append your links.
Numbered List	Transforms highlighted text into a numbered list.
Bulleted List	Transforms highlighted text into a bulleted list.
Horizontal Line	Adds a horizontal line where your cursor is positioned. Adding lines at the top and bottom of text is a great way to visually chunk blocks of text. This adds an <hr> tag to the source HTML code, which is a standard horizontal line tag that will render as a black line that is approximately 2 pixels in most browsers.
Special Character	Select from hundreds of additional text characters. HTML codes for selected characters are added to the source code to ensure that the characters render correctly in browsers.
Table	Insert a customizable table where your cursor is positioned. Tables are a great way to make information more "consumable" by being in rows and columns.
Insert Image	Add, edit, and format an image directly in your text block. This is a good option if you want to wrap text around an image. NOTE: Use the Image zone if you want to create a self-contained image zone in your message.
Insert Personalized Field	Add a standard or custom mail-merge field that will automatically be personalized when the email is sent. For example, if you add the First Name standard field, it'll automatically transform into each recipient's first name, pulled from their profile.
Insert Document Link	Add links to documents in your message. Upon clicking, a dialog displays where you can select from any documents you've uploaded to your account, as well as upload documents on-the-fly to use.
Insert Share Link (SWYN)	Click this to add buttons to various social-media sites allowing recipients to share your content on their social-media networks.
Edit Source HTML	Click this to view your content as HTML. This enables easier HTML editing and pasting of HTML into your messages.
Spell Check	Click this to enable spell check. Misspelled words are highlighted red, making them easier to detect as you write your messages.
Font Name	Use to change the default font family of your message moving forward or to target-change specific text by highlighting it first.
Font Size	Use to change the default font size of your text moving forward or to target-change specific text by highlighting it first (up to 72pt).
Align Left/Center/Right	Left, center, or right align the paragraph that the cursor is in.
Justify	Justifies the paragraph that the cursor is in. This overrides the "align" options.
Bold	Click to apply bold to the selected text. This adds the <strong> and </strong> tags in the HTML code.
Italic	Click to apply italic to the selected text. This adds the <em> and </em> tags in the HTML code.
Underline	Click to apply underline to the selected text. This adds the <u> and </u> tags in the HTML code.
Subscript	Adds <sub> </sub> around the selected text so that it will appear smaller and down to the right of the text immediately preceding it.
Superscript	Adds <sup> </sup> around the selected text selected so that it will appear smaller and up to the right of the text immediately preceding it.
Font Color	Customize the color of the selected text. You can choose from the default colors or click More Colors for more color options and to specify a hex code. NOTE: When entering a hex number, include the # followed by the 6 digits.
Background Color	Customize the background color of the selected text block. You can choose from the default colors or click More Colors for more color options and to specify a hex code. NOTE: When entering a hex number, include the # followed by the 6 digits.
Decrease/Increase Indent	Click to increase or decrease the indent (from the left margin) of the paragraph that the cursor is in.

Working with URL links

You can enhance your messages by adding links to this zone when it's included in a message.

NOTE: The URL link is probably the most often used, so this section focuses on it. However, the options that are described in this section function identically when they are available for the other link options (Email, Anchor Tag, Landing Page, Event, and Survey).

Theme colors

When you add a Text or Button link, you can customize it by applying a color from your account's theme.

On the left side of the image below, the HH theme has been selected. Its palette of colors now populate the various "color" dropdowns (for text and button links) on the Edit Link dialog.
The buttons on the right of the image demonstrate how one of the theme's color options displays when applied to link buttons (and as compared to the out-of-the-box grayscale options).

TIP: Be mindful of "accessibility" and "readability." Consider limiting your colors to those that display clearly on various devices.

Using a Text link

Note that the Text link can be used in either of two ways:

Inline paragraph text, as in:

You can enhance your messages by adding links to this zone when it's included in a message.

A word or words that are exclusively inserted for the link, as in:

Learn how to add zones

Create a URL link

This section describes how to add and configure a URL link, as text and as a button.

Decide where in your WYSIWYG zone you want a link or select a chunk of text (for a Text link).
On the WYSIWYG Editor toolbar, click the Insert Link icon.

In the upper part of the Edit Link dialog:

Choose URL from the Link Type dropdown.
Specify the target web address in the URL field.

NOTE: The full address (e.g., https://www.) is not required but will display in the link if the Link Text field is left blank.

You can specify a label for the link in the Link Text field.

NOTE: If a label is not specified, the web address displays as the link text; this is not recommended for button-style links.

You can click Select Link Label if you want to use a Link Label for the link.
You can check the box to have the link open the target address in a new tab. (Recommended)

NOTE: Although we recommend checking this option, most web-based email clients are configured to automatically open clicked links in a new tab, rather than navigate the user out of the email interface.

You can click Google Analytics to expand the section and configure the fields if you're using that feature.

Scroll down and complete the Style section.

The Style section is where you choose whether your link is text-based or a button. You can then customize it for your account and your message. We'll look at a Text link first:

Text links

In the Text Color dropdown, leave the default (the standard blue-underlined link text) or select one of your theme colors. (In the image above, Primary Brand is selected; note that the color code in the Advanced CSS field automatically updates to reflect that choice.)
Check the box if you want to underline the link text.
Click OK to apply your selections.
Click the Menu tab of the Navigation bar and then click Preview to review how the link displays in your message.

Button links

If you prefer a button-style link, select Button and then customize the button's properties.

TIP: As you create and/or edit a link button, check how it displays in the Button Preview field below the configuration options. The button's label is inherited from the Link Text field.

IMPORTANT: Buttons might render differently in various email clients than they do on the design canvas. For example, rounded corners (the CSS property, border-radius) are not supported in some Microsoft Outlook apps. To preview how your buttons will display in various email clients, send a deliverability test.

Choose a style of button for the link (solid or transparent).
Set the alignment for your button (left, center, or right)
For solid buttons, use the Text Color and Background Color dropdowns set these colors independently; for transparent buttons, use the Text & Border Color dropdown to set the color for both. Note that the available colors come from your Theme. If you want to use a color that's not listed, you have to add it to your Theme.
Review the button's appearance in the Button Preview field.
Click OK to save and return to the editor.
Click the Menu tab of the Navigation bar and then click Preview to review how the button displays in your message.

NOTES: You may have noticed there's no option to control a button's width. These buttons are responsive and will automatically be sized appropriately.

If you want multiple buttons in a row, use a column zone or a table.

Notes

After you've created a link, you can:

Double-click the link to recall the Edit Link dialog to make changes.
Use the toolbar options to format the link and/or its text. For example, you can:
- center a button to make it stand out,
- apply bold to a button label to make it easier to read, or
- change the color to something other than the default or theme color.
Click the link to select it and then click the Unlink icon in the toolbar to easily unlink any text or button link.

To learn about the features and functions that you can use while working in Message Editor, see Message Editor Overview.
Message Editor Zones and Layouts offers a high-level look at the various "purpose-built" Zones and links to the dedicated articles that provide instructions for configuring and customizing the Zones.
To learn about Message Editor Layouts, which have pre-configured designs for quicker message- and template-building, see Message Editor Layouts.

Message Editor Zone - WYSIWYG