Natalia Ustimenko

Head of Direct Marketing

Як зверстати кнопку в листі

Кнопка в листі — один із важливих елементів email-розсилки, який прикрашає лист і допомагає зробити його більш ефективним. Без заклику до дії вже важко уявити проморозсилки і транзакційні листи — вони просто необхідні, щоб захопити увагу клієнтів і спонукати їх купити/прочитати/перейти на сайт тощо.

Для продвинутих користувачів, напевно, простіше зверстати кнопку з нуля, аніж брати вже готову й морочитися з її змінюванням. Ми розглянули популярні практики, за допомогою яких можна зробити кнопку СТА в різні способи.

Короткий зміст статті про те, як зверстати кнопку:

1. Кнопки у вигляді картинок

Якщо ви не бажаєте морочити голову з версткою або дизайн вашого листа потребує унікальних кнопок зі спецефектами, як от: тіні, підсвітка, анімація, градієнти або нестандартні шрифти, — ви завжди зможете використати кнопку, намальовану в графічному редакторі. Така кнопка виглядатиме  стовідсотково однаково всюди, але існує ймовірність, що деякі поштові клієнти її одразу не завантажать. Той самий Outlook за замовчуванням блокує завантаження картинок.

Намальована кнопка

Не забувайте використовувати ALT-текст для кнопок-картинок. Дублюйте в ньому назву вашої кнопки, а також застосовуйте стилі для оформлення ALT-тексту.

Last post

2. Campaign Monitor

Компанія розробила інструмент для створення кнопок на основі VML. Мова VML використовується для коректного відображення кнопки в MS Outlook.

VML-кнопка в CampaingMonitor

Можна легко створити таку кнопку за посиланням buttons.cm, вам треба буде тільки вказати вихідні параметри, і код для використання згенерується автоматично.

Генерация кнопки Campaign Monitor

Залежно від редактора, у якому ви плануєте додати кнопку, її, можливо, доведеться трохи допрацьовувати.

Приклад коду для тестування:

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://company.com" style="height:35px;v-text-anchor:middle;width:120px;" arcsize="12%" stroke="f" fillcolor="#28b422">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="http://company.com"
style="background-color:#28b422;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:35px;text-align:center;text-decoration:none;width:120px;-webkit-text-size-adjust:none;">Купити</a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]--></div>

Відверто кажучи, виходить забагато коду. В Outlook така кнопка має привабливий вигляд, але вона не є універсальною через її фіксовані розміри. Таким чином,  цю кнопку треба постійно генерувати наново, змінюючи розміри залежно від довжини назви.

Створюйте привабливі листи!

3. MailChimp

Компанія пропонує використовувати кнопки на основі таблиці. Зразок кнопки ви можете знайти на сторінці Buttons.

Кнопка от сервиса MailChimp

Також компанія рекомендує використовувати адаптивні кнопки, у такому випадку ширина заклику до дії залежатиме від обсягу тексту всередині клітинки таблиці.

Кнопка в сервисе MailChimp

Приклад коду для тестування:

<table border="0" cellpadding="0" cellspacing="0" style="background-color:#28b422; border-radius:4px;">
  <tr>
    <td align="center" valign="middle" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:30px;">
      <a href="http://company.com" target="_blank" style="color:#FFFFFF; text-decoration:none;">Read More Stories On Our Blog</a>
    </td>
  </tr>
</table>


Клікнути таку кнопку вийде, тільки якщо точно влучити по її назві. Тут теж вийшло досить багато коду, отже це збільшить розмір листа.

4. eSputnik

Ми верстаємо наші кнопки, використовуючи як основний елемент посилання, обгорнуте в елемент span для створення навколо кнопки ефектів межі або тіні

Ми не встановлюємо фіксованих розмірів для кнопок, тому розміри наших кнопок збільшуються відповідно до збільшення розмірів шрифту тексту та його довжини.

«Об’єм» кнопки, інакше кажучи, відступи навколо тексту, задається у вигляді товщини границь посилання. Цей прийом дозволяє кнопці лишитися об'ємною в Outlook і не перетворитися на посилання з кольоровим фоном. Однак Outlook не підтримує css-властивість border-radius (та ін.), тому закруглена кнопка в Outlook матиме гострі кути.

Кнопка в системе eSputnik

Ось такий вигляд мають CSS-класи зі стилями наших кнопок. Ви можете експериментувати з цими стилями, щоб досягти бажаного результату.

СSS классы со стилями наших кнопок

А це HTML-верстка самої кнопки:

Вёрстка кнопки

Приклад коду для тестування:

<td align="center" class="esd-block-button es-p10" style="" bgcolor="transparent">
<span class="es-button-border" style="border-width: 4px; background: rgb(40, 180, 34);">
<a href="http://company.com" class="es-button" target="_blank"
style="background: rgb(40, 180, 34); border-color: rgb(40, 180, 34);">ПОКУПКИ ONLINE</a> </span> </td>

При створенні листа ви вибираєте блок кнопки й додаєте її до листа. Крім того, у нашій системі є готові набори кнопок, які можна додавати легким рухом руки.

Добавление блока с кнопкой

Перед вами відкриються всі налаштування кнопки, які можна задати кількома кліками навіть без знань верстки. У тому числі адаптивність кнопки та розміщення в листі.

Опции для настройки кнопки

Створення кнопки, як і всього листа, не потребуватиме забагато часу. У редакторі ви зможете задати налаштування кнопки:

  • відступи,

  • обведення,

  • вирівнювання,

  • адресу посилання,

  • розміщення в листі,

  • адаптивність,

  • кольорову гаму.

Кнопка в email-письме

От і все! Залишиться тільки доповнити вашу кнопку привабливим закликом до дії.

До речі, з метою комфортного користування нашою системою і швидкого старту ми даруємо всім нашим новим користувачам перший безкоштовний шаблон у стилі сайту клієнта. У шаблоні так само створюємо стилі для головної та другорядної кнопки вашої майбутньої розсилки. 

До нових зустрічей!:)

P.S .: Налаштуйте додатковий канал комунікації для розсилок — Viber — кнопки тут робити так само легко.)

0.0 з 5 на основі 0 оцінок

Natalia Ustimenko

Head of Direct Marketing

The author of 200+ articles in the eSputnik blog. A speaker at industry conferences, a lecturer at email marketing classes.

Коментарі 0