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.
Comments
0 comments
Please sign in to leave a comment.