Как сделать красивый HTML шаблон письма для E-mail рассылки?
Здравствуйте дорогие читатели – Sozdaiblog.ru!
Сегодня я покажу, как сделать красивый HTML шаблон письма для E-mail рассылки.
Уже давно ни для кого не секрет, что весь бизнес в Интернете построен на E-mail маркетинге.
Каждый день с помощью информационных рассылок инфо-бизнесмены, блоггеры и интернет-магазины контактируют со своими подписчиками, предлагая им различные товары и услуги.
Но, что бы на такое предложение обратили внимание, а не сразу отправили в папку «спам», нужно привлечь к нему внимание.
Для этого будет уместным сделать красиво оформленный HTML шаблон письма.
Специально для Вас я подобрал тестовый шаблон, который будет наглядным пособием.
Итак.
HTML шаблон письма
Что и как мы будем делать?
Мы будем создавать самый простой HTML шаблон письма (как создать шаблон для WordPress), который будет состоять из основного диалогового окна и двух вторичных колонок.
Создание каркаса и таблицы-контейнера
Для начала нам нужно сделать HTML каркас нашего письма. Выглядеть это будет так:
<html>
<head>
<title>HTML шаблон письма</title>
</head>
<body>
</body>
</html>
Далее мы создаём таблицу-контейнер. Она будет имитировать сплошной цвет фона:
<html>
<head>
<title>HTML шаблон письма</title>
</head>
<body>
<!-- Container Table -->
<table cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#0f6da1">
<tr>
<td align="center"></td>
</tr>
</table>
<!-- End Container Table -->
</body>
</html>
Обратите внимание, что ширину таблицы я задал 99%, оставив вокруг небольшое расстояние. Это не моё личное желание, а требование некоторых почтовых Веб-клиентов таких, как Gmail и Yahoo. Остальная часть нашей электронной почты будет находиться в этой одной ячейке таблицы, которая расположена по центру.
Следующий шаг заключается в создании обёртки таблицы фактического содержания письма. Сохраняйте максимальный размер конструкции не более 600 пикселей:
<html>
<head>
<title>HTML шаблон письма</title>
</head>
<body>
<!-- Container Table -->
<table cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#0f6da1">
<tr>
<td align="center">
<!-- Email Wrapper Table -->
<table cellpadding="0" cellspacing="0" border="0" width="640">
<tr>
<td></td>
</tr>
</table>
<!-- End Email Wrapper Table -->
</td>
</tr>
</table>
<!-- End Container Table -->
</body>
</html>
Вместе с тенью света на белом фоне наш шаблон письма был растянут до 640px, но его рабочая зона по-прежнему осталась равной 600px.
Создание шапки
Теперь, когда основная таблица создана, пришло время браться за её наполнением необходимым содержимым. Я начну с самого верха шаблона письма и потихоньку, буду опускаться вниз.
Верхняя строка
Начиная с этого момента, я буду исключать ранее написанный код (рамки таблицы).
Таким образом, первая строка электронной таблицы имеет синий фон с белым шрифтом и ссылку на веб-версию письма. Очень важно снарядить Ваше письмо такой ссылкой, так как не все почтовые клиенты выводят его содержимое одинаково правильно.
За отображение такой ссылки отвечает следующий кусок кода:
<table cellpadding="0" cellspacing="0" border="0" width="640">
<tr>
<td valign="bottom" height="30" align="right" class="footer">
Возникли проблемы при просмотре этого письма? Щелкните здесь для просмотра.
</td>
</tr>
<tr>
<td>
<img src="email_images/top_fade.jpg" width="640" height="20" border="0" />
</td>
</tr>
</table>
А за её внешний вид отвечает CSS стиль:
/* Fonts and Typography */
.footer {
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: #fff;
padding-right: 20px;
}
Логотип и иконки социальных сетей
Опускаясь ниже, мы видим логотип и иконки социальных сетей, которые расположены на одном уровне.
За их вывод отвечает вот такой код:
<tr>
<td align="center" class="email_background">
<!-- Email Header -->
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td><img src="email_images/logo.jpg" width="246" height="41" border="0" style="padding-left:20px; padding-top: 20px;" /></td>
<td><img src="email_images/facebook.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
<td><img src="email_images/twitter.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
<td><img src="email_images/linkedin.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
<td><img src="email_images/youtube.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
</tr>
</table>
</td>
</tr>
Вдобавок, ко всем нашим изображения в HTML шаблоне письма добавляются следующие стили:
/* Backgrounds */
.email_background {
width: 640px;
background: url('/wp-content/uploads/email_images/email_bg.jpg') repeat-y;
}
/* Images */
img {
display: block;
border: none;
}
Таким образом, социальные иконки сидят на своих местах в собственных вложенных ячейках таблицы и не имеют отношения к другим разделам письма. Это позволяет их менять по мере появления соответствующей необходимости.
Добавление содержания
Далее мы переходим к содержанию. Оно должно быть коротким, красивым и познавательным.
Сначала мы начнём с добавления первого изображения, которое в данном дизайне имеет размер 560px на 210px. Вы также можете увидеть милую деформированную тень под изображением, которая была сделана отдельно, что позволяет быстро менять изображения, не теряя тень. Давайте перейдем к коду:
<tr>
<td colspan="5"><img src="email_images/featured_image.jpg" width="560" height="250" style="padding-left: 20px; padding-right: 20px;" /></td>
</tr>
<tr>
<td colspan="5"><img src="email_images/featured_shadow.jpg" width="560" height="18" style="padding-left: 20px; padding-right: 20px;" /></td>
</tr>
Здесь мы создали новую строку для показа больших изображений, установив ширину до 560px с добавление 20px отступов с обеих сторон. Те же действия мы проделали и с тенью.
Добавление заголовка и содержания
Перемещаясь ниже, мы видим заголовок основного материала и непосредственно само содержимое. Здесь за вывод контента отвечает вот такой код:
<tr>
<td colspan="5" style="padding-left:20px; padding-right: 20px; padding-bottom: 10px;">
<h1>This is your featured story</h1>
</td>
</tr>
<tr>
<td colspan="5" style="padding-left: 20px; padding-right: 20px; padding-bottom: 20px;">
<p class="content">Существует мнение, что Паттайя стала популярным курортом благодаря тому, что тут часто отдыхали американские моряки, которых впрочем, тут и сейчас большое количество и они всегда в окружении нескольких таек. Естественно среди наших соотечественников он менее популярен, чем Египет и Турция. Но родную речь тут слышно повсеместно )) и в торговых комплексах во время шоппинга и во множестве здешних баров )). Паттайя в основном знаменита своей ночной жизнью, морем и текстилем. Конечно, кроме всего прочего тут можно найти множество других интересностей.
Здесь можно брать в прокат любой транспорт, в том числе и джипы и скутеры. Для любителей мототехники тут вообще райский уголок. Чтобы взять в аренду мотобайк права могут даже и не потребовать, всего за 100-500 бат (плюс залог в размере 2 000 бат) можно арендовать приличный скутер и погонять в свое удовольствие!
<br /><br />
<img src="email_images/readmore.jpg" border="0" align="right" width="114" height="27" />
</p>
</td>
</tr>
</table>
</td>
Чтобы изменить внешний вид заголовка и текста шаблона письма, достаточно воспользоваться следующими стилями:
h1 {
color: #e95f03;
font-family: Futura, Verdana, Sans-Serif;
padding: 0;
margin: 0;
font-size: 24px;
font-weight: normal;
}
.content {
padding: 0;
margin: 0;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 20px;
}
Дополнительное содержимое
Теперь мы переходим к дополнительному содержимому нашего шаблона. Как Вы уже заметили оно разбито на две колонки. В каждой из колонок присутствует фото, заголовок и небольшое превью. Всё это создаётся при помощи вот такого кода:
<tr>
<td align="center" class="email_background">
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<img src="email_images/secondary1.jpg" width="271" height="150" border="0" style="padding-left: 20px;" />
</td>
<td>
<img src="email_images/secondary2.jpg" width="271" height="150" border="0" style="padding-left: 10px;" />
</td>
</tr>
<tr>
<td>
<img src="email_images/secondary_shadow.jpg" width="271" height="15" border="0" style="padding-left: 20px;" />
</td>
<td>
<img src="email_images/secondary_shadow.jpg" width="271" height="15" border="0" style="padding-left: 10px;" />
</td>
</tr>
<tr>
<td style="padding-left: 20px;">
<h2>This is a secondary headline</h2>
</td>
<td style="padding-left: 10px;">
<h2>This is a secondary headline</h2>
</td>
</tr>
<tr>
<td style="padding-left: 20px;">
<p>Несмотря на погубленную репутацию Паттаи, здесь можно узнать, что пресловутый тайский массаж - не только прикрытие для борделей. В Таиланде действительно делают неплохой массаж, а лучшими специалистами в этом искусстве считаются слепые мастера. Их секрет заключается в повышенной чувствительности пальцев.
<br /><br />
<img src="email_images/readmore.jpg" style="padding-right:10px;" border="0" align="right" width="114" height="27" />
</p>
</td>
<td style="padding-left: 10px; padding-right: 10px;">
<p>Центральная улица и сердце Паттайи, которая никого не оставляет равнодушным. Местный Арбат, Таймс-Сквер и Содом с Гоморрой в одном стакане, «Уокинг Стрит» – настоящий источник любви и ненависти как для местных жителей, так и для приезжих. Говорим «Паттайя», подразумеваем Walking Street.
<br /><br />
<img src="email_images/readmore.jpg" style="padding-right:10px;" border="0" align="right" width="114" height="27" />
</p>
</td>
</tr>
</table>
</td>
</tr>
Здесь нам ещё потребуется добавить дополнительный стиль. Вот он:
h2 {
color: #e95f03;
font-family: Futura, Verdana, Sans-Serif;
padding: 0;
margin: 0;
font-size: 18px;
font-weight: normal;
}
Закрытие HTML шаблона письма
Итак, мы приближаемся к концу нашего шаблона. Здесь нам нужно закрыть основное окно, используя изображение и следующий код:
<tr>
<td>
<img src="email_images/bottom_fade.jpg" width="640" border="0" height="28" />
</td>
</tr>
Добавление подвала
Одним из наиболее важных аспектов, является добавлением в конце шаблона письма ссылки для отписки от получения подобных писем (создать подписку на рассылку). Да, да, я знаю, Вы не хотите терять абонентов. Но и раздражать их тоже нельзя. Вы должны предоставить клиентам возможность отказаться от получения, возможно давно надоевшей им рассылки. Ну и заодно напомнить кто автор.
Здесь Вам необходим такой код:
<tr>
<td valign="top" height="80" align="right" class="footer">
Рассылка от: Иванов Иван<br />
Автор блога: Ivan.ru<br />
<br />
Хотите отказаться от подписки? Нажмите здесь
</td>
</table>
<!-- End Actual Email Content -->
</td>
</tr>
</table>
<!-- End Email Wrapper Table -->
</td>
</tr>
</table>
<!-- End Container Table -->
</body>
</html>
Заключение
Дорогие друзья, для отображения всех графических элементов в шаблоне письма они должны быть загружены на любой онлайн сервер, а в соответствующих строчках кода необходимо прописать уникальный путь до этих изображений.
Тестовый HTML шаблон письма был дан, как пособие, которое Вы можете в любой момент переверстать на свой вкус и цвет.
На сегодня это всё. Надеюсь, что Вам понравилось.
До новых статей…
С уважением, Денис Черников!
-
Блог на wordpress для онлайн школы
-
Эксклюзивное интервью с SEO оптимизаторами Google!
- Как заставить ссылки дрожать?
-
Универсальная электронная карта гражданина РФ УЕК!
-
Как сделать улётное горизонтально выпадающее меню?
-
Бесплатные советы блоггерам новичкам!
-
Что такое Поведенческие факторы и Как на них повлиять?
- SEO оптимизация сайтов. ТОП-7 заблуждений новичков в SEO!
-
SEO оптимизация сайта под Google. Основные особенности!
-
Внимание конкурс — Как я стал блоггером!
