The way to Customise an E-mail Advertising and marketing Template

In the present day, we’re diving into templates and use them with Twilio SendGrid’s versatile editor or alter the HTML of the template in your e mail builder of alternative. Whereas some entrepreneurs could really feel snug designing and coding a wonderful 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 superbly responsive emails.

On this submit, 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

When you’re beginning in Advertising and marketing Campaigns, you will have quite a lot of template choices. However earlier than you select a template, ask your self:

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

Does this motion require a proof with quite a lot of textual content and a CTA, or are you making an attempt to visually show your merchandise with a number of photos? Maintain an eye fixed out for construction and a format that may work nicely together with your content material.

Is your model daring and loud, elegant and quaint, fashionable and glossy? 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 (obtainable 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 suits the general really feel of the model and the a number of photos and sections of copy work nicely for the content material I plan to ship.

Customizing in your model 

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

Step 1: Header

I began by putting 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. Guaranteeing that what they see once they open your e mail is acquainted and anticipated is crucial to sustaining that belief.

• • Width: The width of the header must be not less than 600 pixels in order that it stretches the total width of the e-mail.
  • Alignment: Most firms both align their header to the left or middle it.
  • HTML: To vary the brand 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: Photographs

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

The primary picture in my e mail pertains to the copy and receiving a vacation reward. Photographs that characteristic individuals 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 sources for locating nice photos.  

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

• Embody alt textual content:  Some ESPs disguise photos in emails. Together with alt textual content helps recipients perceive the concept behind the picture even when they’ll’t see it.
• Hyperlink photos: We anticipate the whole lot 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 measurement: Identical to the header, ensure that the width of the photographs is not less than 600 pixels.  
• HTML: Just like your brand picture, search for the img class and src attribute when switching out the photographs 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, embody the href attribute inside the img class tag.

Step 3: Font

Advertising and marketing Campaigns permits customers to import fonts so that you just don’t should sacrifice model requirements in your emails. You possibly can add in your font by enhancing the HTML head (discovered underneath “Superior” within the left navigation). Listed here 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 normal default font similar to Arial, Occasions New Roman, or Verdana. Choose one which matches your web site as carefully 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 aim 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. This is the reason 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 aim 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 not less than 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 brand.

• • E-mail background: When you peruse your inbox, you’ll discover that a lot of the emails have a white or impartial background coloration, and, often, black. We suggest sticking to a kind of colours for the backdrop of your e mail. Vibrant or daring colours can really feel overwhelming and distract your recipients from the precise content material of the e-mail. To the fitting, 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 ingredient of your e mail. They need to seize consideration and inspire a recipient to take motion.
  • HTML: To vary 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 possible that your template can have a number of attributes for a similar coloration to have the ability to talk the colour to all e mail suppliers. Remember to change all sections that checklist the colour. Take a look at this instance of the CTA button design and code. 

Step 6: Check!

After getting your e mail arrange, check it by sending a preview to your self. Right here are some things to examine in your preview:

• Is it cell responsive? Assessment your e mail in your desktop and telephone to double examine that the e-mail is cell responsive.
• Do all of the hyperlinks work? Click on by way of all of the hyperlinks and linked photos. Examine that the CTA buttons are large enough 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 way of in your e mail.

In Advertising and marketing Campaigns, you can too A/B check totally different components (see picture under), and see if a plain textual content hyperlink helps have interaction extra clicks than a colourful CTA button. This will provide you with knowledge to again up your design selections for future sends. For a full checklist of things to evaluation earlier than sending your e mail, look by way of Your Pre-send E-mail Testing Guidelines.

Prebuilt templates are a fantastic time-saving resolution for these of us who aren’t e mail design and improvement specialists. It’s simple to customise these templates to replicate your organization’s model and message while not having to get into the weeds of the e-mail HTML.

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