Drag & Drop Editor

The Drag & Drop editor makes it easy to create professional looking emails. Messages are built using rows to add a container in the message, to which additional content blocks can then be added.

hen using the campaign editor there are 4 steps. 

• Step 1 Select Template

• Step 2 Edit HTML

  • Theme

  • Rows

  • Content

  • ​Content Blocks

  • Action Buttons

  • Preview & Test

• ​​Step 3 Edit Plain Text

• Step 4 Edit Email Details

Step 2 Edit HTML

This is where the layout, color, font, images and text will be edited to create the message and email design.

How to Access Step 2 Edit HTML

To make changes to the email design, there are two options to access Step 2 Edit HTML page. 

Option 1 - Create new email campaign and select template.

1. Log in to website and access Email Marketing Module.
2. Select Email Campaigns from the left navigation.
3. Click triangle pointing down beside the New Email Campaign button.
4. Select Drag & Drop Editor from the drop-down list to create campaign. 

Option 2 - Access existing campaign already started.

1. Log in to website and access Email Marketing Module.
2. Select Email Campaigns from the left navigation.
3. Select checkbox next to the campaign name and click Edit button from Action Bar.
   • If the name of the campaign was clicked on instead of using the checkbox, the Email Campaigns overview will display.
     • Click Edit button from the Action Bar or on the right, click Edit Email Design. 
     • If a campaign has a Sent status, the Edit Email Design link will be disabled.

The Edit HTML window will be displayed.There are 3 sections to setup the design: Theme, Rows and Content to select content blocks.

• Theme

• Rows

• Content

• Action Buttons

First thing we recommend changing is the campaign name. By default, new emails will be named with the current date as the campaign name.

1. At the top of the page Email campaign name: Give the email a campaign name.
   • This name is only visible to administrators. 
2. Click green check mark to save campaign name change.

The Step 2 Edit HTML page is split into two panes.

1. Left side of the screen is referred to as the Canvas, this is where the campaign design is going to be created.
2. Right side of the screen, different sections (Content, Rows and Theme) to build the email will be found.

These sections (Content, Rows and Theme) will be used to set defaults for the email campaign. If the campaign is going to be sent out every week, the new campaign settings can be saved as a template. This saves time and in the future administrators can select from Saved Templates instead of starting all over again with a new campaign. 
Some settings can be overridden from a different section. Example with setting up Link color.

• Theme: Link color set to blue, any links in the entire campaign will be blue.
• Text Content Block - Text Properties: Link color set to green. 
  • Links found in that Text Content Block will be green instead of blue as set in the Theme. However, other text content blocks could still default to blue.
• Text Content Block - Content Editor - Font color for text that has been setup as a link can be manually changed to any color.
  • The link will not be blue or green as set in the Theme and Text Properties link color. 

Theme

A theme is where the first set of defaults can be configured set for the email campaign. This decides the theme, fonts and colors for the entire email. For example, if the wrong theme was selected during the template selection it can be switched from here. The process swaps out the background, default colour palette, and other aspects associated with the Theme.

1. With the Theme tab selected on the right.
2. Click Choose from available Themes 
3. Select a new theme. The canvas (left pane) updates with the new theme.
   • Click Undo, to revert back to original theme.
   • Click Apply, to use the new theme.
4. Click < Back to view and edit other Theme options.

Other design options found in the Theme tab include:

• Content Area: Width and background color
• Full Width Background: Color or use an image.
• Text Styles: Alignment, Color, font for text, and headings.
• Image Appearance: Border, color and width.
• Link Style: Color of links and whether they should be underlined.
• Button Style: Color, font, size.
• Divider style: Color, style and width.
• Layout Styles: Padding options.
• Margin Styles: top and bottom padding.

Rows

Rows design the layout of the email. It could be a simple email with one column or 1 column at the top and 2 columns at the bottom, the possibilities are endless. After a row has been added to the canvas, the row can be selected to access the Row and Column properties. 

Steps to Add Rows to Canvas

1. With the Rows tab selected on the right.
2. Click and Drag the desired row configuration onto the canvas on the left.
   • The orange horizontal bar will indicate where the row will be placed.
3. Drop the row on to the canvas.
4. Click on any row on the canvas and it will be selected with a dotted box.
5. The Row and Column Properties will display in the right pane.

Row and Column Properties

• Background: Color or image or border style for the row.
• Spacing: Top and bottom padding.
• Column Style: Background color, style or alignment for a column.
• Spacing Within Columns: Padding.
• Column Widths: Resize columns.
  • This only appears if the row selected had 2 or more columns
  • Click Resize Columns and left pane will have yellow vertical line to adjust width of column.
  • Click on yellow circle with white arrows and slide to adjust column width.
    • Click Done to save column width adjustment and exit Resize Columns mode.
    • Click Cancel to restore column width and exit Resize Columns mode.

Move, Copy or Delete a Row

After a Row has been added to the canvas it could be moved, copied or deleted at any time, even after content blocks are added with text, images or links.

Hover over a row and the move, copy and delete icons will appear.

Move

1. Click on the 4 directional icon and drag row between other rows on the canvas. 
2. The orange horizontal bar will indicate where the row will be placed.
3. Drop the row in the new row on the canvas.

Copy 

1. Click on the square with dotted line along left and bottom.
2. A copy of the row with all its contents will appear under the original row.

Delete

1. Click on the trash can icon and the row with all its contents will be deleted from the canvas immediately.
2. If this was deleted in error, use the undo (arrow pointing left icon) to bring the row information back on the canvas.

Content

Content is where the email will be designed using content blocks. Existing blocks from a template can be edited or new ones can be added on to the canvas. After a content block has been added to the canvas and selected, each block will have its own set of properties to be customized. 
If the new campaign was created using the Start from Blank option, remember a Row must be dragged and dropped on to the canvas before a content block could be added using drag and drop. 

1. With the Content tab selected on the right.
2. Click and Drag the desired content block onto the canvas on the left.
3. Drop the content block in to a row or column on to the canvas.
4. While editing the message, additional rows can be added at any time.

Below is a summary of what each content block does, more details can be found in Content Blocks. 

• Text - Text, merge fields and hyperlinks can be added using this content block. 
• Image - Images can either be uploaded into the Media Library, or pulled in with a URL. They could also be linked with a hyperlink.
• Caption - Image and Text to be added within the same content block. The image could be linked with a hyperlink.
• Collage - Option to add two to four placeholder images that can either be uploaded into the Media Library, or pulled in with a URL.
• Video - Include a YouTube or Vimeo video link in the email. Please note - Videos cannot be embedded in an email. This block allows a still frame image to be used, with a hyperlink to the video.
• Button - Inserts a call-to-action button that will be hyperlinked. 
• Divider - Inserts a horizontal divider in the message.
• Social - Adds linkable social media icons.
• HTML - Inserts a block of HTML code. When working with the HTML blocks, moderate degree of coding knowledge will be required to use this block.
• RSS - Add RSS content to an email, such as a blog feed.

Move, Copy or Delete a Content Block

Similar to rows, after a Content Block has been added to the canvas it could be moved, copied or deleted at any time into another row or column. 
Hover over a content block and the move, copy and delete icons will appear.

Move

1. Click on the 4 directional icon and drag content block within the same or to a different row/column on the canvas. 
2. The orange horizontal bar will indicate where the content block will be placed.
3. Drop the content block on the canvas.

Copy 

1. Click on the square with dotted line along left and bottom.
2. A copy of the content block with all its contents will appear under the original content block.

Delete

1. Click on the trash can icon and the content block with all its contents will be deleted from the canvas immediately.
2. If this was deleted in error, use the undo (arrow pointing left icon) to bring the row information back on the canvas.

Step 2 Edit HTML Action Buttons

The top right displays action buttons to access options and tools to manage the email.

• Cancel - Exits the Edit HTML screen and goes back to the Email Campaigns to see list of all email campaigns.
• Tools drop down, which includes:
  • Save as New Template - Saves the content, layout and settings, so that it is available as a starting point for future campaigns. 
    • If you save a template with the same name, it does not replace the existing template. It creates another template found in the Saved Template tab. Remember to Delete the template that is no longer required. For details see How to Save a Template from a Campaign.
  • Export HTML - Export the email campaign's html for further editing or use in another project.
  • Copy to Full Email Editor - Copy the code from this email campaign using the Drag & Drop editor to the Full Email Editor. 
