How you can Customise an Electronic mail Advertising and marketing Template

At present, we’re diving into templates and use them with Twilio SendGrid’s versatile editor or alter the HTML of the template in your electronic mail builder of alternative. Whereas some entrepreneurs could really feel comfy designing and coding a good looking electronic mail from scratch, for these of us who aren’t internet designers or electronic mail builders, electronic mail templates present a robust, time-saving approach to craft superbly responsive emails.

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

Selecting an electronic mail advertising template

In the event you’re beginning in Advertising and marketing Campaigns, you’ve gotten 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 intend to ship and the motion you need your recipients to take?

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

Is your model daring and loud, stylish and quaint, fashionable and glossy? It’s useful to discover a template that resembles your model. When 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 Sequence 2 template on the left (accessible to obtain right here) as a result of I plan to ship a promotional electronic mail from a jewellery retailer.

Whereas the colours and pictures don’t characterize 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 properly for the content material I plan to ship.

Customizing to your model 

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

Step 1: Header

I began by inserting the jewellery retailer’s emblem within the header. Your electronic mail recipients have proven that they belief and are desirous about a relationship along with your model. Guaranteeing that what they see after they open your electronic mail is acquainted and anticipated is essential to sustaining that belief.

• • Width: The width of the header must be at the very least 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 heart it.
  • HTML: To alter the emblem in HTML, swap the hyperlink within the img class attribute. The hyperlink needs to be positioned within the src attribute (see under). Don’t overlook 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 photographs to take up way more of the e-mail than the copy.

The primary picture in my electronic mail pertains to the copy and receiving a vacation reward. Photos 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 electronic mail bear in mind to: 

• Embody 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 every part to be clickable, together with photos. On this electronic mail, the image of the diamond earrings, particularly, must be clickable to the outline of this product on the web site.
• Picture dimension: Similar to the header, make sure that the width of the photographs is at the very least 600 pixels.  
• HTML: Much like your emblem 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 need to sacrifice model requirements in your emails. You may add in your font by modifying the HTML head (discovered below “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 an ordinary default font akin to Arial, Instances New Roman, or Verdana. Choose one which matches your web site as carefully as doable. This fashion in case your model’s font isn’t supported, you’ll have a backup able to go.

Step 4: Copy

For this article, my purpose 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 electronic mail too lengthy. For this reason my copy is brief and to the purpose, main on to the call-to-action buttons.

• When writing your electronic mail, circle again to the purpose 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 by utilizing related colours to your web site. Your emails don’t must look precisely like your web site, however attempt pulling in at the very least one or two colours into your electronic mail to tie in your model. For this electronic mail, I modified the font shade to be the identical as the web site and included photos which have a touch of gold to match the emblem.

• • Electronic mail background: In the event you peruse your inbox, you’ll discover that many of the emails have a white or impartial background shade, and, sometimes, black. We advocate sticking to a kind of colours for the backdrop of your electronic mail. Vibrant or daring colours can really feel overwhelming and distract your recipients from the precise content material of the e-mail. To the appropriate, are the colours I used for this electronic mail’s background and textual content. 
  • Footer: An effective way to align your electronic mail along with your model is to make use of the identical footer background shade and font shade 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 electronic 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 shade. You’ll discover the hex code in components and attributes like type, span type,  background-color, bgcolor, shade, and border-color. It’s possible that your template may have a number of attributes for a similar shade to have the ability to talk the colour to all electronic 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!

After you have your electronic mail arrange, take a look at it by sending a preview to your self. Right here are some things to examine in your preview:

• Is it cell responsive? Evaluation your electronic 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 means of all of the hyperlinks and linked photos. Examine that the CTA buttons are large enough to click on along with your finger.
• Is your model recognizable? Examine your electronic mail and your web site side-by-side. Your model ought to shine by means of in your electronic mail.

In Advertising and marketing Campaigns, you can too A/B take a look at completely different components (see picture under), and see if a plain textual content hyperlink helps interact extra clicks than a colourful CTA button. This provides you with knowledge to again up your design selections for future sends. For a full listing of things to overview earlier than sending your electronic mail, look by means of Your Pre-send Electronic mail Testing Guidelines.

Prebuilt templates are a terrific time-saving resolution for these of us who aren’t electronic mail design and improvement consultants. It’s simple 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 and marketing Campaigns account.