If you are new to email development, the work of customizing a template can seem overwhelming. But don’t worry. We’ve written this blog to walk you through how to make . Cosmetic and text changes to a template.These techniques can be used with any of the free templates . We offer in our For the purposes of this blog, we’ll be customizing the Coffee Shop template. We will change the template from a coffee shop theme to one that advertises a sushi restaurant. Click on the images below to see what the whole email looks like, before and after.
Step 1: Open the HTML File
You’ll need a text editor to work in. Don’t use Word for this! You can use Notepad (or TextEdit on Mac) for this purpose. I really like which is free and has great features.
You can also use our brand new to do this entire tutorial. Just select “Choose a template” and pick the Coffee Shop template from the list. The editor will show you a live preview of your code, and also allows for instant testing.
Step 2: Cut Unwanted Sections
The first thing you’ll want to do is identify any unwanted. Sections that are included in the template you are using. In this template, each section is built into a single table. So we’ll want to remove the whole table to get rid of the section.
Every template is coded differently, so you’ll have to assess exactly what to remove on a case by case basis. You may need to remove a row, table cell or entire table to get rid of unwanted sections. Use to guide you as you try to find the beginning and end of an Qatar Business Email List unwanted section. In this case, the Coffee Shop template is well commented which makes it easy to identify the beginning and end of each content block.
HTML comments look like this:For this example, we’ll cut the 3 column content block (which appears just above the footer), as well as the divider that precedes it.Go ahead and cut those two sections. Make sure to cut the comments, too, as those won’t be needed.
Step 3: Change Images
Now we’re going to replace the images with ones for our sushi restaurant. Let’s start with the logo. You can find the logo image in the code by using Ctrl+F and searching for “Logo.”
The should look like this: The “src” attribute is what controls the image that’s displayed. After hosting your image, you’ll want to use the absolute path, or URL, to display the image in your email.
As long as your new logo is the same dimensions, all you should have to change is the src attribute of the image. You can use a logo with different dimensions, just make sure to change the inline width style. Our new logo will look like this:You’ll want to change UAE Cell Number the src attributes for the rest of the images in the template. Just make sure each image is saved in the same dimensions as the original.You can also use images saved in the same proportions (a 400×200 image in a 200×100 spot) as long as you set the height and width that you want it to display at using HTML attributes. This will enable you to use The below example shows the code you’d need to set an image to display at 200px wide, despite being saved at 400px wide.
