Drag & Drop Compatibility
A Library Design is essentially an HTML file that has been marked up in such a way to make it compatible with the drag & drop Email Designer feature.
Benefits of using Library Designs include:
- The ability to easily create re-usable Email Templates
- Non-technical colleagues can edit without having to get involved in coding
- Sections can be protected so they can't be edited
- Code additional sections that can be dragged and dropped into designs
- It's easier to produce consistent designs in regular Email Campaigns
- Testing time is reduced because it's only content that's changing
- Being able to create a selection of designs to support varied layout requirements
Shared Library Designs appear as an option when creating a new Email Template and can be re-used as many times as needed.
Setting-up Library Designs
Coding Library Designs is intended for experienced email coders that are familiar with the technicalities and pitfalls of email design in general.
If you're not an email coder it is recommended that you try using wireframes to build from scratch in the drag & drop Email Designer.
To find out more about working with Library Designs see the help pages below:
- View the markup guide
- Find out how to create, edit and test designs
- Download example boilerplate designs
Create, Edit & Test Designs
Adding Library Designs
- Expand the "Templates" section in the sidebar and click "Library Designs".
- Click the "New Library Design" button in the top right.
- Enter a Description and add spotlight tags for faster searching and better content organisation.
- Add the HTML, CSS and images either individually or as a single Zip file.
- Click "Create Template".
Search for existing Library Designs that you want to edit through this screen as well.
Fonts, Colours & Image Editing
When uploading a new template to the Template Library it's possible to toggle certain features of the editor. This can be useful to keep colour schemes, typography and image styles in line with branding.
- Font Faces - Disabling this property removes Font Face properties from the editor. Font styles are enforced by the styles specified in the template's CSS.
- Text Colours - Disabling this property removes Text Colour properties from the editor. Text Colours are enforced by the styles specified in the template's CSS.
- Image Editor - Disabling this property removes the image editing capabilities from the editor.
Template Thumbnail
Upload a custom thumbnail that represents the layout and helps the people decide whether they want to use the design to create a new Email Template.
The Template Library is shown as a gallery view and when a thumbnail is not present a placeholder image will be used instead.
The ideal size to use for a thumbnail is 200 x 200 pixels.
Section Thumbnail
Upload a custom thumbnail that represents the section layout and helps the people decide whether they want to use the editable section within their Email Template.
The Editable Sections are shown along with the thumbnail when uploading a template with custom sections to the template library.
The ideal size to use for a thumbnail is 100 x 60 pixels.
Auto-generate Placeholder Images
Use placeholders to make it easier for people to identify the best image size to use.
Each time an Email Template is saved all images are tested and if placeholders are detected a warning message will be shown to alert that it needs to be changed before being able to send an Email Campaign.
Example Usage
<div style="margin: 20px; float: left;"> <img src="/email_designer/placeholder/600x180.png?ed-info=Feature Hero Image" /> </div> <div style="margin: 20px; float: left;"> <img src="/email_designer/placeholder/280x180.png?ed-info=Bottom Left Image" /> </div> <div style="margin: 20px; float: left;"> <img src="/email_designer/placeholder/280x180.png?ed-info=Bottom Right Image" /> </div>
The example code above generates this output:
Download Boilerplate Templates
Boilerplates are a good starting point for Library Designs and there's a selection available for download to help get you started.
Three base templates are included in the ZIP file, which are a good starting point for your Email Template.
These templates illustrate the markup required for compatibility with the drag and drop editor and example placeholder image code.
Whilst these templates have been tested in popular email apps, we'd always recommend using an external testing service, such as Litmus or Email on Acid, once your content is in place.