Building an HTML Email
PLEASE NOTE: Before working with this tutorial, be sure to schedule an "emailer-specific" one-on-one training session with Web Services. Please schedule training session here. For the time being, these training sessions will be held via WebEx Teams.
Steps
Part I
- Open your Chrome or Firefox browser, go to www.ccri.edu/workforce/ and login to Omni Update (OU).
- When OU opens, click on the "Back to Pages" link.
- Click on "__mailers".
- At the end of the template file row, click on the three dots.
- When the other options appear, click on the "File" drop-down menu, then select "Copy".
- Open the "2020" folder (or whatever year is the most current) to open it.
- Click the "Copy" button to make a copy of the template in the folder you just opened.
- Open the folder into which you just made the copy. At the end of the row containing
the template file you just copied into the folder, click on the three dots, then click
the "File" drop-down menu and select "Rename."
- Type your new filename over the old name and click the "Enter" key on your keyboard.
- Click on the filename to open your new file.
- Note that you are in the "Edit" view. Click on the green "Date" button.
- Select the text you need to change and type your changes over it.
- Save your changes by clicking on the "Save" icon in the toolbar.
- Next, click on the "Edit Main Content" button.
- Select the text that you want to replace in the template. You can replace the whole
maincontent area or just a section at a time. Copy your new text from a source document.
This could be a Word document or an email. Paste the copied text over the selected
original text. Be sure that the "Paste as plain text" button is NOT active (depressed) before pasting.
Please Note: Security features in your browser will probably not allow you to use the Paste button in the toolbar so you'll need to use the keyboard strokes: "Ctrl + v" ("Command + v" on a Mac) to paste your copied text.
- You will probably lose some styling when you paste -especially if you paste form a
Word document. This is good for the most part -OU removes a lot of extraneous code
that Word uses. You can add or change the styling after pasting. In this example,
I am changing the first line into a "Heading 1". To do this, place your cursor anywhere
in the first line of text (you do not need to select it) then click the drop-down menu that says "Paragraph" (NOTE: it displays "Heading 1" in this screenshot because I had already made the change) and select "Heading 1".
- You can make text bold or italic by selecting it and clicking the "B" or the "I" in
the toolbar. You can also make text bold by selecting it, then chosing "Bold text"
from the "Styles" drop-down menu. There are a number of other text styles in that
drop-down as well (see below.)
Note: The first 3 styles can only be applied to a complete text element, such as a heading or a paragraph, and you need only to place your cursor within the element before selecting the style. For the remaining styles, the text you want to style must be selected first.
- In the example below, I have used the "Red text bold" and the "Hilite text with yellow"
styles from the drop-down Styles menu.
I have also changed the links to open in a new window. This should be done for ALL links from an email.
- Change the links to open in a new window by right-clicking on the link, then chosing
"Link..."
- The "Insert/Edit Link" pop-up window will appear. Choose "New window" from the "Open
link in..." drop-down menu, then "Save".
- Let's assume you want to add one of your decorative horizontal rule images to designate
a new section of content. Place your cursor where you want the rule to appear, then
click on the puzzle piece icon in the toolbar.
- When the "Choose Snippet" pop-up window appears, in the "(All Categories) drop-down
menu, click on "email".
- In the "email" category, choose "HR - Decorative". Note that the image is displayed
in the preview window to the right. Click the "Insert" button.
- Horizontal rule image inserted.
