- 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 Know
We'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 Templates
You'll be usingdiv
tags 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:
div
tag 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 div
tags before messages are sent.
Attributes
Each template-specificdiv
tag can have the following six attributes:
block
- Theblock
attribute is required to make an editable block. Anydiv
tag 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 useblock="1"
as it's block attribute, and the next editable block would useblock="2"
.key
- Eachblock
tag 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.key
attributes 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.linked
-linked
is an optional attribute that you can use to create linked template blocks. For all blocks that you wish to link, set thelinked
attribute to the same value. For example,linked="1"
. By doing so, all blocks with the samekey
attribute that are set tolinked="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.name
- Thename
attribute 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 thename
attribute, then the key value will display in the template editor.description
- Thedescription
attribute 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"
.display
- Thedisplay
attribute 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 areplain
,plainlarge
,rich
,image
, andlink
:plain
will load a one line input box.plainlarge
will load a multi-line text area.rich
will load the standard WYSIWYG editor.image
will 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.link
allows the user to enter the URL for ana href=""
. For example, the display attribute may appear as:display="rich"
Main Header can be placed here.
Repeatable Sections
Repeatable 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 Sections
To specify a repeatable section, add the section attribute to thediv
or span
tags 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
div
tags or block-level elements, such as p
or table
. You cannot use sections to add columns or rows to a table.
Using Repeatable Sections
Repeatable 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 Code
Below, 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
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Visit Widgets.com! | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
%%!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.
John Gunther
Technical Writer/eLearning Specialist at Bronto Editor of Brontoversity