Домой / Блоговедение / Бесплатный шаблон html письма скачать

Бесплатный шаблон html письма скачать

шаблон html письма
шаблон html письма

Скачайте бесплатно шаблон html письма для рассылки!

Здравствуйте, уважаемые друзья и гости блога!


Очень рад Вас видеть у себя на страницах. Сегодня хочу вам рассказать как сделать самостоятельно простой шаблон html письма для своей электронной рассылки. А если кому-то покажется это сложным или он просто не захочет заморачиваться и создавать самостоятельно шаблон html письма, то такие люди смогут скачать себе на компьютер совершенно бесплатно этот шаблон html письма и редактировать его под свои нужды, как им будет угодно.

Так как этот бесплатный шаблон html письма очень прост в использовании и любой новичок сможет его отредактировать как ему это будет угодно.

К тому же шаблон html письма, который я вам предлагаю является адаптивным. То есть он будет одинаково хорошо отображаться на всех устройствах, включая мобильные.

Так, что давайте начнем ...

Как создать адаптивный и простой шаблон html письма самому?

адаптивный шаблон html письма
адаптивный шаблон html письма

Если Вас это интересует, то Вы попали по адресу! И мы с вами сейчас создадим очень простой, адаптивный и красивый шаблон html письма.

Здесь Вы сразу можете посмотреть как будет выглядеть примерно ваш уже созданный мной заранее адаптивный шаблон html письма:

ШАБЛОН HTML ПИСЬМА ДЕМО!

Вот здесь Вы можете скачать уже готовый бесплатный шаблон html письма:

ШАБЛОН HTML ПИСЬМА СКАЧАТЬ БЕСПЛАТНО!

Теперь начинаем создавать адаптивный шаблон html письма самостоятельно.

Для начала создадим простой пустой шаблон:

<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
        <title>Адаптивный шаблон HTML письма</title>
        <style type="text/css">
        body {margin: 0; padding: 0; min-width: 100%!important;}
        .content {width: 100%; max-width: 600px;}
        </style>
    </head>
    <body yahoo bgcolor="#f6f8f1">
        <table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                Приветствую Вас!
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

Что мы с вами сейчас сделали? Все просто это шаблон html письма, где мы с вами написали заголовок нашего письма «Адаптивный шаблон HTML письма» и контент со словами «Приветствую Вас!». Которые Вы в последствии будете заменять на свои собственные.

Но пока наш шаблон не является адаптивным и готовым к его использованию. Нам еще нужно с вами проделать некоторые манипуляции с ним для того, чтобы он был полностью адаптивным ко всем мобильным устройствам и мы могли его спокойно использовать в своих электронных рассылках.

Давайте теперь проделаем некоторые манипуляции, которые нам помогут избежать неправильного отображения нашего письма в разных почтовых клиентах.

Например, чтобы почта Yahoo правильно отображало наше письмо мы должны в наш шаблон добавить следующий код:

<body yahoo>

И кроме этого еще нужно назначить особые стили нашему тэгу, используя селектор атрибутов:

body[yahoo] .class {}

 

Теперь нам надо, чтобы наше письмо правильно отображалось в Outlook и Lotus Notes 8/8.5, нам нужно сделать вот так:

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <![endif]-->
            <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        Приветствую Вас!
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

А чтобы наше письмо правильно отображалось в Apple Mail, нам нужно сделать вот это:

<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style>

Чтобы заголовок в письме правильно и красиво отображался нужно сделать вот так:

<td class="header" bgcolor="#c7d8a7">
Приветствую Вас!
</td>

И также задаем свои стили для заголовка:

.header {padding: 40px 30px 20px 30px;}

Теперь давайте сделаем наш шаблон html письма адаптивным для всех устройств в том числе и мобильных добавлением вот этих вот нескольких блоков кода:

Это левая колонка:

<table width="70" align="left" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="70" style="padding: 0 20px 20px 0;">
            <img src="images/icon.gif" width="70" height="70" border="0" alt="" / >
        </td>
    </tr>
</table>

Это правая колонка:

