Загрузка...
HTML верстка писем. Из опыта работы
27 июн 2025
СМАК
1289
10
  1. СМАК
    Кому понравилось (10)
    СМАК Автор темы 27 июн 2025 Почты - https://lolz.live/threads/7694787/ :pwalk: 6254 13 май 2021
    :stitchcute: Почты за отзыв​
    Оптовые покупки

    скидка 5% - от 2500 руб.
    скидка 10% - от 5000 руб.
    Купить можно либо через бота, либо через поддержку​
    • Скидка 5% - от 1000 руб. - 1kopt
    • Скидка 15% - от 2500 руб. - 2_5kopt
    • Скидка 20% - от 5000 руб. - 5kopt​

    Скидка новым клиентам
    По промокоду smakstore новые клиенты получают скидку в 5%
    (при заказе от 10 руб.)    ​
    [IMG]​


    Бот Автопродаж
    https://t.me/smakstorebot

    В нашем ассортименте вы найдёте такие виды почт, как: Gmail com, Mail ru, Rambler, FirstMail, Hotmail, Outlook, Onet pl, Proton me, NotLetters com, Mail tm и другие!
    Если нет нужного вам домена, можете рассказать нам об этом, добавим.
    Предложка:     https://forms.gle/kLFPjoKZfCs43dvy9

    Оплата: Лолз / Cryptobot / Cryptomus / РУ Карты / TGstars

    Отзывы
    ​
    1.Напишите МНЕ о том, что вы хотите получить товар/баланс за отзыв
    2.После получения напишите отзыв в этой теме, приложив минимум 1-2 скрина
    где видно переписку со мной и полученный товар    ​
    • Лучшие Почты [Деп 11к] | Gmail, Outlook, Mail, Rambler и др. | Smak Store
    https://lolz.live/threads/7694787/

    •     АВТО-ВЫДАЧА | Подарок за отзыв | Telegram STARS и PREMIUM| БЕЗОПАСНО | БЕЗ KYC
    https://lolz.live/threads/8300531/

    •     НАКРУТКА | SmakSMM | 56+ Сервисов
    https://lolz.live/threads/7614007/

    • Telegram каналы| User Agent | Mega NZ
    https://lolz.live/threads/8017354/

    • Паки для перепродажи | 50% с рефералов
    https://lolz.live/threads/8311988/

    • 3D/2D Дизайн
    https://lolz.live/threads/6663675/


    Партнёрам

    • Реклама В Telegram Боте
    https://lolz.live/threads/8152861/

    • Реклама бест почт форума
    https://lolz.live/threads/7320572/

    • Смак ищет поставщиков
    https://lolz.live/threads/8021324/​
    Gmail
    Gmail - Nigeria | 30 ₽
    Gmail (Гретые) | 40 ₽
    Gmail - RU
    Gmail (от 5 шт.) | 62 ₽
    Gmail | 65 ₽
    Gmail - Iran
    Gmail (от 5 шт.) | 67 ₽
    Gmail | 70 ₽
    Gmail - 5G
    Gmail (от 5 шт.) | 71 ₽
    Gmail | 75 ₽
    Gmail - Turkey
    Gmail | 50 ₽
    Gmail - USA
    Gmail (от 5 шт.) | 80 ₽
    Gmail - USA | 85 ₽
    YouTube
    YouTube (от 5 шт.) | 85 ₽
    YouTube | 90 ₽
    Rambler
    Rambler (IMAP, POP3, SMTP)
    Rambler (от 250 шт.) | 1,40 ₽
    Rambler | 1,50 ₽
    Outlook
    Outlook (IMAP, POP3, SMTP)
    Outlook (от 75 шт.) | 4,75 ₽
    Outlook | 5 ₽
    Outlook (Чистые)
    Outlook (от 75 шт.) | 4,75 ₽
    Outlook | 5 ₽
    GMX
    GMX COM (IMAP, POP3, SMTP) | 2,50 ₽
    Proton me
    Proton me | 10,40 ₽
    Proton me - с доп. почтой | 20 ₽
    NotLetters
    Почты на личном домене
    NotLetters (от 300 шт.) | 1,24 ₽
    NotLetters | 1,30 ₽
    Mail com
    Null net | 2,50 ₽
    Europe com | 2,50 ₽
    USA com | 2,50 ₽
    Asia com | 2,50 ₽
    Dr com | 2,50 ₽
    Yandex
    Yandex (IMAP, POP3, SMTP)
    Yandex (от 25 шт.) | 12 ₽
    Yandex | 13 ₽
    Yandex - временные | 0,35 ₽
    Hotmail
    Hotmail (Чистые)
    Hotmail (от 75 шт.) | 4,75 ₽
    Hotmail | 5 ₽
    Gazeta pl
    Gazeta pl (IMAP) | 3,20 ₽
    Firstmail
    Firstmail - PRIVILEGED (для всего) | 0,56 ₽
    Firstmail - обычные | 0,24 ₽
    Firstmail - реальные логины | 0,27 ₽
    Firstmail STEAMED | 0,54 ₽
    Firstmail Inst/Fb | 0,39 ₽
    Mail tm
    Mail tm | 0,01 ₽
    RU​
    ​
    При покупке любого товара Клиент автоматически принимает пользовательское соглашение!​

    1. При покупке любого товара Клиент автоматически принимает пользовательское соглашение, а также условия возврата!
    2. Клиент несет полную ответственность за любые действия, совершаемые с использованием приобретенного аккаунта, или ******-сервера, или софта, или иного товара.
    3. Клиент обязуется не использовать аккаунт или ******-сервер, или софт, или иной приобретенный товар для любых противоправных действий. ("Запрещена любая чернуха")
    4. Клиент обязуется не нарушать правила использования сервиса Telegram при использовании приобретенного аккаунта.
    5. Клиент обязуется не передавать или продавать аккаунт или ******-сервер, или софт третьим лицам без согласия продавца(компании).
    6. Использование товара - это такие действия как:
      1. Вход на аккаунт (как в ручную, так и программой).
      2. Отправление сообщений, выставление постов или иные подобные действия
      3. Привязка аккаунта/аккаунтов к почте или аккаунта
      4. Подключение к ******-серверу (любой интернет трафик включается)
      5. Запуск софта или его модификации
    7. Клиент обязуется использовать ******/******-серверы при входе и использовании купленных товаров. Один ****** - один аккаунт.
    8. Гарантия на каждый товар - 24 часа с момента покупки (гарантия работает только в случае не использования купленного аккаунта, а также соблюдения иных правил и пунктов пользовательского соглашения).
    9. Оплата физическими лицами производится только посредством электронных платежей.
    10. Возврат денежных средств возможен только на внутренний баланс SmakStore.
    11. Мы не несем ответственности в случае ошибки при переводе средств для пополнения вашего внутреннего баланса (неверный адрес кошелька, опечатки и т.д.). Возврат средств или зачисление на баланс не возможны и рассматриваться не будут.
    12. Пополняя внутренний баланс, вы соглашаетесь с тем, что вывод в дальнейшем этих средств обратно осуществляться не будет.
    13. На почтах могут быть письма, не является причиной для возврата средств или замены.
    14. Создатель магазина или иные лица, связанные с магазином не несут ответственности за купленный аккаунт, или софт, или ******-сервер после использования его, а также продавец(компания) не несёт ответственность за аккаунт(ы), привязанные к купленному аккаунту.
    15. В случае обнаружения нарушений со стороны Клиента, продавец(компания) оставляет за собой право заблокировать купленный аккаунт, или софт, или ******-сервер, профиль Клиента в магазине, а также отказать Клиенту в возврате средств.
    16. Правила могут быть изменены.


    ENG​
    ​
    When purchasing any product, the Client automatically accepts the user agreement!​

    1. When purchasing any product, the Client automatically accepts the user agreement, as well as return policy!
    2. The Client is fully responsible for any actions performed using the purchased account or proxy server or other product.
    3. The Client undertakes not to use the account or proxy server or other purchased product for any illegal actions. ("Any any black stuff is prohibited")
    4. The Client undertakes not to violate the rules for using the Telegram service when using the purchased account.
    5. The Client undertakes not to transfer or sell the account or proxy server to third parties without the consent of the seller (company).
    6. Using the product is the following actions:
      1. Logging into an account (both manually and by program).
      2. Sending messages, posting or other similar actions
      3. Linking an account/accounts to mail or account
      4. Connecting to a proxy server (any Internet traffic is included)
      5. Launching software or modifying it
    7. The Client undertakes to use proxy/proxy servers when entering and using purchased goods. One proxy - one account.
    8. The guarantee for each product is 24 hours from the date of purchase (the guarantee only works if the purchased account is not used, as well as compliance with other rules and clauses of the user agreement).
    9. Payment by individuals is made only through electronic payments.
    10. Refunds are only possible to the internal SmakStore balance.
    11. We are not responsible for any errors in transferring funds to replenish your internal balance (incorrect wallet address, typos, etc.). Refunds or crediting to the balance are not possible and will not be considered.
    12. By replenishing the internal balance, you agree that these funds will not be withdrawn in the future.
    13. There may be letters in the mail, this is not a reason for a refund or replacement.
    14. The store creator or other persons associated with the store are not responsible for the purchased account, or software, or proxy server after using it, and the seller (company) is not responsible for the account(s) linked to the purchased account.
    15. In case of detection of violations on the part of the Client, the seller (company) reserves the right to block the purchased account, or software, or proxy server, the Client's profile in the store, and also to refuse the Client a refund.
    16. The rules can be changed.
    почты | аккаунты | gmail | гмаил | gмаил | mailru | маилру | mail ru | mail | маил | mailtm | mail tm | mail tm купить | mailtm купить | mail tm рендер | yahoo | яху | яху почта | почта yahoo | rambler | рамблер | рамблер почта | gmx | гмх | gmx почта | почта gmx | onet pl | onetpl | онет пл | онет | proton | protonmail | proton mail | протон | протонмайл | протон почта | outlook | аутлук | hotmail | хотмаил | хотмайл | хот мейл | почта hotmail | почта outlook | cheap email | почты для регистрации | регистрационные почты | email аккаунты | buy email accounts | электронные почты | mail аккаунты | accounts for mail | дешевые почты | продажа почт | купить почты | email store | почты для работы | почта для аккаунтов | регистрация почт | gmail аккаунты | mailru аккаунты | mailtm аккаунты | почтовые сервисы | gugl pochta | ramblerru | pochta gmail | pochta mailru | pochta mailtm | pochta rambler | pochta protonmail | pochta yahoo | pochta outlook | pochta hotmail | pochty | эл почта купить | email buy | email дешево | registration email | pochta buy | реферальная система | реферальные бонусы | рефералка | магазин с реферальной системой | магазин с рефералкой | бонусы за рефералов​
    [IMG]
    Добрый день, гость! Приятного прочтения!

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


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


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

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

    [IMG][IMG]

    [IMG]
    [IMG]
    [IMG]

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

    1. Перенести в зону шаблона
    2. Написать любой нужный текст    [IMG]
    1. Перенести в зону шаблона
    2. Импортировать с компьютера

    [IMG]
    1. Перенести в зону шаблона
    2. Изменить цвет, размер, текст кнопки
    [IMG]
    Добавление свободного пространства в зону письма
    1. Перенести в зону шаблона
    2. Потянуть стрелочку для изменения свободного места

    [IMG]
    [IMG]
    [IMG]

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

    [IMG][IMG]
    [IMG]

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

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



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

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

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

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

    [IMG]
    HTML
    <!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. Контейнер для полноценного письма

    [IMG]
    HTML
    <!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. Адаптивное меню

    [IMG]
    HTML
    <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. Письмо-подтверждение регистрации

    [IMG]
    HTML
    <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 колонки)

    [IMG]
    HTML
    <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. Письмо-напоминание (корзина)


    [IMG]
    HTML
    [/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. Письмо-благодарность за заказ


    [IMG]
    HTML
    [/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. Письмо-приглашение на событие


    [IMG]
    HTML
    <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>
    Друзья, вот та минимальная информация об HTML верстке, которой я поделился с вами.
     
    Этот материал оказался полезным?
    Вы можете отблагодарить автора темы путем перевода средств на баланс
    Отблагодарить автора
    27 июн 2025

Комментарии

Загрузка...
Top