Full-width rows in templates

Summary

Our templates feature full-width rows. This allows you to have sections of your email that have different coloured backgrounds spanning the entire width of your campaign.

Additionally, it is also possible to have full-width images spanning the entire width of the campaign too, but note that this technique can't be achieved in Microsoft Outlook. With Outlook, we fall back to a wide (but not full-width) version of the image.

Full-width sections

The best place to start is with one of our basic 'Start from scratch' templates. You will see that they have a full-width row. If you edit the source of the campaign, look for these markers:

<!-- EMAIL BODY : START -->
<!-- EMAIL BODY : END -->

This is a full-width row. You can add more full-width rows before or after the existing full-width rows.

Warning

Don't paste a full-width row inside another full-width row or the layout of your campaign will break.

General structure of a full-width row

The full-width rows have three nested table structures:

table class="email-body"
  table class="email-width"
    table (row container)
      div ee_dropzone

The outer email-body table is the full-width table. Any background styles applied here will stretch across the entire campaign.

The email-width table is the fixed width section of the email. By default, our campaigns are 660 pixels wide, and that width is applied to this table.

The row container table contains all the rows (usually just one, but this can be more). Within EasyEditor, most of our own templates contain just one row, and this row contains an EasyEditor dropzone. It's here that users can drag and drop in new building blocks.

Outlook conditional comments

Note also that the email-width table and the row container table are wrapped with further tables that are only rendered in Microsoft Outlook.

Without these conditional tables, your email will not render correctly in Microsoft Outlook.

Background images

It's certainly possible to include background images on your full-width rows, but please note that this will not work in Microsoft Outlook or Outlook.com.

Also note that some of the more modern CSS mechanisms for display backgrounds, such as background-size, have limited support among email clients.

Full-width images

To create a full-width image, you can insert the following code (from one of our free templates) before or after another full-width section (before or after the <!-- EMAIL BODY : START --> or <!-- EMAIL BODY : END --> markers):

<!-- Full-width Banner Image : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="background-color: #3a3a3a;table-layout: auto;" class="banner">
<tbody>
<tr>
<td class="banner-padding text-center" style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/2/3/7/1/8/files/7528691_banner.png" style="display: block; width: 100%; height: auto;" alt="New season" border="0" class="banner banner-img ee_editable ee_noresize vedpw800" width="800"></td>
</tr>
</tbody>
</table>
<!-- Full-width Banner Image : END -->

This will insert a full-width image into your campaign.

You can change the image in EasyEditor by either dragging a new image from your image library onto the existing full-width image, or by clicking the full-width image and then clicking on a new image in your library.

Some things to note about full-width images:

  • You need to make sure you upload your original images with a good horizontal resolution, otherwise your image may look pixelated on certain displays
  • In Microsoft Outlook, the above will display as an 800px-wide image, centralised with the rest of your campaign
  • If you don't want the image to be editable in EasyEditor, remove the ee_editable class from the <img> tag.
Have more questions? Submit a request

Comments

Powered by Zendesk