In case you are 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 easy methods to make beauty and textual content adjustments 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 at least one 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 function. I actually like Notepad++, which is free and has nice options.
You can too use our model new E mail Editor to do that complete tutorial. Simply choose “Select a template” and choose the Espresso Store template from the record. The editor will present you a stay preview of your code, and in addition permits for fast testing.
Step 2: Reduce Undesirable Sections
The very first thing you’ll wish to do is determine any undesirable sections which can be included within the template you might be utilizing. On this template, every part is constructed right into a single desk, so we’ll wish to take away the entire desk to eliminate the part.
Each template is coded otherwise, so that you’ll should assess precisely what to take away on a case by case foundation. You could have to take away a row, desk cell or complete desk to eliminate 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 nicely commented which makes it straightforward to determine the start and finish of every content material block.
HTML feedback seem 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 certain to chop the feedback, too, as these received’t be wanted.
Step 3: Change Pictures
Now we’re going to exchange the pictures with ones for our sushi restaurant. Let’s begin with the emblem. You’ll find the emblem picture within the code through the use of Ctrl+F and trying to find “Emblem.”
The picture tag ought to seem 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 emblem is similar dimensions, all you need to have to alter is the src attribute of the picture. You should utilize a emblem with totally different dimensions, simply be certain that to alter the inline width type. Our new emblem will seem 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 be certain that 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 units. The under instance exhibits the code you’d have to set a picture to show at 200px huge, regardless of being saved at 400px huge.
<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 excellent with all of those brilliant sushi photos.
We’ll start by altering the background shade of the e-mail. Background colours in e-mail are set primarily utilizing background-color type and bgcolor attribute. To make this variation, discover the physique tag of the e-mail. The physique tag follows the closing head tag. You possibly can see the background shade is ready to #4d3e39. A background shade is typically set in a couple of place, often to get a constant show throughout all e-mail shoppers. On this case, the colour is ready 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;">
<heart class="wrapper" type="width:100%;table-layout:fastened;-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;">
<heart class="wrapper" type="width:100%;table-layout:fastened;-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 shade of the primary content material column of the e-mail. Search for the “begin primary physique” remark within the code. That is the desk that comprises many of the content material of the e-mail and confines it to a central column. As you possibly can see, this shade is ready to #ded6bf.
<!-- ======= begin primary physique ======= -->
<desk class="outer" align="heart" cellpadding="0" cellspacing="0" border="0" type="border-spacing:0;font-family: Verdana, sans-serif;shade:#333333;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#ded6bf">
Let’s change this to one thing that can match our new shade scheme higher, like #EBF1E5.
<!-- ======= begin primary physique ======= -->
<desk class="outer" align="heart" cellpadding="0" cellspacing="0" border="0" type="border-spacing:0;font-family: Verdana, sans-serif;shade:#333333;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#EBF1E5">
Use Ctrl+H to exchange all cases of #ded6bf with #EBF1E5.
Now we’ll wish to edit textual content colours, particularly headings. Textual content shade is ready utilizing the shade 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; shade: #fe7c24;font-family: Georgia, sans-serif;text-align:heart; text-transform:uppercase;font-weight:daring;Margin-top:10px;">Uncover our distinctive blends</p>
Lastly, let’s change the button shade. We had been utilizing #db7447, however let’s brighten that as much as #fe7c24 to match our headings. The button shade right here is ready as a bgcolor, background shade and border shade.
<desk border="0" align="heart" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tbody>
<tr>
<td align="heart">
<desk border="0" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tr>
<td align="heart" 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: heart;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px strong #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 must be in, in addition to some acceptable fallback fonts for shoppers that don’t have your most well-liked font. The best technique to edit the font stack is to seek out an instance of it within the e-mail, after which use Ctrl+H to exchange 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 exchange it with:
font-family: Arial, helvetica, sans-serif;
We received’t change the paragraph font for this tutorial, as this font already works properly with the template.
Step 6: Edit Textual content
This can be a pretty straightforward step. You’ll wish to determine the textual content blocks within the e-mail code and change out the textual content together with your desired content material. All the remaining textual content must 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; shade: #fe7c24;font-family: Georgia, sans-serif;text-align:heart; text-transform:uppercase;font-weight:daring;Margin-top:10px;">Uncover our distinctive blends</p>
Let’s change that to learn, “Attempt our new mega sushi roll!”
<p type="font-size: 28px; line-height:40px; text-decoration: none; shade: #fe7c24;font-family: Georgia, sans-serif;text-align:heart; text-transform:uppercase;font-weight:daring;Margin-top:10px;">Attempt our new mega sushi roll!</p>
You might also wish to add preheader textual content. Search for the “PREHEADER TEXT HERE” remark. The code ought to seem like this.
<tr>
<td type="width:100%;show:none !vital;visibility: hidden;mso-hide:all;font-size:1px;shade:#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 Glad Hour 4-6pm Day by day”. Don’t neglect to delete the remark tags! If the textual content is commented out, it received’t seem as a preheader.
<tr>
<td type="width:100%;show:none !vital;visibility: hidden;mso-hide:all;font-size:1px;shade:#333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
$2 Rolls - Sushi Glad Hour 4-6pm Day by day
</td>
</tr>
Step 7: Change Hyperlink Locations
Lastly, let’s have 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="heart" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tbody>
<tr>
<td align="heart">
<desk border="0" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tr>
<td align="heart" 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: heart;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px strong #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: heart;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px strong #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: heart;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px strong #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 site visitors there.
Conclusion
We now have a template that matches the model colours and fonts of a unique firm. By avoiding adjustments to the construction of the template as a lot as potential, the template ought to nonetheless render reliably.
Nonetheless, everytime you make adjustments to a template, it’s at all times finest to check. Don’t have a fast and dependable approach to do this? Attempt our 7 day free trial! By our platform, you possibly can take a look at your template in a variety of e-mail shoppers and cell units in seconds.
Writer: The E mail on Acid Crew
The E mail on Acid content material staff is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising and marketing.
Writer: The E mail on Acid Crew
The E mail on Acid content material staff is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising and marketing.
