Search
Expand Article

Last Updated: 02/24/2016

Communication: Email Design

First, some notes on pasting content into designs...

When designing an email many organizations compose and format their message in another word processor then copy and paste it (with all of the formatting) into the Communication screen editor. When you do so, it often brings in hidden HTML formatting that will immediately make your text formatting look different. Alternatively, your message will display incorrectly or look different in certain mail clients when it is received. (Ex: your email may look good in the editor, but when it's received in Microsoft Outlook or on your smartphone, the fonts and spacing are all wrong).         

Use the Paste as Text tool to remove hidden HTML formatting. While you may have a little formatting to do, it should automatically inherit the default email styles to ensure that your email will look good on any device on which it's opened.

  1. First select and copy the text from your other source.
  2. In the Rich Content Block controls, click the Paste As Text icon. (A notification box will appear alerting you the paste as text tool is toggled on).
  3. Place your cursor in the editable area and paste your text. 
  4. Use the editing tools to make any necessary formatting changes.

Alternatively, you may also copy/paste your content into Notepad if you're on a PC or TextEdit if you're on a Mac. Doing so will remove any hidden html formatting. Then copy the content out of Notepad/TextEdit and paste it into your email.

Modify design elements on the Create Message tab

When you open the email editor, there are email templates that you can work with. You are provided with a handful of designs to start with. For some of these templates, you have the ability to change the colors or images used.

If you click on the Design Elements button at the bottom left side of the screen, a menu will appear that may allow you to modify certain aspects of the message designs. This is controlled by the HTML code of the design itself. The code can be modified under Manage Designs. If you do not see the Manage Designs button, you have not been granted the rights to modify the message code.

If the message has not been coded to allow you to modify colors or images, when you open that menu, you will see messages that say "There are no customizable colors in this design" and/or "There are no customizable images in this design"

If the designs that are available to you are not satisfactory in their aesthetic or ability to be modified, you may create new ones. If your role grants you the rights to modify the design code, you can click the Manage Designs button to begin working with the design code. If you do not have sufficient rights to Manage Designs, you will either need to enlist the help of an administrator to have your role privileges elevated, or enlist the help of someone with sufficient privileges and skills to modify the design code.

Change Message Content

Some areas of content in the email editor use a simple editor and some use an advanced editor. This distinction is controlled in the design code. 

Main content body sections will often use the advanced editor, while something like an email summary in the header might use the simple editor, which only allows you to modify the content of the text and not its style. 

The advanced editor allows you to control the standard elements that you would with most word processors. You can change the content and format of the text, add links, images, and tables. The advanced editor is pictured below.

The simple editor only allows you to control the content of the text. The format is locked. It will appear similarly to what is pictured below.

Manage designs in the Email Design Editor

When you select a design on the Create Message tab, you will notice that certain areas are not editable. Those areas are built into the design of the email and require a change to the code to be modified. You can modify the email design's HTML code with the Manage Designs button.

If your role provides you with sufficient roles to manage designs, you will see the Manage Designs button to the right of the Select Design button.

When you first open the Email Design Editor, you will be asked to "Please select an email design". You will notice that none of the menu options are selectable until you choose an email design. 

Select a design from the drop-down menu in the upper left of the screen. You will notice that certain designs have a yellow lock icon next to them. This means that they are system designs that cannot be changed. If you save a copy of the design, you may make custom modifications and save it as a new design.

Once you copy a message, you will be asked to give it a new title. Once you do that and hit OK, you will be able to modify the HTML of the design.

There are two resources for making design modifications in the Email Design Editor:

1. Use the tools on the right to modify element definitions

Sections

Under the Sections tab, you have the ability to add and delete section definitions of your message design as well as edit the section ID and control which editor it should use in the Create Message tab.

If you delete a section definition by clicking the X icon, the editor will longer know what to do with its ID in the HTML, so the code will become visible in the design. For example, if you deleted wHeader, then the words $$SECTION:START: wHeader$$ and $$SECTION:END: wHeader$$ would appear in the email design for everyone to see and it would look strange. More info on this is listed under in section 2 below.

Colors

Under the Colors tab, you have the ability to add and delete color definitions in your message design as well as edit the the color name and value.

If you delete any of the color definitions by clicking the X icon, the elements it defined will loose that color. If you delete all of the color definitions, the design will default to the basic HTML colors (white background, black text, blue links).

Images

Under the Images tab, you have the ability to add and delete the images in your message design as well as edit the image name, alternate text, reference URL and Max width.

If you delete any of the images by clicking the X icon, they will disappear from the design.

Note: Any images you add to your email should not exceed 600 px in width

2. Use the HTML tab to edit the design code 

Use the HTML tab to edit the code of the design that you copied. We recommend that you not delete all of the existing code and start from scratch, only modify it to fit your needs. Deleting all the existing code runs the risk of creating a design that will not function properly. 

You also have the option to use the HTML from pre-existing email templates that you find elsewhere. Just make sure you understand the code that you are adding as well as what is required for an email design to function in our editor.

For your design to work properly with our editor, it must contain $$editorscript$$ in the last line of the <head> of the HTML.

Without this, you will not be able to edit any of the content of the design without modifying the HTML directly.

The email design is divided into sections. Each section that is listed in the Section Tool the right side of the editor must also be listed with the same name in the HTML.

In the HTML, each section must begin with $$SECTION:START:(name of section)$$ and end with $$SECTION:END:(name of section)$$. In between these tags is where you put your default content for the specified section. 

Back to Top