HTML верстка писем

HTML верстка писем

LOLZTEAM

Учимся верстать письма на HTML!

Статья носит образовательный характер, мы ни к чему не призываем и не обязываем. Информация представлена исключительно в ознакомительных целях.

Больше интересных статей на нашем форуме: https://zelenka.guru/articles/

Подписывайтесь на канал и делитесь ссылкой на статью с друзьями!

Всё, что вы пишете, - это тоже ваша реклама. Электронные письма - один из видов эффективной бизнес-коммуникации. Чтобы общее с клиентом или сотрудником было эффективным, конечно, нужно писать правильно, дельно, конкретно, интересно. Ещё очень важно знать правила HTML-вёрстки писем. Есть много бесплатных ресурсов, вы можете сами научиться делать достойные HTML-письма для email-рассылок.


Почтовые клиенты - это «дикий запад» веб-разработки. Они игнорируют современные CSS, по-разному отображают письма. Но если знать правила вёрстки, можно создавать письма, которые корректно отображаются везде.


В этой статье для Вас подборка материалов об HTML вёрстке писем.

1. [ Самый легкий ] Воспользоваться готовым редактором

Выбираем шаблон письма:

Открываем шаблон:

Для использования:

1. Перенести в зону шаблона

2. Написать любой нужный текст

Картинка:

1. Перенести в зону шаблона

2. Импортировать с компьютера

Кнопка:

1. Перенести в зону шаблона

2. Изменить цвет, размер, текст кнопки

Стрелочка:

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

1. Перенести в зону шаблона

2. Потянуть стрелочку для изменения свободного места

Прямая линия:

Разделяет письмо на 2 части.

Отправка и тестирование:

Отправка по почте:

Сам сервис - https://makemail.ru/

2. [Чуть дольше, но интереснее] Воспользоваться инструкцией:

https://youtu.be/-L7IARE3n-g

3. [ Высший пилотаж ] HTML Верстка

В этой статье я не ставлю целью рассказать о HTML верстке, как о серьезном языке программирования, а делюсь своим опытом при работе с письмами в одном из моих бизнес-проектов

1. Базовый шаблон письма

Был придуман лично мной на основе ~ 6 публичных статей

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ваше письмо</title>
  <style type="text/css">
    @media only screen and (max-width: 480px) {
      .email-container {
        width: 100% !important;
      }
    }
  </style>
</head>
<body style="margin:0; padding:0; font-family: Arial, sans-serif; color: #333333;">
  <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" style="padding: 20px 0;">
        <!-- Контент (макс. 600px) -->
        <table class="email-container" width="600" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="padding: 20px; text-align: center; background: #f8f8f8;">
              <img src="https://example.com/logo.png" alt="Логотип" width="150" style="display: block; margin: 0 auto;" />
            </td>
          </tr>
          <tr>
            <td style="padding: 30px 20px; background: #ffffff;">
              <h1 style="font-size: 24px; margin: 0 0 20px;">Привет, {Имя}!</h1>
              <p style="font-size: 16px; line-height: 1.5; margin: 0 0 20px;">Это пример письма с базовой разметкой.</p>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="center" style="padding: 20px 0;">
                    <a href="https://example.com" style="background: #007bff; color: #ffffff; padding: 12px 24px; text-decoration: none; border-radius: 4px; display: inline-block; font-weight: bold;">Кнопка</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td style="padding: 20px; text-align: center; background: #f8f8f8; font-size: 12px; color: #999999;">
              2025 Ваша компания | <a href="#" style="color: #999999; text-decoration: underline;">Отписаться</a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

2. Контейнер для полноценного письма

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Ваше письмо</title>
  <!--[if gte mso 9]>
  <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
  </xml>
  <![endif]-->
  <style type="text/css">
    /* Базовые стили */
    body, #bodyTable {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.5;
    }
    /* Медиазапросы для мобильных */
    @media only screen and (max-width: 480px) {
      .responsive-table {
        width: 100% !important;
      }
      .stack-column {
        display: block !important;
        width: 100% !important;
      }
    }
  </style>
