Template Management

For templates using the simple editor, you can use the "Create from ID WCA" option to provide an existing WCA template ID to be brought into Email Playground.  Also, you can use the "Import from HTML WCA" if you wish to copy and paste code from WCA Source View.

For the Drag And Drop editor, you have the ability to create blank templates, import HTML, or edit previously created or default templates

CREATE A NEW TEMPLATE

Step 1

          • Click on Create New Template
          • Provide name for template
          • You can choose to have a view in browser link that will be appended to your template by              checking the View In Browser Option
          • Use drag and drop editor to build desired email layout

Editor tabs

Elements – Dragable elements used to define your layout
Content – Styling options available for the element selected
Defaults – Default Styling options for the entire layout

• Elements for creating Layout Options

• Full Width

With the Full width element you can add an element, which has 100% wide background color: You can split the Full width element into half, adjust the cell order On mobile (Left to Right or Right to Left), and define Primary and Secondary background colors.

You can save the content of your Full width element as a Complex element for later use in any of your templates.

Note: You can only add a Full width element to the Root of the template.

• Column

Use the Column element to add 2 or more (max. 5) columns at the same time. In the Column toolbox you can select any column with a simple click, reorder columns with drag and drop, resize and fix width of the selected column, equalize, Add and Remove (if at least 3 are present) columns.

You can save the content of your Column as a Complex element for later use in any of your templates.

With the Reorder on mobile function you can decide if you want to transform the columns into one column on mobile view, or not.

Note: You can drag and drop any element into a Column (except for the Full width element)!

• Box

The Box element is for grouping and styling elements together. With a Box you can add borders, background color, padding and margin to any element or group of elements.

You can save the content of your Box as a Complex element for later use in any of your templates.

Note: You can drag and drop any element inside a box (except for the Full width element)!

• Content

H1 Title

If you double click on the Title element, a simple text editor will hover over it. All basic text formatting options are available in this menu.

You can adjust the font style with the B, I, U icons

Remove formatting
Change text alignment (left, middle, right, justified)
Change heading style (h1, h2, h3)
Change font type, size, color and background color

In the Typography settings you can adjust the properties of your title block including font type, size, color, line height, link style and color.

• Text

if you double click on the Text element, a simple text editor will hover over it. All basic text formatting options are available in this menu.

You can adjust the font style with the B, I, U icons
Remove formatting
Change text alignment (left, middle, right, justified)
Change heading style (h1, h2, h3)
Change font type, size, color and background color

Numbered list / Bulleted list

Add or remove URL

In the Typography settings you can adjust the properties of your text block including font type, size, color, line height, link style and color.

• Image

if you double click on the Image element, the Image gallery will pop up, and you will be able to insert your image.

In the right menu you can add link (URL) and alt text to your image and also change its alignment (left, center, right) and size.

If the original width of your image is bigger than 240px, but you resized it to a smaller size in the
desktop version, you are able to make it full width on mobile with the Fluid on mobile switch.

Note: Use 600px wide pictures for best reader experience on mobile.

• Button

If you double click on the Button element, a simple text editor will hover over it. All basic text formatting options are available in this menu.

In the right menu you can add link (URL), adjust button radius and change its alignment (left, center, right) and size

• Divider

The Divider element helps you to add horizontal lines or white space to your email templates.

In the right column you can adjust line style, spacing and background settings.

• Special

Video

The Video element helps you to add YouTube or Vimeo videos to your email automatically.

Note: The video won’t be embedded into your email. Only a static image will appear in your message which redirects to the actual video on click.

• Image Group

The Image Group element helps you to add 2 to 5 images at the same time.

Under the Image Group settings tab you can choose the layout, add, remove or reorder images.

• Social Follow

The Social Follow element helps you to add your social profiles to your email messages, by a simple drag and drop.

In the right column you can add URLs, choose your desired layout, configure icon style and also change alignment and typography settings of the element.

• Social Share

The Social Share element

The Text version can be edited by selecting the Text/HTML option. You can convert the HTML to text.

Note that this will overwrite anything in the Text version 

View HTML Source

You can view the generated HTML by clicking the View Source. Note that you cannot change the HTML source in this view. The code shown here will be updated automatically when changes are made via the drag and drop interface.

View Desktop and Mobile versions

The editor creates fully responsive email code automatically. This ensures that the email will be formatted for viewing on both Desktop and Mobile email clients.

When editing a text or headline element the editor includes two drop downs one for tags and one for personalization strings

Tags – Tags must be included in every marketing mailing to ensure spam compliance. Live emails cannot be scheduled without including these tags.

Personalization Strings will be replaced with the recipient’s data from the contact record upon send *Note – Personalization String data is coming from WCA

Step 2 - You have the ability to send a test email of your layout to one or more email addresses. To enter multiple email addresses simply enter a comma between the email addresses.

Step 3 – Save and configure

TEMPLATE CONFIGURATION OPTIONS:

Template Name

Description

The From name and From address are pre-filled based on your account configuration but these can be customized for each template or even during the mailing deployment process.

Published templates become available to create mailings from The template thumbnail and preview will be automatically created or you can upload your own images. These will be shown on the create an email screen When done click save and close

 

CREATE FROM HTML

To create a template from already coded HTML click Create from HTML
Provide a name for your template and paste the HTML code into the dialog that displays..
Click create template – This will create a drag and drop template that you can edit.

Actions/Gear Icon

The gear or actions icon is used throughout the system to indicate additional actions that can be performed on the

element the icon is associated with. In the Templates Management section you have the following actions available:

Publish/Unpublish Template
Duplicate Template
Delete Template

You can also search your templates by name

*Note – Default Templates created by administrators are available to you in read only mode. Emails can be created from these templates or users can duplicate these templates if you would like to modify the layout.