• Save - Save the changes to the campaign manually. However, the campaign actually autosaves without clicking on this button.
• Preview & Test - View and test content in a campaign before it is sent out to all contacts. More details in Preview & Test section below.
• Next - Goes to Step 3 Edit Plain Text screen.

Preview & Test

Administrators could use this section to view and test content in a campaign before it is sent out to all contacts. They could compare how the campaign would look on a desktop or mobile device, test hyperlinks, preview merge field data, export campaign and send test emails. 

To preview the content in the email campaign, click on the Preview & Test button at the top right. When finished click Close Preview at the top right to continue making edits. For details see How to Preview & Test a Campaign.

Step 3 Edit Plain Text

The plain text is auto generated from the content that was added in Step 2 Edit HTML. This is the message contacts will receive if they have opted in their email provider to only view email in plain text. This means they will not see any color, images or formatting in rows and columns, but if there were hyperlinks they would still be able to click and access the information. Changes can be made to the text but it is not necessary.

Click Next > from the top right, to move on to Step 4 Edit Email Details. 

Action Buttons

The top right displays action buttons to access options and tools to manage the email.

• Cancel - Exits the Edit Plain Text screen and goes back to the Email Campaign overview.
• Save - Save any changes made on this screen. 
• Previous - Go back to Step 2 Edit HTML to make changes. 
• Next - Go to Step 4 Edit Email Details. 

Step 4 Edit Email Details

In Step 4 Edit Email Details, administrators will be able to enter the subject line, choose the From Email, Reply to Email, Footer and whether or not to include the online version of the email before the campaign is ready to be sent. 

• Subject: Enter subject line that will display for recipients. Personalization can be added with merge fields or emojis.
• Preheader: Optional teaser content below the subject line. Allows for personalization with merge fields or emojis.
• From Name: Enter name email should come from, this could be club name or name of staff.
• From Email: Enter email address that will appear as the from email address in the recipient's inbox.
  • The email address has to be validated before being used as a from or reply to email. See details below on how to add email address.
• Reply to Email: Enter the email address for handling recipient responses if the recipient clicks reply from their inbox.
• Same as From Email: 
  • Checked: When recipient clicks on reply it will go to the from email specified.
  • Unchecked: Specify an email that is different from what was typed in the From Email box.
• Reply Settings:
  • Track email Replies: Usually left deselected. 
    • If enabled the Email Marketing Module will track email replies. These replies will not be sent to the Reply to Email until they are processed in Email Marketing.
  • Do not track email replies: Suggest this option be selected.
    • Replies will be sent directly to the Reply to Email that is configured for this campaign and will eliminate the delay in receiving email replies.
• This email campaign will be part of a workflow:
  • Option to save the email for use with workflows.
  • If enabled, the email cannot be scheduled or sent independently.

Near the bottom of the screen, More Options section is where the Footer is set up with links. Choose whether or not to include a header to view the online version of the email.

• Footer: Provides links for recipients to manage mailing list subscriptions and unsubscribe.
  • Select the checkbox beside Include your Mailing Address in the footer of the email. 
  • Including the mailing address is required by CAN-SPAM regulations.
  • By default, the footer information will only include the email address of the recipient, the ‘Manage Preferences’, as well as the ‘Unsubscribe’ link. As such, it will not be necessary to edit it on a regular basis. Any additional information can be inserted into the bottom of the Email Campaign when it is being edited.
  • To add or modify the content of the footers themselves, please contact the web support team.
• Subscription Form: Manage Preferences usually defaulted, this can be changed if additional forms have been set up.
• View email online: Allows recipients to view the email in a browser if this checkbox is selected.
  • Text displayed by default: Trouble viewing this email? This text can be edited.
  • Link Text: default Read it online, this can be edited.
  • Display at the: select Top or Bottom. Recommend Top for contacts to easily see this viewing option.
• Save Draft: Click Save Draft to navigate to the next screen to select recipients and schedule the email campaign.

 

How to Add email address for From Email and Reply to Email drop-down

1. In the From Email or Reply to Email drop-down,
2. Select Manage email addresses…
3. Select Add New email address tab.
4. Type email address.
5. Click Submit. 
6. Check inbox for email address that was entered.
7. Email to Confirm a new From Email should have a link to complete the validation.
8. Click on link in email.
9. Click Confirm.
10. Go back to Email Marketing Module and refresh screen and access Step 4 Edit Email Details page.
11. The new email address should be accessible under the From Email and Reply to Email drop-down to be selected.

