fbpx
Перейти к содержимому

Простой HTML шаблон электронного письма, HTML e-mail + простое редактирование.

Mail_shablon
Сегодня я задалась целью сделать html шаблон для электронного письма.
Основными критериями были:
— простота;
— простое редактирование;
— адаптивный дизайн для разных почтовых клиентов и сервисов.
В интернете много шаблонов, которые мне совсем не подошли. А воспользовалась я статьей http://webdesign.tutsplus.com/ru/articles/creating-a-simple-responsive-html-email—webdesign-12978
Единственный минус этой статьи — это отсутствие готового полного шаблона, который просто можно скачать и отредактировать. Поэтому я решила его создать.

✪ DEMO⇊ СКАЧАТЬ

Полный код HTML письма

Особенностью этого кода является то, что все стили максимально прописаны в теле самого письма, а не внутри тегов <style>. Благодаря этому минимизируется искажение стилей в разных почтовых клиентах.

Наполнение HTML письма

Достаточно скопировать этот в NotePad++ и cохранить с расширением *.html. Далее необходимо внести изменения и экспортировать шаблон в ваш почтовый клиент.

Письмо состоит их трех блоков:

  • Header
  • Тело письма
  • Footer

Везде www.site.com.ua нужно поменять на собственный сайт.

Header

  1. В строчке: <img src=»http:/site.com/image/logo.png» width=»100″ border=»0″ alt=»» / >
    поменять http:/site.com/image/logo.png на ссылку своего логотипа.
  2. Вместо SubHEADER написать подзаголовок
  3. Вместо HEADER заглавие письма

Тело письма

В нем есть:

  1. Вступление.
    Поменяйте в нем строчку Dear Mr. !
  2. Начало. Поменяйте текст в блоке НАЧАЛО
  3. Кнопка. Кнопка делается с помощью целого блока:
    В этом блоке нужно поменять только строчку:

    где вместо http:/site.com нужно вставить свою ссылку, а вместо Register now! свой текст кнопки.
  4. Картнка. меняете только строчку:
    где вместо http:/site.com/image/image.png вставить путь к своей картинке.
  5. Окончание письма. Поменять Best regards, Boss

Все блоки можно менять местами удалять или добавлять. Например, если нужно две картинки или две кнопки.

Footer

  1. Поменять.
    и вставить данные своего сайта.
  2. Социальные сети. Вместо LINK_TO_FB вставить ссылку на страницу Facebook.
    Вместо LINK_TO_VK — ссылку на страницу Вконтакте.

Редактирование стилей HTML письма

Так как стилей в шаблоне много, и все они прописаны не отдельно, а для конкретного тега, есть смысл менять только цветовую гамму письма. В HTML редакторы с помощью команды заменить — поменяйте нужные цвета:
#f6f8f1 — внешний фон;
#c7d8a7 — фон Header — Заголовок;
#153643 — цвет текста Заглавия, Вступления и самого письма.
#e05443 — цвет Кнопки;
#44525f — фон Footer — Подвала

Вот собственно и все)) Удачных вам рассылок!

Больше статей:   Css3 кнопки для сайта - сборная коллекция

7 комментариев для “Простой HTML шаблон электронного письма, HTML e-mail + простое редактирование.”

  1. Спасибо за статью. Все очень понятно. Единственный момент — мне на почту пришла абракадабра вместо русского текста.
    Т.е. тестировала на английском все в порядке, а вот с кириллицей явный конфликт.
    Посоветуйте можно это исправить?

    1. Наталья, в строчке

      есть кодировка. Попробуйте в почте поставить кодировку utf-8 или поменять саму кодировку в письме.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *