Header and Footer
How to add a Header and Footer to an Email Newsletter Template.
Adding a header and/or footer to an email newsletter template is not difficult.
Just locate the "content" table and add a header/footer cell.
All samples
and many more templates are included in MailList Controller.
Template Tutorial Download Free Version
Locate the Content Table
All templates shipped with MailList Controller contain
a table using the class "container".
Some templates already contain a header or footer, others don't.
Click
on "HTML Source" in the internal editor to access the template
source code.
<!-- background table -->
<table id="bgtable" align="center"
border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td
align="center" valign="top">
<!--
container 600px -->
<table border="0" cellpadding="0" cellspacing="0"
class="container" width="600" style="...">
<tr>
<td
align="left" style="padding: 16px;">
<p>
... Content ... </p>
</td>
</tr>
</table>
<!--
container 600px -->
</td>
</tr>
</table>
<!--
background table -->
...
Add the Header and Footer Cell
Add the header cell "above" the
content and the footer below. You can also apply multiple
header or footer cells, e.g. for a disclaimer or how to unsubscribe.
The following sample code contains a
header and
footer:
<!-- background table -->
<table id="bgtable" align="center"
border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td
align="center" valign="top">
<!--
container 600px -->
<table
border="0" cellpadding="0" cellspacing="0" class="container" width="600"
style="...">
<!--
HEADER -->
<tr>
<td
align="left">
... Header ...
</td>
</tr>
<!--
CONTENT -->
<tr>
<td
align="left">
... Content ...
</td>
</tr>
<!--
FOOTER -->
<tr>
<td
align="left">
... Footer ...
</td>
</tr>
</table>
<!--
container 600px -->
</td>
</tr>
</table>
<!--
background table -->
...
For static (non-responsive) templates with multiple columns use:
<td colspan="number">Header/Footer</td>
e.g.
<td colspan="2">Header/Footer spans 2 columns</td>
<td
colspan="3">Header/Footer spans 3 columns</td>
"number" specifies the number of columns a cell should span.
Apply Custom Styles to Header or Footer Cell
You can either format the text directly using the internal editor or
edit the source code to apply custom styles.
Please take a look at
How to design HTML email
newsletter templates for basics.
...
<td style="font-family: Arial, Helvetica, sans-serif; font-size:
16px; line-height: normal;">Header/Footer</td>
...