At the moment, we’re diving into templates and find out how to use them with Twilio SendGrid’s versatile editor or alter the HTML of the template in your e mail builder of selection. Whereas some entrepreneurs might really feel comfy designing and coding a good looking e mail from scratch, for these of us who aren’t net designers or e mail builders, e mail templates present a robust, time-saving method to craft fantastically responsive emails.

On this put up, I’ll stroll you thru how to decide on a pre-built e mail template and the design selections I make alongside the way in which.

Selecting an e mail advertising and marketing template

For those who’re beginning in Advertising Campaigns, you’ve got a wide range of template choices. However earlier than you select a template, ask your self:

What is the aim of the e-mail you intend to ship and the motion you need your recipients to take?

Does this motion require a proof with a variety of textual content and a CTA, or are you making an attempt to visually show your merchandise with a number of photos? Hold a watch out for construction and a format that may work effectively together with your content material.

Is your model daring and loud, elegant and quaint, fashionable and smooth? It’s useful to discover a template that resembles your model. Whilst you can change photos, textual content, and colours to match your model, it helps to have a template that aligns with the type you’re trying to obtain.

I selected the Ingrid and Anders Welcome Collection 2 template on the left (accessible to obtain right here) as a result of I plan to ship a promotional e mail from a jewellery retailer.

Whereas the colours and pictures don’t signify the jewellery retailer’s model, the boutique look matches the general really feel of the model and the a number of photos and sections of copy work effectively for the content material I plan to ship.

Customizing on your model

Right here’s my step-by-step method for getting from the template above to the e-mail preview on the best whereas retaining the model, message, and desired motion in thoughts alongside the way in which.

Step 1: Header

I began by inserting the jewellery retailer’s brand within the header. Your e mail recipients have proven that they belief and are eager about a relationship together with your model. Making certain that what they see after they open your e mail is acquainted and anticipated is essential to sustaining that belief.

- Width: The width of the header must be at the least 600 pixels in order that it stretches the complete width of the e-mail.
- Alignment: Most firms both align their header to the left or middle it.
- HTML: To alter the emblem in HTML, swap the hyperlink within the img class attribute. The hyperlink ought to be positioned within the src attribute (see under). Don’t neglect to incorporate the citation marks across the hyperlink.

Step 2: Photos

Select photos that relate to the copy and your model. Jewellery is such a visible product, so I wished the pictures to take up rather more of the e-mail than the copy.

The primary picture in my e mail pertains to the copy and receiving a vacation reward. Photos that function folks assist recipients emotionally join with the content material. The second picture highlights a particular jewellery providing to assist drive guests to the web site. I discovered these photos on iStock, however there are many different assets for locating nice photos.

When together with photos in your e mail bear in mind to:

Embrace alt textual content: Some ESPs cover photos in emails. Together with alt textual content helps recipients perceive the thought behind the picture even when they will’t see it.
Hyperlink photos: We count on all the pieces to be clickable, together with photos. On this e mail, the image of the diamond earrings, particularly, must be clickable to the outline of this product on the web site.
Picture dimension: Identical to the header, be sure the width of the pictures is at the least 600 pixels.
HTML: Much like your brand picture, search for the img class and src attribute when switching out the pictures within the template. To incorporate alt textual content, add the alt attribute to the img class and describe your picture. So as to add a hyperlink to your picture, embrace the href attribute inside the img class tag.

Step 3: Font

Advertising Campaigns permits customers to import fonts so that you simply don’t must sacrifice model requirements in your emails. You may add in your font by enhancing the HTML head (discovered underneath “Superior” within the left navigation). Listed below are the step-by-step directions on including a font.

Some ESPs solely assist a handful of fonts, so it’s a good suggestion to decide on a typical default font similar to Arial, Occasions New Roman, or Verdana. Choose one which matches your web site as intently as attainable. This fashion in case your model’s font isn’t supported, you’ll have a backup able to go.

Step 4: Copy

For this text, my objective is to get the recipient to the web site both to create a wishlist or to buy, so I don’t need them staying within the e mail too lengthy. Because of this my copy is brief and to the purpose, main on to the call-to-action buttons.

When writing your e mail, circle again to the objective of your message, and ask your self, what motion would you like your recipients to take?

Step 5: Colours

Align your emails to your model through the use of related colours to your web site. Your emails don’t have to look precisely like your web site, however strive pulling in at the least one or two colours into your e mail to tie in your model. For this e mail, I modified the font coloration to be the identical as the web site and included photos which have a touch of gold to match the emblem.

- E mail background: For those who peruse your inbox, you’ll discover that a lot of the emails have a white or impartial background coloration, and, sometimes, black. We advocate sticking to a type of colours for the backdrop of your e mail. Shiny or daring colours can really feel overwhelming and distract your recipients from the precise content material of the e-mail. To the best, are the colours I used for this e mail’s background and textual content.
- Footer: A good way to align your e mail together with your model is to make use of the identical footer background coloration and font coloration as your web site. This helps create continuity between your emails and your web site.
- CTA Buttons: These buttons are sometimes the brightest and boldest factor of your e mail. They need to seize consideration and inspire a recipient to take motion.
- HTML: To alter the colour of backgrounds, borders, or fonts in HTML, search for the 6-digit, Hex coloration. You’ll discover the hex code in components and attributes like type, span type, background-color, bgcolor, coloration, and border-color. It’s seemingly that your template may have a number of attributes for a similar coloration to have the ability to talk the colour to all e mail suppliers. Make sure to change all sections that listing the colour. Take a look at this instance of the CTA button design and code.

Step 6: Check!

Upon getting your e mail arrange, take a look at it by sending a preview to your self. Right here are some things to test in your preview:

Is it cell responsive? Overview your e mail in your desktop and telephone to double test that the e-mail is cell responsive.
Do all of the hyperlinks work? Click on by means of all of the hyperlinks and linked photos. Examine that the CTA buttons are sufficiently big to click on together with your finger.
Is your model recognizable? Evaluate your e mail and your web site side-by-side. Your model ought to shine by means of in your e mail.

In Advertising Campaigns, it’s also possible to A/B take a look at totally different components (see picture under), and see if a plain textual content hyperlink helps interact extra clicks than a colourful CTA button. This gives you knowledge to again up your design selections for future sends. For a full listing of things to overview earlier than sending your e mail, look by means of Your Pre-send E mail Testing Guidelines.

Prebuilt templates are an amazing time-saving answer for these of us who aren’t e mail design and growth specialists. It’s straightforward to customise these templates to replicate your organization’s model and message without having to get into the weeds of the e-mail HTML.

For dozens of customizable, responsive templates join a free Advertising Campaigns account.