This article...

Describes the "From HTML" option in Message Designer 2 for creating and editing messages with HTML code.
Details how to access the HTML editor; write or modify code; and use the Preview panel to review the message.
Explains the HTML editor navigation options: numbered rows, overview inset, and cursor locator.
Discusses the HTML editor management tools, such as the hyperlink generator and the search feature.
Highlights additional tips (e.g., on-hover helper text, right-click options).

The From HTML option in Message Designer 2 (MD2) makes it easy for Admins who are experienced with HTML coding to:

create an HTML version of a message using their existing HTML code;
edit an HTML-based message in order to, for example:
- update the content of a message, and
- troubleshoot and fix code that is causing a rendering issue.

This is a great option whenever working directly in the HTML code would simplify editing the message and/or you want more design and customization options.

In addition to this option, check out the Save as HTML feature which you can use to generate an HTML-based copy of an existing Message Designer message.

Access the Messages list

To create an HTML-based message:

Access the Admin interface.
Navigate to Messages > List.

TIPS: On list pages, click a column header to sort on that column; click again to reverse the sort order. Click the columns count below the list to add and remove columns in the current view.

Click the plus sign icon to the right of the page title.
On the create dialog: click the Type dropdown, select From HTML, and click Create.

Message Designer opens on the Code tab > HTML subtab and the HTML editor and preview display. This is where an experienced designer can work directly with the message's unique HTML code.

Code tab notes

The Code tab is usually hidden; it displays only when working with the HTML options: From HTML and Save as HTML.
There's also a TEXT subtab which houses the plain-text editor where you can import the content from your HTML message and then individually manage the text version.
Your new message is automatically prepopulated with a default, required Unsubscribe link that you can customize for your account.
An "unsubscribe link" reminder displays and will persist until you click the TEXT subtab and (in the upper right), click the Import from HTML button. The Text version populates with the content from the HTML version and the reminder no longer displays.
- Whenever you make changes in the HTML editor, click the Import from HTML button to refresh the Text editor to display those changes.

The HTML editor

The HTML editor is where you add and edit the HTML code that makes up the message.

You can customize the code in order to apply more complex HTML coding. The HTML editor accepts and honors all HTML coding, giving you countless customization possibilities.

The HTML editor has two stand-out features:

the HTML editor window, on the left, where you work with the code, and
the Preview panel, on the right, where you review your work.

Preview panel

The panel on the right side of the page offers a preview of the message based on the current HTML code in the editor. This is simply a visual rendering of that code.

The preview does not dynamically update as you work in the editor. You must click the Preview button above the editor to refresh the preview and display your latest changes.

The preview is not dependent on the HTML changes being saved; it displays unsaved changes.

HTML editor

This is where you work with the HTML code. After pasting in the HTML code for your message, use the information in the following sections to:

learn how to navigate around the editor and
use the tools and features of the editor to work more efficiently.

HTML editor navigation options

The HTML editor has a few convenient features that facilitate quicker navigation and simplify locating the cursor. The numbers in the following image coincide with the numbers in the table that follows.

Number	Feature	Description / Use
1	Numbered rows	Simplifies remembering where a piece of code is or where a change was made. The highlighted row (row 62 in the image) indicates the current location of the cursor.
2	Overview inset	Provides a very high-level view of the entire editor window. On hover, it highlights the block of rows that currently display in the editor so you can easily determine where you are in relation to the entire window. Click on this view to quickly navigate up and down in the editor.
3	Scroll bars	These standard vertical and horizontal scroll bars are visible only when the cursor clicks or hovers in the editor.
4	Cursor locator	This small indicator in the vertical scroll bar indicates the current location of the cursor.

HTML editor management tools

There are several very useful tools above the HTML window.

The Preview button is described above in Preview panel.
Tidy - click this button to "clean up" your code's formatting. This option is non-operational while enhancements are being explored.

Hyperlink Tool - click this button to generate the "a href" code for your hyperlinks. Refer to Generate link HTML code, below, for information about this option.

Magnifying glass - click this icon to call the "search" field (or click into the editor and press Ctrl+F). It displays at the top of the editor and has several options, such as "match case," "match whole word," "replace," and "replace all." Click the X to close the search field.

Undo and Redo - click these icons (shown above) to "undo" and "redo" actions.
- Repeated clicks will undo or redo a series of actions.
- A manual or automatic save does not interrupt the remembered series.

Generate hyperlink code

This is a time-saving feature that generates properly formed hyperlink code (based on your inputs) that you can copy and then paste into your message. Rather than having to manually input the hyperlink HTML tags, use the "generator" to quickly and easily build a valid hyperlink.

TIP: You can add as many hyperlinks as you want to your message, but do be mindful of how too many links might affect your deliverability. If you want one link to display in several locations in the message, generate the hyperlink code once, copy it, and then work your way through the editor and paste it into those locations.

In the following example, we'll generate a hyperlink to an external web site by using the Web Page type of hyperlink. Your selection in the hyperlink (type) dropdown determines which fields then display.

To learn about the supported hyperlink types, see Hyperlinks in Messages.

To generate a hyperlink:

Click the Hyperlink Tool button to open the link generator.

Accept the default type of Web Page.
In the url field, specify the web address of the site.
Optionally, specify a name for the link. This does not display in the message; it is used for reporting only.
Accept the default (unchecked box) to track "click" activity for this hyperlink; check the box to disable tracking.
Click Generate Hyperlink Markup.

The code for the hyperlink displays on the right side of the page.

Using the hyperlink code

Review the code to confirm that it is as you expect it to be.

Click the Copy Markup button; the hyperlink code is saved to your clipboard.
In the editor, place your cursor where you want to insert the link and press Ctrl+V (Windows) or Command+V (Mac) to paste the code.
Click Preview to review the message and verify the link.

Tips

You can overwrite the default placeholder text, "Your Text Here," as in the image above, or do that later.
If you want to insert several links in your message and/or insert one link in several places in your message, rather than a lot of back-&-forth from the generator to the editor to the generator, consider this time-saving tip!

1. Open a text editor.
2. Create all your links and copy, paste, and save each link in the text editor.
3. Do one pass through the editor during which you insert all your links by retrieving the relevant code from the text editor and pasting it in the preferred location.

Hidden gems

When you're working in the HTML editor, there are a few "hidden gems" that might help you work more quickly.

On-hover helper text

Some of the tag elements and attributes display helper text when you hover on them. For example:

Hover on align to display information about the values and their affect:

Hover on class to display general information and an active link to Mozilla's MDN Web Docs:

Right-click options

Right-click anywhere in the editor to display a menu of helpful options:

For example, right-click and select Command Palette to display a scrollable, popup list of commands with a search field at the top:

TIP: You can click the Undo icon to back out any actions you take.

The following articles describe other message-creation options.

To learn how to create a message in Message Designer, see Create a Message (MD2).
To learn how to generate an HTML-based copy of an existing Message Designer message, see Save as HTML.
Learn about the benefits of plain-text messages and how to create them in Text Versions of Messages.

Create a "From HTML" Message