Remove email address from drop-down

1. In the From Email or Reply to Email drop-down,
2. Select Manage email addresses…
3. Remove email address tab.
4. Select checkbox beside email address to be removed.
5. Click Delete, to remove email address from drop-down.

You cannot delete the selected email addresses, which are currently in use.
 

Action Buttons

The following buttons could be found either in the top or across bottom of the Step 4 Edit Email Details page.

• Cancel - Exits the Step 4 Edit Email Details screen and goes back to the Email Campaign overview.
• Previous - Go back to Step 3 Edit Plain Text to make changes. 
• Preview and Test - See how the campaign looks on desktop and mobile devices, test hyperlinks, preview merge field data, export campaign and send test emails. 
• Save Draft - Save any changes made on this screen. This goes to the Email campaign overview where recipients can be selected and schedule when to send the email.
• Send quick test... - Send a test email to a specified address without previewing.

 

Smart Email Builder

Smart templates organize content using content blocks and regions:

• A content block represents one element, such as an image, a headline, or a text block.
• A region is a grouping of related content blocks.

Content Blocks

Three types of content blocks are available in smart templates:

• Image content block for displaying images.
• Text content block for displaying text, such as headlines, titles, paragraphs, and so on.
• Read More content block for displaying a link to related information that's available from another location in the design or to an external online location.

Some smart templates may include other types of content blocks.

You can easily identify a content block by hovering the cursor over the area you're interested in. The content block for that area is highlighted by a green box and a striped grey background, as shown in this example:

In order to edit a text area, click inside the text area and an editor will pop up in a new window.

Regions

Three types of regions are available:

• Header region for displaying the header, which is typically an image.
• Title region for displaying headlines, titles and introductory paragraphs.
• Body region for displaying article titles and content.

The content blocks available in a region depend on the smart template. In general, however, the header region includes only an image content block while title and body regions can include any type of content block.

Regions are easily identified by the controls available for working with them. For the header region, the control is available in the top, right corner of the region. For other regions, controls appear in the bottom, right corner of the region.

Depending on the region type, one or more of the following controls are available:

• Plus sign icon - Creates a copy of the selected region and places it below the selected region.
• Arrow pointing down / up icon - Moves the selected region down / up  one region.
• Recycle bin - Delete the selected region.
• Paper icon - Toggle the default image container for this region. This option toggles the width of the striped grey border for this region only.

When working with regions, keep the following in mind:

• The header for a newsletter can't be copied or moved because it's intended to appear only once in the template, and always at the top. You can delete the header.
• With the exception of the header, you can change the order of regions, if they are used more than once in the template. You can move a region only within the area of the template for which it's intended. For example, a region that includes the newsletter title, subtitle, and introductory paragraph cannot be moved into the body of the template where articles appear.

Delete Text Area

Click the text area to open the editor and on the bottom right corner, click the Delete button.

Delete Image

Hover your mouse over the image and on the top right corner, the trash bin icon will appear. When clicked, a prompt will appear asking you to confirm that you want the image deleted.

Properties

On the right, additional campaign features can be edited such as the themes, colors and layout, font type and size based on the section within the campaign. Click on a section to reveal properties available to edit.

 

Full Email Editor

The Full Email Editor provides a design editor for HTML emails and plain text emails.

When using the campaign editor there are 3 steps. 

Step 1 Choose Template

Step 2 Create or Edit email 

First thing we recommend changing is the campaign name. By default, new emails will be named with the current date as the campaign name.

1. At the top of the page Email campaign name: Give the email a campaign name.
   • This name is only visible to administrators. 
2. Click green check mark to save campaign name change.

For more details on editing an email campaign using the Full email Editor, click on one of these links.

• How to Edit and Format Text in an Email Campaign
• How to Insert Images in an Email Campaign
• How to Insert Hyperlinks in an Email Campaign
• How to add a PDF to an Email Campaign
• How to Insert Merge Fields in an Email Campaign
• How to Insert a Table in an Email Campaign

Step 3 Edit Email Details

• The Edit Email Details in the Full Editor is the same as the Drag & Drop Editor.
  1. Select the Drag & Drop Editor button above.
  2. Select Step 4 Edit Email Details for more information.