Difference between revisions of "Using the Letter Editor"

From TRWV Documentation Wiki
Jump to: navigation, search
(Image File Manager)
Line 85: Line 85:
 
* Change font sizes
 
* Change font sizes
  
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.
+
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.
 
Copying and pasting HTML markup directly into the editor can also sometimes create unexpected results.
Line 93: Line 93:
 
# Select all of the text being affected
 
# Select all of the text being affected
 
# Click the ''Remove Formatting'' button in the text editor
 
# Click the ''Remove Formatting'' button in the text editor
 +
  
 
===Creating Web Links===
 
===Creating Web Links===

Revision as of 12:16, 4 October 2016

This page will be copied and pasted over the current Creating Letters page.


How to use the Editor Interface:

Use 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.

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.

Customized Backgrounds (Background Tab)

The Backgrounds tab allows some color and border styles to be added to your layout. These currently include:

  1. An exterior background color (default: white)
  2. An interior background color (default: white)
  3. Text/Font color (default: black)
  4. Message border color (default: white)
  5. Mesaage border thickness (default: 0px [none])


Styling your Letters:

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.

  1. 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)
  2. From the text editor tools, place your cursor where you would like an image to appear and select the Image button
  3. 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:

  1. Drag and drop an image from your desktop into the main editor window
  2. Use the Upload tab found in the Image Properties window
  3. 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.

Resizing Images

Images can be resized in two ways:

  1. Click on the image to be resized, and drag the handles that appear to resize the image
  2. Double-click on the image to be resized, and manually adjust the height and width parameters.


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

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.

  1. Select all of the text being affected
  2. Click the Remove Formatting button in the text editor


Creating Web Links

Text links

Image links

Advanced Editor "Tricks":

Adding DIV Containers with no Spacing

Adding a Background Color to a Container

Changing DIV Container External/Internal Spacing

Add Top or Bottom Padding to a Container