Building Your Email

With Email Campaign Manager, the structure, styling and content of your emails is created as a page in OU Campus. The HTML from this published page is then used by ECM to style the email. 

If it has not already been set up, it is recommended to store all your email template pages in one directory. This directory can then be assigned a template group containing only the "New Email Campaign Page" template. Because the email campaign template has a very different code structure than a normal OU Campus page template, it is important for users to only select the New Email Campaign Page template when creating a new email campaign.Create New Email Campaign Page modal

Email campaign pages obey the same workflow and access principles as other pages in OU Campus

Building Email Templates

To create a new email, navigate to the email directory and click the New button, then select New Email Campaign.

New Email Campaign Manager

Fill out the fields in the New Email Campaign modal with the required information and press Create. Once the new template is added it can be edited like other pages in OU Campus. Click the button above the editable region to begin editing email content.

Editing Emails

The email design is built using preconfigured snippets. There are six snippets included in the base Email Campaign Manager package. To insert a snippet, click either the snippet button from the toolbar or use the Snippets Gadget, choose the category “Email Campaign Manager” from the drop-down list, and select the appropriate snippet.

Email Snippets

To build the email, insert one snippet after another into the main editable region. Users may add different types of snippets within one email. The horizontal rule <hr> placed between snippets will separate content.

Once a snippet is inserted, users will be given directions within the WYSIWYG to edit the style of the button directly from that location. Bolded directions will appear in the WYSIWYG only, and not on the published page. Many snippets also give options for choosing the size, color scheme, and or styling of the snippet.

Using the snippets for design elements, write your email content. Background images and transparent images (such as .png files) are not supported in many email clients. Therefore, it is recommended to use only .jpg files that are resized before being placed in the email template.

The following are the six default snippets included in ECM: 

Button - Centered

Button - Centered

This snippet will create a button that can be linked to a separate web page. It should be used for calls to action. The button will be centered and may be inserted by itself, or it could be placed within a panel, a one-column, or a two-column snippet.

Button - Full Width

Button - Full Width

This snippet will create a button that can be linked to a separate web page. It should be used for calls to action. The button will take up the entire width of the space it is inserted. The button snippet may be inserted by itself, or it could be placed within a panel, a one-column, or a two-column snippet.

One Column - Full width

One Column - Full Width

This snippet will create an editable region that fills the entire width of the email. Users will be able to add a header, and it will automatically apply the color theme to that text. If the header is not desired, simply delete the row. Below the header, add text and/or images into the main email region.

Panel

Panel

This snippet will create a color-filled editable area that fills the entire width of the email. Choose the panel color (default or "theme," grey, green, or red) by inserting the appropriate word in the corresponding box. Users will also be able to add text and/or images.

Panel - Two Column Flexible Layout

Panel - Two Column Flex

This snippet will create two color-filled editable areas, side-by-side. The width of each area can be defined by the user, as long as the total width of the snippet equals twelve. For example, if the left editable region has a width of four, then the right editable region needs to have a width of eight. Choose the width of each editable region by typing the number in the corresponding box. Write out the numbers (one, two, three) rather than using the symbols (1, 2, 3). 

Two Column 50-50

Two Column - 50/50

This snippet will create two editable areas, side-by-side. The width of each editable region will be 50% of the entire width of the email. Users will be able to add a header, and it will automatically apply the color theme to that text. If the header is not desired, simply delete the row. Below the header, add text and/or images into the main email region.

Two Column - Flexible Layout

Two Column - Flex

This snippet will create two editable areas, side-by-side. The width of each area can be defined by the user, as long as the total width of the snippet equals twelve. For example, if the left editable region has a width of four, then the right editable region needs to have a width of eight. Choose the width of each editable region by typing the number in the corresponding box. Write out the numbers (one, two, three) rather than using the symbols (1, 2, 3). 

Users will be able to add a header, and it will automatically apply the color theme to that text. If the header is not desired, simply delete the row. Below the header, add text and/or images into the main email region.

Email Page Parameters

To edit page parameters, a user must check out the page they would like to edit and go to the Properties menu. From there, users can alter page metadata, email template color schemes, and other page-wide settings.

Administrators may choose to restrict access to the Page Properties view, preventing end-users from changing the overall look and feel of the page.

Page properties

 

Color Theme

Each standard template comes with four color themes. The color themes will define the header and footer colors, as well as the text headings of each email. It also defines the panel and button colors, though these can be changed manually in the WYSIWYG. Select the desired color for use in the header and footer of the new email.

Colors included in the base Email Campaign Manager package:

  • Default (the colors selected during implementation process)
  • Green (HEX #055C05)
  • Grey (HEX #D8D8D8)
  • Red (HEX #A72222)
  • Non-default colors may be altered during the initial implementation process.

Header Content

The header content is edited via the page parameters for the email page.

Browser Link Text: At the top of the email (above the header) choose to include a link that directs readers to the web version of the email. The text will read, “Having trouble viewing this email? Try it in your browser.” “Browser” will link directly to the web version of the email. To include the browser link and text, select Show. Otherwise, select the Hide button to turn off the browser link.

Header Logo: Choose a header image to display in the email. Please note, in order for the image render properly, it must be in JPEG format.

Display Date Stamp/Date Stamp: To include a date at the top right corner of the email (below the header), select Show and enter the text in the Date Stamp field. To turn off the included text, select Hide.

Footer Content

The content for the footer is managed by a separate include file and is located in the "_resources" folder in OU Campus. The email footer will be completed during the initial implementation.

To make changes to the social media icons displayed, locate the footer include file in the " _resources" folder, and insert the appropriate links to the page properties.

Unsubscribe link: The unsubscribe will be automatically inserted into the footer. Do not remove this link, as emails without an unsubscribe link will be blocked or marked as spam by many email clients.

Disclaimer Text: At the bottom of each email (below the footer) the disclaimer text can be enabled on or off. To include disclaimer text, select Show, and it will appear as an editable region in the WYSIWYG where text can be modified. Select Hide to turn off the disclaimer text.