</head>
<body style="margin:0; padding:0; background-color:#f7f7f7;">
  <!-- Центрирующая таблица -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%" id="bodyTable" style="background-color:#f7f7f7;">
    <tr>
      <td align="center" valign="top">
        <!-- Основной контейнер -->
        <table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table" style="background-color:#ffffff;">
          <!-- Шапка -->
          <tr>
            <td align="center" style="padding: 20px 0;">
              <img src="logo.png" alt="Логотип компании" width="200" style="display:block; height:auto;"/>
            </td>
          </tr>
 
          <!-- Контент -->
          <tr>
            <td style="padding: 20px 30px; color:#333333;">
              <h1 style="font-size:24px; margin:0 0 15px;">Здравствуйте, {Имя}!</h1>
              <p style="margin:0 0 15px; font-size:16px;">Благодарим вас за интерес к нашему продукту.</p>
 
              <!-- Кнопка CTA -->
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td align="center" style="padding:20px 0;">
                    <table border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td align="center" bgcolor="#2ecc71" style="border-radius:4px;">
                          <a href="https://example.com" target="_blank" style="font-size:16px; color:#ffffff; text-decoration:none; padding:12px 25px; display:inline-block; font-weight:bold;">Основное действие</a>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
 
          <!-- Колонки -->
          <tr>
            <td style="padding:0 30px 20px;">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td valign="top" class="stack-column" width="50%" style="padding:0 10px 20px 0;">
                    <img src="image1.jpg" width="100%" alt="" style="display:block; max-width:100%; height:auto;"/>
                    <h3 style="font-size:18px; margin:10px 0;">Заголовок 1</h3>
                    <p style="margin:0; font-size:14px;">Описание первого блока.</p>
                  </td>
                  <td valign="top" class="stack-column" width="50%" style="padding:0 0 20px 10px;">
                    <img src="image2.jpg" width="100%" alt="" style="display:block; max-width:100%; height:auto;"/>
                    <h3 style="font-size:18px; margin:10px 0;">Заголовок 2</h3>
                    <p style="margin:0; font-size:14px;">Описание второго блока.</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
 
          <!-- Подвал -->
          <tr>
            <td style="padding:20px 30px; background-color:#eeeeee; font-size:12px; color:#666666;">
              <p style="margin:0;"> 2025 Название компании. Все права защищены.</p>
              <p style="margin:10px 0 0;">
                <a href="#" style="color:#666666; text-decoration:underline;">Отписаться</a> |
                <a href="#" style="color:#666666; text-decoration:underline;">Политика конфиденциальности</a>
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

3. Адаптивное меню

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center" style="padding:10px 0; background:#f8f8f8;">
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="padding:0 15px;"><a href="#" style="color:#333333; text-decoration:none;">Главная</a></td>
          <td style="padding:0 15px;"><a href="#" style="color:#333333; text-decoration:none;">Каталог</a></td>
          <td style="padding:0 15px;"><a href="#" style="color:#333333; text-decoration:none;">Контакты</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

4. Письмо-подтверждение регистрации

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" style="padding: 40px 20px;">
      <table width="600" border="0" cellspacing="0" cellpadding="0" style="background: #ffffff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
        <tr>
          <td style="padding: 40px 30px; text-align: center;">
            <img src="https://example.com/logo.png" width="150" alt="Логотип" style="display: block; margin: 0 auto 30px;"/>
            <h1 style="font-size: 24px; margin: 0 0 20px; color: #333333;">Добро пожаловать!</h1>
            <p style="font-size: 16px; line-height: 1.6; color: #666666; margin: 0 0 30px;">Благодарим за регистрацию на нашем сервисе. Ваш аккаунт успешно создан.</p>
 
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center" style="padding: 15px 0;">
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td align="center" bgcolor="#4a90e2" style="border-radius: 4px;">
                        <a href="https://example.com/login" target="_blank" style="font-size: 16px; color: #ffffff; text-decoration: none; padding: 12px 30px; display: inline-block; font-weight: bold;">Войти в аккаунт</a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
 
            <p style="font-size: 14px; color: #999999; margin: 30px 0 0;">Если вы не регистрировались, проигнорируйте это письмо.</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

5. Письмо с промо-акцией (2 колонки)

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" style="padding: 30px 20px; background: #f7f7f7;">
      <table width="600" border="0" cellspacing="0" cellpadding="0" style="background: #ffffff; border-radius: 8px;">
        <tr>
          <td style="padding: 30px; text-align: center;">
            <h2 style="font-size: 22px; margin: 0 0 15px; color: #333333;">Специальное предложение!</h2>
            <p style="font-size: 16px; color: #666666; margin: 0 0 25px;">Только 3 дня скидка 30% на весь ассортимент</p>
          </td>
        </tr>
 
        <!-- Две колонки с товарами -->
        <tr>
          <td style="padding: 0 20px 20px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="50%" valign="top" style="padding: 0 10px 20px 0;">
                  <img src="product1.jpg" width="100%" alt="Товар 1" style="display: block; border-radius: 4px; margin-bottom: 15px;"/>
                  <h3 style="font-size: 18px; margin: 0 0 5px; color: #333333;">ЛОЛЗ</h3>
                  <p style="font-size: 16px; color: #e74c3c; margin: 0 0 10px; font-weight: bold;">999 999 999 999 999 999 ₽ <span style="text-decoration: line-through; color: #999999; font-weight: normal; margin-left: 5px;">29 999 ₽</span></p>
                  <a href="#" style="font-size: 14px; color: #3498db; text-decoration: none;">Подробнее →</a>
                </td>
      
                <td width="50%" valign="top" style="padding: 0 0 20px 10px;">
                  <img src="product2.jpg" width="100%" alt="Товар 2" style="display: block; border-radius: 4px; margin-bottom: 15px;"/>
                  <h3 style="font-size: 18px; margin: 0 0 5px; color: #333333;">Тут не лолз</h3>
                  <p style="font-size: 16px; color: #e74c3c; margin: 0 0 10px; font-weight: bold;">0 ₽ <span style="text-decoration: line-through; color: #999999; font-weight: normal; margin-left: 5px;">69 999 ₽</span></p>
                  <a href="#" style="font-size: 14px; color: #3498db; text-decoration: none;">Подробнее →</a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
 
        <tr>
          <td align="center" style="padding: 0 30px 30px;">
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center" bgcolor="#e74c3c" style="border-radius: 4px;">
                  <a href="https://example.com/sale" target="_blank" style="font-size: 16px; color: #ffffff; text-decoration: none; padding: 12px 30px; display: inline-block; font-weight: bold;">Перейти к покупкам</a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

6. Письмо-напоминание (корзина)

[/B]
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" style="padding: 40px 20px; background: #f5f5f5;">
      <table width="600" border="0" cellspacing="0" cellpadding="0" style="background: #ffffff; border-radius: 8px;">
        <tr>
          <td style="padding: 30px;">
            <h2 style="font-size: 22px; margin: 0 0 20px; color: #333333;">Вы забыли кое-что в корзине!</h2>
            <p style="font-size: 16px; line-height: 1.5; color: #666666; margin: 0 0 25px;">Сохранили для вас выбранные товары:</p>
            
            <!-- Товар в корзине -->
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-bottom: 20px; border-bottom: 1px solid #eeeeee; padding-bottom: 20px;">
              <tr>
                <td width="100" valign="top" style="padding-right: 20px;">
                  <img src="product-cart.jpg" width="100" alt="Товар" style="display: block; border-radius: 4px;"/>
                </td>
                <td valign="top">
                  <h3 style="font-size: 18px; margin: 0 0 5px; color: #333333;">Беспроводной лолз</h3>
                  <p style="font-size: 14px; color: #666666; margin: 0 0 10px;">Артикул: ЛОЛЗ</p>
                  <p style="font-size: 18px; color: #2ecc71; margin: 0; font-weight: bold;">999 999 999 ₽</p>
                </td>
              </tr>
            </table>
            
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 30px 0;">
              <tr>
                <td>
                  <p style="font-size: 18px; margin: 0; text-align: right;">
                    <span style="color: #666666;">Итого:</span> 
                    <span style="color: #333333; font-weight: bold; margin-left: 10px;">5 999 ₽</span>
                  </p>
                </td>
              </tr>
            </table>
            
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center">
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td align="center" bgcolor="#2ecc71" style="border-radius: 4px;">
                        <a href="https://example.com/cart" target="_blank" style="font-size: 16px; color: #ffffff; text-decoration: none; padding: 12px 30px; display: inline-block; font-weight: bold;">Завершить покупку</a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
[B]

7. Письмо-благодарность за заказ

