Making Content Editable

Create re-usable email templates for your client with total control over the sections they can (and more importantly can't) change.

Single Line <singleline>

Outputs a string you can modify in the editor. Used for smaller strings such as headings, and allows your client to wrap a link around the text. Any text you include inside the tag pair will be used as the default value. The content author can optionally add a link to the complete text using the editor.

Options

label=''

If you include a label attribute, it will be shown above the text field when the author is editing it. For example, useful labels might be 'Headline' or 'Caption'.

repeatertitle='true'

If included (on a single line item inside a repeater block) this text will become a link in the table of contents to the repeater block. You can mark as many different single line items for the table of contents as you like, but only one in any specific layout (or one per repeater block if you don't use layouts).

Example Use

• Markup
• In Editor
• Output

<h2>
	<singleline label='Pull Quote'>Pullquote here</singleline>
</h2>

Above: The code to include in your HTML templates

Above: How your code appears in the editor

<h2>
	<a href="http://mydomain.com/page/">Pullquote here</a>
</h2>

Above: What the output would be

Multi Line <multiline>

Outputs HTML you can modify in the WYSIWYG editor. Used for larger bodies of text and is automatically converted to HTML (so it will contain one or more paragraphs). Each paragraph will automatically be wrapped in a <p> tag, so you'll want to accommodate for that in your CSS.

Options

label=''

If you include a label attribute, it will be shown above the text field when the author is editing it. For example, useful labels might be 'Article' or 'Product Details'.

Example Use

• Markup
• In Editor
• Output

<multiline label='Main Feature Intro'>Main feature introduction</multiline>

Above: The code to include in your HTML templates

Above: How your code appears in the editor

<p>Main feature introduction</p>

Above: What the output would be

Image <img editable>

Add the editable attribute to the normal <img> tag and you can remove or replace the image in the editor. Also allows your client to automatically wrap a link around the image and add an alt attribute.

Required

width=''

You need to specify a width (not a % width, but a pixel width) on your <img> tag. Any images wider than the specified width that are uploaded in its place will automatically be proportionally resized to the value set. Images narrower than specified will not be resized at all (the width tag will be updated to match the narrower image size in that case). You should not specify the height, as that can result in distorted images.

Options

label='image title'

If included, this text is shown for the content author when they edit the image. Use it as a guide to the type of image needed. For example label='Hero Image'.

src='image.jpg'

The image source optionally specified in your HTML will be used as the default image and will show up in the final email unless your client removes or replaces it.

Example Use

• Markup
• In Editor
• Output

<img editable src="image.jpg" width="200" label='Hero Image' />

Above: The code to include in your HTML templates

Above: How your code appears in the editor

<a href="http://mydomain.com/page/">
	<img src="image.jpg" width="200" alt="ABC Widgets header">
</a>

Above: What the output would be

Repeater <repeater>

Defines a content block that can be repeated an infinite number of times in the template. Must include either a <singleline>, <multiline>, or <img editable> tag. You can have an unlimited number of repeaters in your template, and each repeater can contain any number of editable single line and multi line elements, as well as editable images. These are usually used for lists of articles or features which can repeat an unknown number of times.

You can use the optional layout element described below to specify as many different designs as you like for content items in this repeating block.

Example Use

• Markup
• In Editor
• Output

<repeater>
 <h2>
  <singleline label="Title" repeatertitle='true' >Title</singleline>
 </h2>
 <multiline label="Article Body" >Enter the full text</multiline>
</repeater>

Above: The code to include in your HTML templates

Above: How your code appears in the editor

<h2>
	<a href="http://mydomain.com/page/">Title</a>
</h2>

<p>Enter the full text</p>

Above: What the output would be

Layout

Repeater layouts are a powerful tool for designers used only within a repeater tag. By specifying one or more layouts inside a repeater block, you can have multiple separate designs inside the one repeating element. A simple example would be having one story layout with a left-aligned image, and another with a right-aligned image. However the layouts can be completely different, and can include any number of editable elements inside them.

You might have a simple text story layout, and a grid of images layout, and a hero-shot layout as three options in the one repeating block. This gives your client flexibility to vary their emails each time according to their needs.

Options

label='layout name'

Each layout can optionally be named using the label='' attribute. Naming layouts makes it simple for your client to know which layout to choose for any given content item. The label will be shown as drop down options in the WYSIWYG editor when they click the 'Add new' button.

Remember that either every layout in a repeater should have a label, or none should. If you don't use labels, then the 'Add new' button does not have a drop down menu, and simply rotates through the available layouts with each click.

Example Use

• Markup
• In Editor
• Output

<repeater>
<layout label='New Feature'>
  <h2>
   <singleline label="Title" repeatertitle='true' >Title of new feature</singleline>
  </h2>
  <multiline label="Description" >Description</multiline>
</layout>

<layout label='Article, tip or resource'>
  <h2>
   <singleline label="Title" repeatertitle='true' >Title of Article</singleline>
  </h2>
  <multiline label="Description" >Description</multiline>
</layout>

<layout label='Gallery Highlights'>
 <img src="gallery.png" width="140" editable label="Image 1"><br />
 <img src="gallery.png" width="140" editable label="Image 2"><br />
 <img src="gallery.png" width="140" editable label="Image 3">
</layout>
</repeater>

Above: The code to include in your HTML templates

Above: How your code appears in the editor

<h2>
	<a href="http://mydomain.com/page/">Title of new feature</a>
</h2>
<p>Description</p>

<h2>
	<a href="http://mydomain.com/page/">Title of Article</a>
</h2>

<p>Description</p>
<img src="widget.png" width="140" alt="Product one"/><br />
<img src="gadget.png" width="140" alt="Product two"/><br />
<img src="gidget.png" width="140" alt="Product three"/>

Above: What the output would be

Table of Contents <tableofcontents>

Creates an automated list of every single line content item that includes the repeatertitle attribute in your template. You must include a <repeatertitle> tag inside the table of contents.

Example Use

<ul>
	<tableofcontents>
		<li>
			<repeatertitle/>
		</li>
	</tableofcontents>
</ul>

<ul>
	<li>
		<a href="#1">This is my first title</a>
	</li>
	<li>
		<a href="#2">This is another title</a>
	</li>
	<li>
		<a href="#3">I like titles</a>
	</li>
</ul>

Repeater Title <repeatertitle/>

Outputs a link to a content item, using the text from each <singleline> element which included the repeatertitle='true' parameter. Used exclusively within the <tableofcontents> tag.

Example Use

<tableofcontents>
	<repeatertitle/>
</tableofcontents>

<a href="#1">This is my first title</a>
<a href="#2">This is another title</a>
<a href="#3">I like titles</a>