<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
        <![endif]-->
            <table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">style="width: 100%; max-width: 425px;">
                 <tr>
                    <td height="70">
                    </td>
                </tr>
            </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

Добавим класс в медиа-запрос, созданный для Apple Mail:

.col425 {width: 425px!important;}

Теперь внутри ячейки добавим наш заголовок:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class="subhead" style="padding: 0 0 0 3px;">
            ЗАГОЛОВОК
        </td>
    </tr>
    <tr>
        <td class="h1" style="padding: 5px 0 0 0;">
            Адаптивный шаблон HTML письма
        </td>
    </tr>
</table>

И давайте еще добавим несколько классов, которые также будут использоваться как для заголовка так и для текста письма:

.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}

Все, теперь наш заголовок закончен и выглядит симпатично. Пример смотрите вот здесь: ДЕМО

Далее давайте создадим тело нашего письма, где будет располагаться текст:

<tr>
    <td class="innerpadding borderbottom">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td class="h2">
                    Приветствую Вас ! Или что-то в этом роде ...
                </td>
            </tr>
            <tr>
                <td class="bodycopy">
                    И дальше содержание вашего письма, которое Вы хотите донести до своего читателя. Этот шаблон html письма для рассылки адаптивный и очень простой в редактировании. Так, что уважаемые друзья вам будет очень легко все исправить под себя. Скачайте бесплатно этот простой адаптивный HTML шаблон письма для своей электронной рассылки и пользуйтесь на здоровье!
                </td>
            </tr>
        </table>
    </td>
</tr>

И давайте добавим еще стили для текста:

.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}

И стили для кнопки:

.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}

Еще установим ширину для нового класса 'col380', и добавим наши размеры в стили, чтобы позаботиться о Apple Mail. И теперь стили выглядят так:

@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
}

Создадим одну колонку для изображения нашего шаблона HTML письма:

<tr>
    <td class="innerpadding borderbottom">
        <img src="images/wide.png" width="100%" border="0" alt="" />
    </td>
</tr>

Для наших стилей CSS:

img {height: auto;}

И теперь мы добавим строку текста без рамки внизу:

<tr>
    <td class="innerpadding borderbottom">
    И дальше содержание вашего письма, которое Вы хотите донести до своего читателя. Этот шаблон html письма для рассылки адаптивный и очень простой в редактировании. Так, что уважаемые друзья вам будет очень легко все исправить под себя. Скачайте бесплатно этот простой адаптивный HTML шаблон письма для своей электронной рассылки и пользуйтесь на здоровье!
    </td>
</tr>

Теперь давайте создадим подвал нашего письма.Для его создания, добавим новую строку с таблицей внутри. Одна из строк будет содержать другую таблицу для наших иконок социальных сетей:

<tr>
    <td class="footer" bgcolor="#44525f">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td align="center" class="footercopy">
                    &reg; Someone, somewhere 2013<br/>
                    <a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly
                </td>
            </tr>
            <tr>
                <td align="center" style="padding: 20px 0 0 0;">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="37" style="text-align: center; padding: 0 10px 0 10px;">
                                <a href="https://www.facebook.com/">
                                    <img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" />
                                </a>
                            </td>
                            <td width="37" style="text-align: center; padding: 0 10px 0 10px;">
                                <a href="https://www.twitter.com/">
                                    <img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" />
                                </a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

Еще нужно добавить требуемые стили для подвала в CSS:

.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}

Ну вот в принципе и все, что я хотел вам сегодня рассказать про то, как создать адаптивный шаблон html письма для своей электронной рассылки.

Если вам понравился материал пожалуйста сделайте следующее…

  1. Поставьте «лайк».
  1. Сделайте ретвит.
  1. Поделитесь этим постом с друзьями в социальных сетях.
  1. И конечно же, оставьте свой комментарий ниже 🙂

Спасибо за внимание!

Всегда ваш Валерий Бородин



Про Валерий Бородин

Проверьте также

лайфхаки ютуба

Лайфхаки ютуба, которые изменят вашу онлайн жизнь!

Самые нужные лайфхаки ютуба для ютубера! Здравствуйте, уважаемые друзья и гости блога! Сегодня хочу вам …

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу