If you’re new to e-mail improvement, the work of customizing a template can appear overwhelming. However don’t fear. We’ve written this weblog to stroll you thru the way to make beauty and textual content modifications to a template.
These methods can be utilized with any of the free templates we provide in our Sources Middle. For the needs of this weblog, we’ll be customizing the Espresso Store template. We’ll change the template from a espresso store theme to 1 that advertises a sushi restaurant. Click on on the pictures under to see what the entire e-mail appears like, earlier than and after.
Step 1: Open the HTML File
You’ll want a textual content editor to work in. Don’t use Phrase for this! You should utilize Notepad (or TextEdit on Mac) for this objective. I actually like Notepad++, which is free and has nice options.
You can too use our model new Electronic mail Editor to do that whole tutorial. Simply choose “Select a template” and decide the Espresso Store template from the checklist. The editor will present you a dwell preview of your code, and likewise permits for immediate testing.
Step 2: Lower Undesirable Sections
The very first thing you’ll wish to do is determine any undesirable sections which might be included within the template you’re utilizing. On this template, every part is constructed right into a single desk, so we’ll wish to take away the entire desk to do away with the part.
Each template is coded otherwise, so that you’ll must assess precisely what to take away on a case by case foundation. You might have to take away a row, desk cell or whole desk to do away with undesirable sections. Use feedback to information you as you attempt to discover the start and finish of an undesirable part. On this case, the Espresso Store template is effectively commented which makes it simple to determine the start and finish of every content material block.
HTML feedback appear like this:
<!-- ======= begin divider ======= -->
<!-- one other remark -->
For this instance, we’ll reduce the three column content material block (which seems simply above the footer), in addition to the divider that precedes it.
<!-- ======= begin divider ======= -->
<desk class="one-column" border="0" cellpadding="20" cellspacing="0" width="100%" type="border-spacing:0;background-color: #ded6bf;" bgcolor="#ded6bf">
...extra code right here...
</desk>
<!-- ======= finish divider ======= -->
<!-- ======= begin three column ======= -->
<cellpadding="0" cellspacing="0" border="0" width="100%" type="background-color: #ded6bf;" bgcolor="#ded6bf">
...extra code right here...
</desk>
<!-- ======= finish three column ======= -->
Go forward and reduce these two sections. Make sure that to chop the feedback, too, as these gained’t be wanted.
Step 3: Change Photographs
Now we’re going to interchange the pictures with ones for our sushi restaurant. Let’s begin with the emblem. You will discover the emblem picture within the code by utilizing Ctrl+F and looking for “Brand.”
The picture tag ought to appear like this:
<img border="0" type="show: block; width: 136px;" src="https://www.emailonacid.com/weblog/article/email-development/how-to-customize-an-html-email-template/https://www.emailonacid.com/photos/emails/coffeeshop/coffee-shop-logo.png" alt=""/>
The “src” attribute is what controls the picture that’s displayed. After internet hosting your picture, you’ll wish to use absolutely the path, or URL, to show the picture in your e-mail.
So long as your new brand is similar dimensions, all it’s best to have to alter is the src attribute of the picture. You should utilize a brand with totally different dimensions, simply ensure to alter the inline width type. Our new brand will appear like this:
<img border="0" type="show: block; width: 136px;" src="https://www.emailonacid.com/weblog/article/email-development/how-to-customize-an-html-email-template/https://www.emailonacid.com/photos/blog_images/Emailology/2016/cust_template/sushi-logo.jpg" alt=""/>
You’ll wish to change the src attributes for the remainder of the pictures within the template. Simply ensure every picture is saved in the identical dimensions as the unique.
You can too use photos saved in the identical proportions (a 400×200 picture in a 200×100 spot) so long as you set the peak and width that you really want it to show at utilizing HTML attributes. It will allow you to make use of retina photos for iOS gadgets. The under instance reveals the code you’d have to set a picture to show at 200px broad, regardless of being saved at 400px broad.
<img border="0" width="200" type="show: block; width: 200px;" src="https://www.emailonacid.com/weblog/article/email-development/how-to-customize-an-html-email-template/https://www.emailonacid.com/photos/an-image.png" alt=""/>
Step 4: Customise Colours
Now that the pictures have been changed, it’s time to repair the colours. The earth tones used for our espresso store e-mail don’t look superb with all of those shiny sushi photos.
We’ll start by altering the background coloration of the e-mail. Background colours in e-mail are set primarily utilizing background-color type and bgcolor attribute. To make this transformation, discover the physique tag of the e-mail. The physique tag follows the closing head tag. You’ll be able to see the background coloration is about to #4d3e39. A background coloration is usually set in a couple of place, often to get a constant show throughout all e-mail shoppers. On this case, the colour is about in three locations (on the finish of every line).
<physique type="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#4d3e39;">
<middle class="wrapper" type="width:100%;table-layout:mounted;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#4d3e39;">
<desk width="100%" cellpadding="0" cellspacing="0" border="0" type="background-color:#4d3e39;" bgcolor="#4d3e39;">
Let’s change all three of these to a pleasant, wealthy #9e3212.
<physique type="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#9e3212;">
<middle class="wrapper" type="width:100%;table-layout:mounted;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#9e3212;">
<desk width="100%" cellpadding="0" cellspacing="0" border="0" type="background-color:#4d3e39;" bgcolor="#9e3212;">
Now we’ll edit the background coloration of the primary content material column of the e-mail. Search for the “begin foremost physique” remark within the code. That is the desk that incorporates a lot of the content material of the e-mail and confines it to a central column. As you may see, this coloration is about to #ded6bf.
<!-- ======= begin foremost physique ======= -->
<desk class="outer" align="middle" cellpadding="0" cellspacing="0" border="0" type="border-spacing:0;font-family: Verdana, sans-serif;coloration:#333333;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#ded6bf">
Let’s change this to one thing that can match our new coloration scheme higher, like #EBF1E5.
<!-- ======= begin foremost physique ======= -->
<desk class="outer" align="middle" cellpadding="0" cellspacing="0" border="0" type="border-spacing:0;font-family: Verdana, sans-serif;coloration:#333333;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#EBF1E5">
Use Ctrl+H to interchange all cases of #ded6bf with #EBF1E5.
Now we’ll wish to edit textual content colours, particularly headings. Textual content coloration is about utilizing the coloration type. At present, the headings are #222. Let’s change them to match our new sushi colours. A shade of orange, like #fe7c24 ought to stand out properly. Discover every heading within the e-mail and edit the colour type as follows.
<p type="font-size: 28px; line-height:40px; text-decoration: none; coloration: #fe7c24;font-family: Georgia, sans-serif;text-align:middle; text-transform:uppercase;font-weight:daring;Margin-top:10px;">Uncover our distinctive blends</p>
Lastly, let’s change the button coloration. We had been utilizing #db7447, however let’s brighten that as much as #fe7c24 to match our headings. The button coloration right here is about as a bgcolor, background coloration and border coloration.
<desk border="0" align="middle" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tbody>
<tr>
<td align="middle">
<desk border="0" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tr>
<td align="middle" bgcolor="#fe7c24" width="150" type="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.instance.com" type="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: middle;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;coloration: #ffffff;background: #fe7c24;border: 1px stable #fe7c24;-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;line-height:17px;text-transform:uppercase;letter-spacing: 1px;" class="button_link">Study Extra</a>
</td>
</tr>
</desk>
</td>
</tr>
</tbody>
</desk>
Step 5: Change Font(s)
The font stack (or font-family type) determines what font textual content ought to be in, in addition to some acceptable fallback fonts for shoppers that don’t have your most well-liked font. The best method to edit the font stack is to seek out an instance of it within the e-mail, after which use Ctrl+H to interchange each occasion of it. Within the Espresso Store template, the heading font stack appears like this:
font-family: Georgia, sans-serif;
Seek for this string within the e-mail utilizing Ctrl+H, after which substitute it with:
font-family: Arial, helvetica, sans-serif;
We gained’t change the paragraph font for this tutorial, as this font already works properly with the template.
Step 6: Edit Textual content
It is a pretty simple step. You’ll wish to determine the textual content blocks within the e-mail code and swap out the textual content along with your desired content material. The entire remaining textual content ought to be in paragraph or anchor (hyperlink) tags. We’ll wish to edit each textual content block within the template, however I’m simply going to make use of the primary one for instance.
Inside article 1, you’ll discover the “Uncover our distinctive blends” headline. It appears like this within the code.
<p type="font-size: 28px; line-height:40px; text-decoration: none; coloration: #fe7c24;font-family: Georgia, sans-serif;text-align:middle; text-transform:uppercase;font-weight:daring;Margin-top:10px;">Uncover our distinctive blends</p>
Let’s change that to learn, “Strive our new mega sushi roll!”
<p type="font-size: 28px; line-height:40px; text-decoration: none; coloration: #fe7c24;font-family: Georgia, sans-serif;text-align:middle; text-transform:uppercase;font-weight:daring;Margin-top:10px;">Strive our new mega sushi roll!</p>
You may additionally wish to add preheader textual content. Search for the “PREHEADER TEXT HERE” remark. The code ought to appear like this.
<tr>
<td type="width:100%;show:none !necessary;visibility: hidden;mso-hide:all;font-size:1px;coloration:#333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
<!-- ======= PREHEADER TEXT HERE ======= -->
</td>
</tr>
Let’s change that to learn, “$2 Rolls – Sushi Completely happy Hour 4-6pm Each day”. Don’t overlook to delete the remark tags! If the textual content is commented out, it gained’t seem as a preheader.
<tr>
<td type="width:100%;show:none !necessary;visibility: hidden;mso-hide:all;font-size:1px;coloration:#333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
$2 Rolls - Sushi Completely happy Hour 4-6pm Each day
</td>
</tr>
Step 7: Change Hyperlink Locations
Lastly, let’s take a look at altering an anchor hyperlink‘s href. The href controls what web page URL the hyperlink factors to. We’ll use a button for instance.
<desk border="0" align="middle" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tbody>
<tr>
<td align="middle">
<desk border="0" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tr>
<td align="middle" bgcolor="#fe7c24" width="150" type="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.instance.com" type="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: middle;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;coloration: #ffffff;background: #fe7c24;border: 1px stable #fe7c24;-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;line-height:17px;text-transform:uppercase;letter-spacing: 1px;" class="button_link">Study Extra</a>
</td>
</tr>
</desk>
</td>
</tr>
</tbody>
</desk>
The linked a part of this button is the “a” tag, or anchor tag.
<a href="http://www.instance.com" type="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: middle;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;coloration: #ffffff;background: #fe7c24;border: 1px stable #fe7c24;-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;line-height:17px;text-transform:uppercase;letter-spacing: 1px;" class="button_link">Study Extra</a>
We’ll edit the href to level this to a brand new web page.
<a href="http://www.happysushirestaurantplace.com" type="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: middle;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;coloration: #ffffff;background: #fe7c24;border: 1px stable #fe7c24;-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;line-height:17px;text-transform:uppercase;letter-spacing: 1px;" class="button_link">Study Extra</a>
Now the hyperlink factors to the restaurant, serving to to drive visitors there.
Conclusion
We now have a template that matches the model colours and fonts of a special firm. By avoiding modifications to the construction of the template as a lot as potential, the template ought to nonetheless render reliably.
Nonetheless, everytime you make modifications to a template, it’s at all times finest to check. Don’t have a fast and dependable manner to do this? Strive our 7 day free trial! Via our platform, you may check your template in a variety of e-mail shoppers and cell gadgets in seconds.
Writer: The Electronic mail on Acid Staff
The Electronic mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising.
Writer: The Electronic mail on Acid Staff
The Electronic mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising.
