When you’re setting up a new SendGrid account, creating a set of email templates for your account is one of the most important tasks to complete. If you’re planning on sending email via our API for your app or service, you will most likely need several different types of email templates. Some of the most common are password resets, email confirmations, and receipts.
While there is a vast selection of pre-made email templates out on the web, finding a set that is easy to customize to match your brand isn’t always easy.
It’s also important to thoroughly test the templates in common email clients. This process can be time-consuming and slow down the process of setting up your SendGrid account and starting to send emails.
I realized the team at SendGrid could provide value to our customers by creating an open source set of email templates that users could leverage to cover these common use cases. Not only are the templates easy to customize, but you’ll be up and sending quickly!
Our set of templates, which we are calling "Paste," covers 5 use cases:
To get started with our Paste templates, head over to GitHub and clone the repository or download the Paste templates folder. It’s also worth mentioning that these templates live in an open source repository of email templates that other SendGrid users have helped contribute to during our latest Hacktoberfest.
Once you have a local copy of the Paste templates, open them in your preferred code editor (I’d recommend VSCode or Atom; they’re both free).
I’d recommend starting with base.html as it contains most of the reusable components found in many of the other templates. These templates all share a common structure for the HTML, and while there are a few base styles in the document, a majority of the styles are found inline.
As you comb through the HTML, you’ll notice a lot of HTML comments to indicate where blocks start and end. These are important notes that will help as you scan through the templates and begin to modify them.
You’ll also notice styles on HTML elements for background colors, typography, spacing, etc. I’d encourage you to experiment with them to get sense of how they change the look and feel of these templates.
One of the first things you’ll want to do is replace the Paste templates logo with your own. You can quickly find the logo block by searching for its HTML comment, indicating it’s starting place:
Within this block, you’ll want to locate the anchor tag (<a>) and change the HREF to your URL. The template should be linked to SendGrid’s homepage by default.
After adjusting the URL, let’s replace the Paste logo with your own. I’d recommend having your logo stored somewhere you can easily link to, such as your webserver or a CDN. Once you’ve replaced the logo src, adjust the inline styles so the width/height is correct—this will be dependent on the aspect ratio of your logo. By default, the Paste logo is 48px square, so we’ve set width styles to 48px.
Example:
In this example, the Paste logo URL is referenced along with some width styles to set it to it’s desired size of 48px. Adjust these values for your own logo to make sure it looks sharp.
As mentioned above, background color is set on a variety of blocks to establish the default style of the Paste templates (greys and whites). You can easily change this (and you should) to match your brand colors.
The easiest way to jump between these styles is to use your editor to search for the inline styles, bgcolor and background color. The value of these properties can be replaced with hex values (e.g. #000000) or color names (e.g. black). As you work through these changes, it’s easy to keep a tab on things if you open one of the templates in your preferred browser and refresh as you make changes.
Example:
In this example, the body tag is styled with a light grey background color. This color value and others within the template should be customized to match your brand.
Buttons are one of the most common interface components in email templates. You’ll use these as a call to action, highlighting the most important action you want a user to perform, such as confirming their email address.
By default, Paste’s buttons are styled as blue blocks with a subtle border-radius to round the corners. Customizing these buttons to match your brand is similar to the modifications we’ve already made to the background color of our template. Search for the block using the HTML comment we’ve added in for you:
We have several table cells that have white backgrounds applied (#ffffff) to create the block around the button, but you’ll want to find the table cell that has following styles below.
Example:
In this example, the <td> has a bgcolor that is used to set the color of the button, along with a border-radius to subtly round the corners. Experiment with these styles to achieve a unique look for your buttons that match your brand.
The second part of our button is the anchor (<a>) within the table cell shown above.
This anchor controls the URL where your button will go when clicked, but also the text styles for the label. You can adjust the styles to adjust the label based on your preferences and what matches your brand.
By default, the Paste templates load in the webfont, Source Sans Pro, via Google Fonts. You can use a different webfont from Google’s collection, or use the standard set of fonts found on most computers these days (Arial, Georgia, Times, etc).
If you’re planning on using a different webfont, check out my email development tips and tricks post for some helpful pointers. Make sure that you comb through the HTML for any inline styles that reference the font-family and adjust based on your preferences.
Example:
In this example, the <td> has a font-family style set to use Source Sans Pro, with some fall backs to more standard fonts in the case the webfont doesn’t load.
I hope that these pointers help you customize these templates to fit your brand and get you up and running on SendGrid’s platform. In the future, I hope to expand our email templates repository with more templates, but also a build tool that will make the customization process much quicker.
If you run into any issues along the way, please submit an issue against the GitHub repo, and if you’d like to contribute, please submit a pull request. Looking for more templates to experiment with? Try out SendGrid's free responsive HTML email templates.