[/B]
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" style="padding: 40px 20px; background: #f9f9f9;">
      <table width="600" border="0" cellspacing="0" cellpadding="0" style="background: #ffffff; border-radius: 8px; border: 1px solid #eeeeee;">
        <tr>
          <td style="padding: 40px 30px;">
            <h1 style="font-size: 24px; margin: 0 0 20px; color: #333333; text-align: center;">Спасибо за ваш заказ!</h1>
            
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 30px 0; background: #fafafa; border-radius: 4px; padding: 20px;">
              <tr>
                <td>
                  <p style="font-size: 16px; margin: 0 0 10px;"><strong>Номер заказа:</strong> #123456</p>
                  <p style="font-size: 16px; margin: 0 0 10px;"><strong>Дата:</strong> 15 мая 2024</p>
                  <p style="font-size: 16px; margin: 0 0 10px;"><strong>Сумма:</strong> 12 999 ₽</p>
                  <p style="font-size: 16px; margin: 0;"><strong>Способ оплаты:</strong> Карта онлайн</p>
                </td>
              </tr>
            </table>
            
            <h2 style="font-size: 20px; margin: 30px 0 15px; color: #333333;">Состав заказа:</h2>
            
            <!-- Список товаров -->
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-bottom: 30px;">
              <tr>
                <td style="padding: 15px 0; border-bottom: 1px solid #eeeeee;">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="80" valign="top" style="padding-right: 15px;">
                        <img src="order-item.jpg" width="80" alt="Товар" style="display: block; border-radius: 4px;"/>
                      </td>
                      <td valign="top">
                        <h3 style="font-size: 16px; margin: 0 0 5px; color: #333333;">Смартфон ЛОЛЗ</h3>
                        <p style="font-size: 14px; color: #666666; margin: 0 0 5px;">1 × 59 999 ₽</p>
                        <p style="font-size: 14px; color: #666666; margin: 0;">Артикул: ЛОЛЗ</p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
            
            <p style="font-size: 16px; line-height: 1.6; color: #666666; margin: 0 0 30px;">Мы уже начали собирать ваш заказ. Как только он будет готов к отправке, вы получите уведомление с номером отслеживания.</p>
            
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center">
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td align="center" bgcolor="#3498db" style="border-radius: 4px;">
                        <a href="https://example.com/orders/123456" target="_blank" style="font-size: 16px; color: #ffffff; text-decoration: none; padding: 12px 30px; display: inline-block; font-weight: bold;">Отследить заказ</a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
[B]

8. Письмо-приглашение на событие

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" style="padding: 40px 20px; background: #f0f8ff;">
      <table width="600" border="0" cellspacing="0" cellpadding="0" style="background: #ffffff; border-radius: 8px; overflow: hidden;">
        <!-- Изображение события -->
        <tr>
          <td>
            <img src="event-banner.jpg" width="100%" alt="Название события" style="display: block;"/>
          </td>
        </tr>
 
        <tr>
          <td style="padding: 30px;">
            <h1 style="font-size: 26px; margin: 0 0 15px; color: #333333; text-align: center;">Приглашаем на наш вебинар!</h1>
            <p style="font-size: 16px; line-height: 1.6; color: #666666; margin: 0 0 25px; text-align: center;">15 мая в 19:00 (МСК) | Онлайн | Бесплатно</p>
   
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 30px 0;">
              <tr>
                <td style="padding: 15px; background: #f9f9f9; border-radius: 4px;">
                  <p style="font-size: 16px; margin: 0 0 10px;"><strong>Тема:</strong> Новые тренды на ЛОЛЗЕ</p>
                  <p style="font-size: 16px; margin: 0 0 10px;"><strong>Спикер:</strong> Чалл Чаллович, CEO компании</p>
                  <p style="font-size: 16px; margin: 0;"><strong>Продолжительность:</strong> 1,5 часа</p>
                </td>
              </tr>
            </table>
   
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center" style="padding: 20px 0 0;">
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td align="center" bgcolor="#e74c3c" style="border-radius: 4px;">
                        <a href="https://example.com/event" target="_blank" style="font-size: 16px; color: #ffffff; text-decoration: none; padding: 12px 30px; display: inline-block; font-weight: bold;">Зарегистрироваться</a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

На этом всё. Удачи!


Наш форум: https://zelenka.guru

Наши проекты в Telegram: https://t.me/zelenka_guarantor_robot








Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org