Menu
 

Customizing Layouts

Now that you know how Layouts work and how to add them, you likely want to customize them!

Our Layout Starters are built using a framework called Foundation for Emails. We did this to make sure they’re as solid as possible for you across clients, while also enabling you to customize them.

Choosing a Layout Starter

First thing’s first! When you click to Create Layout from the Email & Layouts area of the app, you’ll get a choice of starters. Choose the arrangement that works best for you:

Once you choose and name your Layout, you’ll be able to customise it:

Find your way with code comments

Because email code can be overwhelming sometimes, we’ve added comments in the code to help you find the various areas to customize. In HTML, comments look like this:

<!-- This is an HTML comment: it doesn't affect the code! -->

And CSS comments, like this:

/* ..and this is a CSS comment. It doesn't affect the code either, but it helps us annotate it! */

We’ve added it in the Layouts code to help you find your way around; you can remove the comments whenever you need to. Below, we’ll show you which comments to look for to easily customise things like logo and background, as well as add columns.

One piece of code that you should not remove is our link to Foundation! Doing so will break the Layout you remove it from! That piece of code looks like this:

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.min.css" rel="stylesheet">

How-to’s

Adding your company information

There are a few spots where we’ve left space for you to add copyright information for your company, as well as your address. They look like this:

© 2017 [[YOUR COMPANY NAME HERE]]

and:

[[YOUR ADDRESS HERE]]

We haven’t pre-filled them, so go ahead and add your company name and address.

The logo is defined in a block of code that looks like this:

<!-- To add your logo image, modify the src here. -->
<img src="https://s3.amazonaws.com/fast.customer.io/email-templates/logo.png" align="center" class="float-center">


Just change the URL in src="" to your logo image, and that’s it!

In the Menu Layout Starter, for example, there is a set of links at the top:

You’ll obviously want to add your own. To do this, search out the following:

<!-- make sure to add correct titles and links for all your menu items! -->
<th class="menu-item float-center"><a href="#">Account</a></th>
<th class="menu-item float-center"><a href="#">Shop</a></th>
<th class="menu-item float-center"><a href="#">Invite</a></th>
<th class="menu-item float-center"><a href="#">My Cart</a></th>


This is where you can add or remove the links themselves and customise the text. So if I replaced the above with this code…

<th class="menu-item float-center"><a href="http://example.com/products/new-releases">New Releases</a></th>
<th class="menu-item float-center"><a href="http://example.com/products/anvils">Anvils</a></th>
<th class="menu-item float-center"><a href="http://example.com/products/rollerskates">Rollerskates</a></th>
<th class="menu-item float-center"><a href="http://example.com/products/bird-seed">Bird Seed</a></th>
<th class="menu-item float-center"><a href="http://example.com/products/cement">Cement</a></th>


…I’d get…

Change the typeface

Right now, we use Helvetica Neue as the default. If you want to change it, no problem! Locate this comment:

/* Replace all instances of "Helvetica Neue" with font of your choice */

And the following CSS:

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

What you can change this to depends on the email client you want to support. Some fonts have more support than others.

Safe Fonts

The safest typefaces to use are Arial, Verdana, Georgia, Times New Roman, and Courier: these are universally supported. In the above example, we use Arial as a fallback for when Helvetica doesn’t display.

Web fonts!

Web fonts, acquired through services like Google Fonts or MyFonts, can allow a lot more creativity in your typeface use! They’re not 100% supported, but for the most part, web fonts will work in:

  • iOS Mail
  • Apple Mail
  • Android (the mail client, not the Gmail app)
  • Outlook 2000 and the Outlook.com app
  • Thunderbird

If that’s enough, though, you can head over to Google Fonts (or similar) and choose a font that you’d like to use. Google will give you a URL like this one:

<link href="https://fonts.googleapis.com/css?family=Modak" rel="stylesheet">

Add it to the top of your Layouts code, under Foundation:

Then, find the instances of /* Replace all instances of "Helvetica Neue" with font of your choice */, and replace it with your new font declaration:

font-family: "Modak", Arial, sans-serif;

You can see that I’ve chosen Arial as a fallback again, but you can choose whatever safe font you like! If you click the Preview tab, you should be able to check out your new font choice, along with any other changes you’ve made. Here’s an example in the Announcement Starter where I’ve added a logo also:

Web fonts can be a bit tricky, so tread carefully! There’s a more comprehensive guide to webfont use in email by Campaign Monitor here.

Adding and customizing a button

Here’s the code for a button that works in all email clients:

<table class="button">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>


It needs to be in a table, but that’s one of the difficulties of ensuring that it behaves the way you expect across all clients. The above code should be added …to your email’s content, in the composer:

Customizing that button

You can use Foundation’s Button docs as reference here, but we’ve got a couple of examples.

To change its size, just add a class of tiny, small, or large. Here’s a large button:

To change its color, add the classes secondary, success, warning, or alert, like this:

Want to define your own color? You’ll need to return to the Layout editor to do that, but here’s how:

First, add your own class. In this example, I’ve used acme-primary

<table class="button acme-primary">
  <tr>
    <td>
      <table>
        <tr>
          <td><a href="#">Success Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>


Then, in your Layout, add this code in the Foundation Overrides area of the styles. Just tell us what colour you want that button to be:

table.button.acme-primary table td {
    background: #YOURCOLOR;
    border: 0px solid #YOURCOLOR;
}
table.button.acme-primary table a {
    border: 0px solid #YOURCOLOR;
}


So if my color was #A30000, this is how that button turns out in the composer:

There is a bit of jumping back and forth here, but the underlying code is simple! If you need a hand, let us know.

On small screens, the navigation in our Menu Starter will stack. Here’s an example from an iPhone 6:

If you’d rather they be horizontal, find the menu in the code…

<table class="menu main-menu small-vertical"><tr><td><table><tr>
	<!-- make sure to add correct titles and links for all your menu items! -->
	<th class="menu-item float-center"><a href="#">Account</a></th>
	<th class="menu-item float-center"><a href="#">Shop</a></th>
	<th class="menu-item float-center"><a href="#">Invite</a></th>
	<th class="menu-item float-center"><a href="#">My Cart</a></th>
</tr></table></td></tr></table>


…and just remove the .small-vertical class!

Adding columns

Quite often, you want your emails to have multiple columns, or a grid. No problem— those things are fairly straightforward to add!

We recommend that you do this in your email’s content, rather than in the Layout itself. This is because you’ll likely want the content within that grid to be dynamic, so it should live in your message composer! Here’s an example:

We use Foundation’s Grid syntax to write our HTML. What this means is that column code looks like the following, with the small-12 and large-6 classes identifying the size of the column. The grid is divided by 12, so a two-column grid is made up of two large-6 columns:

<th class="small-12 large-6 columns first">
  <table>
    <tr>
      <th>One</th>
    </tr>
  </table>
</th>
<th class="small-12 large-6 columns last">
  <table>
    <tr>
      <th>Three</th>
    </tr>
  </table>
</th>


And that looks like this in the Composer:

Another example, with three columns! The code:

<th class="small-12 large-4 columns first">
  <table>
    <tr>
      <th>To the left</th>
    </tr>
  </table>
</th>
<th class="small-12 large-4 columns">
  <table>
    <tr>
      <th>In the middle</th>
    </tr>
  </table>
</th>
<th class="small-12 large-4 columns last">
  <table>
    <tr>
      <th>To the right!</th>
    </tr>
  </table>
</th>


And in the composer…

in the Layout

If you’d like to make more complex grid-based changes, you can definitely do that. It just requires a little more code wrangling, so tread carefully! This is the code you’ll need to replace:

<th class="small-12 large-12 columns first"><table><tr><th>
  <table class="wrapper" align="center"><tr><td class="wrapper-inner">
    <!-- We'll replace this content tag with whatever you write in your email -->
   {{content}}
  </td></tr></table>
</th>


So for example, if I wanted a two-column grid with a static sidebar, this is what that code would change to:

<th class="small-12 large-6 columns first"><table><tr><th>
  <table class="wrapper" align="center"><tr><td class="wrapper-inner">
    Static sidebar content!
  </td></tr></table>
</th>
<th class="small-12 large-6 columns last"><table><tr><th>
  <table class="wrapper" align="center"><tr><td class="wrapper-inner">
    <!-- We'll replace this content tag with whatever you write in your email -->
    {{content}}
  </td></tr></table>
</th>


Remember that the content in the left bar here will be editable in the Layout only; you cannot edit it in your emails.