Page Comparison

For the Cascade CMS portion of this tutorial, I recommend you use Google Chrome.

Banner Prep

Note: Using a banner with your email is optional. Follow these instructions if the banner you wish to use is NOT in Cascade CMS yet.

Crop your image to 600 x 150 and save to your computer.
- You can use PicMonkey, a free online tool, if you do not have Photoshop.
In Cascade CMS, click on New → [your department] → New Image
Browse to the image file you saved to your computer.
Change the Parent Folder to images/[your-department]/_email-banners.
Click Send to Workflow.
1. Your image will auto-publish to the web.
Copy the directory path of the submitted image.
Open a new browser tab, type in www.sandiego.edu/law and paste the directory path in after law and hit Enter/Return.
Leave this tab open for now, we will use it later. Go back to your Cascade CMS tab.

Image RemovedImage Added

Step 2

Image RemovedImage Added

Step 4

Image RemovedImage Added

Step 6

Image RemovedImage Added

Step 7

In Cascade CMS, Click on New → [your department] → New Email Builder
Give your email a system name appropriate to the subject: use only lowercase letters, numbers and dashes.
Email Header
1. Go back to your image tab and copy the URL.
2. Paste the URL into the Banner Image Link field. Make sure it includes the http://
3. Provide an image description to meet our accessibility standards.
4. Choose which campaign you'd like associated with your email.
Email Body (Titles and Greeting)
1. Type in the subject of your email into the Title (Heading 1) field. Please do not use all caps.
2. If you want your email to have sub-heading, type it into the Title (sub-heading) field. Please do not use all caps.
3. Choose which Greeting you want your email to have. The first two choices pull information from your BlueHornet mailing list. Choices:
  1. First name
  2. Salutation (i.e. Mr. Lastname)
  3. None (will not print any Dear ...)

Step 1

Step 2

Step 3, a-d

Step 4, a-c

The main body of the email is divided into rows. You will need one row for each type of content. Here are the types of rows available:

Heading 2
- Used to divide your email into sections of content (i.e. Conference Details, Speakers, etc.)
Paragraph
- Used to provide a section of content formatted as paragraphs and/or bulleted or numbered lists. You can have multiple paragraphs and lists in this one row if needed.
Button / Call to Action
- Used to provide a bright button (call to action) to encourage the user to engage (i.e. Apply Now, Register Now, etc.)
Image with Text
- Used to format an image (will align left) with accompanying paragraphs that flow around the image.

Follow the instructions for adding rows of content:

Expand the section called Body >> Row. It is inside the Body section just under the Greeting.
Choose which Type of content you want in this row.
Based on which type you chose, follow the appropriate steps:
1. Paragraph
  1. Type as many paragraphs and lists as you need. You can even link any text or list items. Please use only external links when making links within your text!!
2. Heading 2
  1. Type in your heading. Please do not use all caps.
3. Image with Text
  1. Paste in your Image Link, make sure to include the http://.
    - If your image is not already uploaded into Cascade you will want to perform that step first. Just submit your email (send to workflow), you can always come back and edit it after you've uploaded your image.
  2. Type in your Image Description to meet accessibility standards
  3. Type in any content into the Text editor.
4. Button / Call to Action
  1. Type in your link Text.
  2. Paste in your Link URL, make sure to include the http://.
  3. Choose your button background color.
You can create as many rows of content as you like by clicking the green + sign.

Step 3a

Step 3b

Step 3c

Step 3d

Make sure your department name is selected in the footer
Choose whether you want your department's contact info in modules or as text. Examples are shown to the right.

Steps 1 and 2

Example of module-based contact info

Example of text-based contact info

After reviewing all of your content, send your email to workflow.
- It will auto-publish to the staging website, not the live website.
Click on your email page from the workflow summary screen. The link is next to Review Content. Your email will load within Cascade CMS.
Click the Live tab.
Then click the URL on the page that loads. This will open a new tab and try to load your page in the live website.
Because your email is only published to staging, change the 'www' in the URL to 'staging' and hit enter/return. Your email will then load in your browser tab.
Right click on your email and choose View Page Source. The HTML page source will load into a new tab.
Leave this tab open, we will use it later.

Step 2

Step 3

Step 4

Step 5

Step 6

NOTE: The Preview button will not work while editing or approving with these new emails.

In a new tab, log in to BlueHornet, http://echo4.bluehornet.com/ems/auth/login
Click Messages → Create Message (or copy an existing one to start with).
Enter the proper Message Details
For Message Type, choose Basic Test Message, then click Next.
Enter the appropriate header and footer information.
In the HTML Format section, click Source from the editor tools (top left button).
Switch over to the tab that contains the HTML source code and copy all of the code
1. Macs: cmd+a, then cmd+c
2. PCs: ctrl+a, then ctrl+c
Switch back to BlueHornet and paste the HTML source code into the source window.
Click the Source button again to view your email in design mode to make sure everything is displaying properly.
Click Send Basic Test and select the emails you which to send a test to. Then click the Send Basic Test button. Review the test email you receive.
Officially submit your email once you are satisfied with the test.
- NOTE: There may be other BH steps you need to perform as required by External Relations before submitting. If you are unaware of what else needs to be done (i.e. dealing with distribution lists, etc.) you will want to contact Katie Pinto (katiepinto@sandiego.edu).