- Use table based layouts instead of CSS based.
- Use inline CSS to provide a default style for your content.
- Optimize images for the web.
- Less is more. Keeping your layouts simple will help to reduce rendering problems.
- All templates MUST be XHTML compliant.
Terms You Need To KnowWe'll begin by taking a look at some common terms you'll see throughout this post.
- Block - Blocks are editable regions in your template. For example, the logo, article header, and article content may all be editable blocks.
- Attribute - Attributes define the specifics of a block, such as the font style or appearance of content placed into the block.
- Section - Sections are areas in the template that the user can clone in order to extend the template to accommodate additional content. Sections can contain one or more blocks.
Coding TemplatesYou'll be using
divtags to create template blocks. Attributes can be added to these tags to define the block, and also how the end-user will supply content for the block. Thus, a template-specific tag would take the following form:
divtag not XHTML-compliant. However, this doesn't affect the XHTML compliance of any messages based on templates since the end user's content would replace the extended
divtags before messages are sent.
divtag can have the following six attributes:
blockattribute is required to make an editable block. Any
divtag that does not have this attribute will not be editable. Set the block attribute to a number to create an editable block. A good way of keeping track of your editable blocks is to assign them sequential numbers. For example the first editable block of your template would use
block="1"as it's block attribute, and the next editable block would use
blocktag has its own unique key, a simple word that enables the template system to differentiate one block from another. This attribute is also required for all editable blocks.
keyattributes may only contain letters, numbers and underscores. No spaces are allowed. Also, it is recommended to keep the id in lowercase in order to ensure that the template is as transferable as possible. Here is an example of this attribute:
key="heading_1". The keys should follow a consistent naming convention.
linkedis an optional attribute that you can use to create linked template blocks. For all blocks that you wish to link, set the
linkedattribute to the same value. For example,
linked="1". By doing so, all blocks with the same
keyattribute that are set to
linked="1"will change to reflect the same content when one of them is edited. This attribute is useful for repeated content within the template, such as a date or section headings included in both the message table of contents and the message body.
nameattribute is an optional attribute that determines the label the end-user will see when editing a template. Here is an example:
name="Title". If you do not set the
nameattribute, then the key value will display in the template editor.
descriptionattribute is an optional attribute that determines the label that the end-user will see below the block name when editing a template. Here is an example:
description="The title of your newsletter".
displayattribute is another required attribute. It determines the type of form control used by the end user when composing a message based on the template. Available display types are
plainwill load a one line input box.
plainlargewill load a multi-line text area.
richwill load the standard WYSIWYG editor.
imagewill allow for the selection of an image. The user can browse and select images stored in the hosting area, or specify the URL of the desired image. Also, the user can specify a URL to go when that image is clicked, a border for the image, alt tag text, and horizontal and vertical padding for the image. You'll want to make sure to use a border size of "0" if you apply a URL to an image, otherwise you'll get an unattractive blue border.
linkallows the user to enter the URL for an
a href="". For example, the display attribute may appear as:
Repeatable SectionsRepeatable Sections are areas in the template that can be cloned in order to extend the template to accommodate additional content. For example, a newsletter template may be coded to have a repeatable section containing a section header and a section body, with each header/body section designed to represent an "article" for the newsletter. This type of design would allow the end-user to clone the section as many times as necessary to accommodate the story sections intended for the newsletter.
Coding Repeatable SectionsTo specify a repeatable section, add the section attribute to the
spantags that wrap the template blocks you wish to group in the section. For example:
This example would repeat the logo section and body and allow you to place different content into each repeatable section. You can have more than one repeatable section in a template. Sections can only be wrapped around other
divtags or block-level elements, such as
table. You cannot use sections to add columns or rows to a table.
Using Repeatable SectionsRepeatable sections are denoted in the template UI with a dotted red outline and a green "add" icon in the upper-right corner that allows the user to clone the section. After cloning a section, a new section will appear that displays the default section content. You will be able to add new content to this section. Also, you can reorder or delete the cloned sections by using the "up", "down", and "delete" icons which are described in the Using The Template Editor section of this document.
Example CodeBelow, you will find an example of a completely coded custom template. You can copy and paste this example code and use it as a reference for creating your own custom template. You could also see what this example custom template looks like by copying and pasting the code into a text editor or HTML editor, saving the file as an HTML file, and then opening the HTML file in a browser. Additionally, the screen shot at the top of this post shows what the example template code actually looks like. To copy the example code, scroll to the top of the code example and move your cursor over the top right side of the code example.
Example Template Design
|%%!account_address%% %%!account_telephone%% Unsubscribe | Manage Preferences | Forward to a Friend|
Upload And Go
After the web page is designed and coded, add the template tags as described below to define which sections of the template will be editable. The final step is to upload the template and all related images. To begin uploading a template, go to Content->Templates and click Upload Template. Below is a screenshot of what the template will look like to someone using in your account. Designing your own templates can open the door to a lot of innovative and creative design options. If you have any questions or need some advice, feel free to leave a comment below.
Technical Writer/eLearning Specialist at Bronto Editor of Brontoversity