Using the Letter Editor
This page will be copied and pasted over the current Creating Letters page.
Contents
Creating Your Letter:
Using a Pre-Made Template
When creating a new letter for your Campaign, you will be asked if you want to use a pre-made template. These highly flexible template designs can be used as a quickly create a layout "structure" for your message content.
You can also add a template to a current letter by selecting Add Template under the Components tab in the right side of the editor window. This can be helpful if you are redesigning a letter, since you can copy and paste, or drag containers and components from different sections.
Don't forget to save your favorite message layouts as Custom Templates. This is a HUGE time saver when creating future letters for your Campaign! |
Using Containers and Components
On the right side of the editor window, you will see three tabs: Containers, Components, and Backgrounds.
Containers
Containers are used to create a structured column layouts for your content. To add containers, drag and drop any container from the right side into the main editor window.
Components
Components are used to fill containers with images, text, social media sections, or pre-formatted tables. To add components, drag and drop any component into from the right side into a container in the main editor window.
Working With Letter Content:
Adding/Removing Text Styling
The text editor allows you to mark up your text in a variety of ways:
- Create Header text sections
- Change text colors
- Change text fonts
- Change font sizes
The text editor window is designed to function much like a word processor. Highlight sections of text with your mouse and choose a button for the text editor to apply a particular style.
If you are not sure what a button on the text editor does, hold your mouse over a button on the text editor to get a "hint" |
Fixing Styling Issues
All of these things work well, until they don't... Sometimes, markup pieces overlap one another. When pieces are then removed or relocated, the editor makes a guess as to what the formatting should be, creating unexpected results.
Copying and pasting HTML markup directly into the editor can also sometimes create unexpected results.
If the formatting in a text component starts to "misbehave", the best solution is to reset the all of formatting and start over.
- Select all of the text being affected
- Click the Remove Formatting button in the text editor
Images
Replacing Image Placeholders
Letter templates include image "placeholders" to show you how a particular layout can be structured to create a neat, uniform look.
To replace an image placeholder (or any image for that matter...), double click on the image, or right-click on the image and select Image Properties from the pop-up menu.
Add an Image to your letter body
There are several ways to add images to your letter body.
- Drag and drop an image from your desktop into the main editor window where you want the image to appear (size restrictions may apply. see the Image File Manager section below for more info)
- From the text editor tools, place your cursor where you would like an image to appear and select the Image button
- Drag and drop a component that contains an image placeholder into the main editor window
Using Stock Images
To select an image from our stock image galleries, select Browse Server in the Image Properties window top open the image file manager window.
Uploading Your Own Images
Uploading your own images for use in your Campaign letters can be done three ways:
- Drag and drop an image from your desktop into the main editor window
- Use the Upload tab found in the Image Properties window
- Select Browse Server in the Image Properties window top open the image file manager window.
Image File Manager
The Image File Manager gives you access to our entire stock photo library, and also a common storage folder for your own uploaded images. This common folder can hold images for any of your Campaigns.
The Image File Manager also includes some tools for editing cropping, rotating, and resizing your uploaded images.
Please note that we currently have an upload limit of 80K per image. If your image is larger than this, you will want to optimize it for use on the web before uploading it to TrafficWave.net. There are a number of free or inexpensive programs that will accomplish this for you. |
Wrapping text around an image
If you have inserted your own image into a letter body along with text, you may notice that the text does not properly "flow" around the image. The image properties must be adjusted:
- Open the Image Properties window by double clicking on the image
- Set the Alignment tab to Left or Right, depending on which side you would like text to flow.
- Optionally set the HSpace and VSpace parameters to add some padding around the image (try the value 5)...
Resizing Images
Images can be resized in two ways:
- Click on the image to be resized, and drag the handles that appear to resize the image
- Double-click on the image to be resized, and manually adjust the height and width parameters.
Creating Web Links
Adding web links (hyperlinks) to your letter content is a simple process.
Text links
- To ADD a hyperlink to text, highlight the text you wish to use, and press the Link button in the text editor.
- To EDIT or REMOVE a text hyperlink, double-click or right-click the link in the editor, or use the Unlink button in the text editor.
Image links
- To ADD a hyperlink to an image, click once on the image, and press the Link button in the text editor.
- To EDIT or REMOVE a hyperlink from an image, right-click on the image, or use the Unlink button in the text editor.
Don't forget to edit the links to point to your own pages if you are using our social media components |
Using Letter Tokens:
Signature Tokens
Subscriber Tokens
Custom Tokens
Advanced Editor "Tricks":
Customized Backgrounds (Background Tab)
The Backgrounds tab allows some color and border styles to be added to your layout. These currently include:
- An exterior background color (default: white)
- An interior background color (default: white)
- Text/Font color (default: black)
- Message border color (default: white)
- Message border thickness (default: 0px [none])
For consistency, all draggable components are pre-wrapped in an HTML "DIV" container with 15 pixels of padding on both sides. The exception to this is the single image component, which was designed to take the full width of the container it is being dragged into without padding. The reason for this padding is to accomodate an exterior background color or border around the message area.
There may be occasions that you want to adjust these pre-made features.
Removing All Component Spacing
There are three ways to accomplish this:
- Right-click in a "blank" area inside the component and selecting Remove Div will effectively remove all spacing
- Seleting the Source button in the text editor, and carefully removing any padding or margin styles from the outer <div>
- Right-click in a "blank" area inside the component and select Edit Div. Then click on the Advanced tab. Carefully remove any references to padding or margin found in the Style box.
Adding a Background Color to a Container
Right-click in a "blank" area inside the component and select Edit Div. Here you will find the proper tools, including a color picker, for changing the background color of this component.
Add Top or Bottom Padding to a Container
Sometimes, a little more vertical space may be needed...
Right-click in a "blank" area inside the component and select Edit Div. Then click on the Advanced tab.
Under the Style heading add one of the following (note the semicolon at the end of the line):
padding-bottom: 10px;
padding-top: 10px;
margin-top: 10px;
margin-bottom: 10px;
Wrapping a Section in a new DIV container
This can be useful to create a "box effect", to highlight a block of text for a sale or important notice...
Highlight the text/images you wish to be contained and select the Create DIV button in the text editor.
Add your padding, background colors, and borders to this new DIV.
This can be accomplished more easily by moving the contents you are wanting to wrap into it's own single component |