All of our email content is made up within section blocks. We've added 20 section blocks to our boilerplate so you can get straight into adding content. Lets focus on one below. In this example we have added a few comments as markers for the tutorial.Boilerplate line 220
<!-- // SECTION BLOCK // --> <!-- TUTORIAL 1 --> <tr> <td align="center" valign="top" class="Section"> <!-- TUTORIAL 2 --> <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center"> <tr> <!-- // CONTENT CONTAINER // --> <!-- TUTORIAL 3 --> <td class="Section1padding" align="center"> <!-- TUTORIAL 4 --> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <!-- TUTORIAL 5 --> <td align="left" valign="top" class="Section1Content Responsive"> Email content </td> </tr> </table> </td> <!-- // CONTENT CONTAINER // --> </tr> </table> </td> </tr> <!-- // SECTION BLOCK END // -->
Every section block is a row stacked on top of each other. Inside the row is a cell with the class "Section"; leave this as it is, it's there to work with our responsive code.
Open the outer table
This table serves three purposes:
- Defines the width of the email block. Make this consistent with all email blocks unless you want some funky varied width email. Define this in width and style.
- The class "SectionBlock" also serves responsive purposes, don't edit!
- Define a background colour for the entire block.
Define vertical padding
Within our outer table is a
<td>element. This td's particular ID is "Section1padding". Each section is numbered so you know what area you are editing in CSS. The purpose of this is to edit the padding top and bottom of this element to space each block vertically from the one above/below it.
Now we have built our block container, it is time to add the table that holds our content. There's no need to edit any properties of the table or the table row beneath it. Customisation comes in the next step.
Columns and Content
Its time to start adding your email content! Within the very last child
<td>element below is where all email content lives. This is everything from text and images to buttons and gifs. Your email content does not belong anywhere else!
Think of each
<td>as a column in your email. Want to add another column? Just add another
Change the align property to align your content left, center or right of the column. Change the valign property to vertically align content top, middle or bottom of the column. The prenamed Class "Section1Content" is there ready for you to apply styles to the column, such as padding and background colour. The Class "Responsive" should be applied to every column you want to stack vertically when the responsive media queries are triggered.
If you need an exact width to your colum, add the width property to the
<td>as well as defining the width as a style. Otherwise the width of the column will automatically be calculated by its containing content, which in most cases works fine.