43 Як розмістити кнопки в - тілі - листи практичний email маркетинг

Погодьтеся, є різниця:

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

Втім, в запасі у нас як завжди є парочка обхідних шляхів :)

Як вставити кнопку в лист

Вставляємо картинкою в потрібне місце листи:

Для поштових клієнтів, які за замовчуванням можуть не завантажувати картинки (наприклад, gmail), страхуємося: прописуємо в html-коді зображення стилі фону і шрифту. а також alt-текст:

Тоді під час відсутності картинки кнопка теж буде виглядати прийнятно:

"Підкладаємо" під картинку одне з посилань і додаємо останній штрих - атрибут title.

Нехай при наведенні на кнопку передплатнику демонструється невелика підказка, що саме станеться, якщо він клацне на зображення:

Переваги цього способу: ви можете вставити в лист будь-яку, як завгодно "навороченную" графічно кнопку.

Недоліки: кнопка в цьому випадку - все ж звичайна картинка, яка може і не завантажитися в частині поштових клієнтів.

Кнопку в листі можна зверстати "класичним" html-кодом.
Для цього просто створюємо її, як осередок у вкладеній таблиці. Для осередку прописуємо колір фону. обрамлення кордоном. стиль / розмір / колір шрифту:

У підсумку виходить зовсім непогано:

Таку кнопку зручно редагувати: міняти колір, вписати інший текст (не забуваємо про посилання з атрибутом title. Щоб розшифрувати передплатнику дію кнопки).

Таблиця гарантовано відобразиться у всіх поштових клієнтів. Її досить просто можна адаптувати під мобільні пристрої (можна задати ширину таблиці в% від ширини екрану).

Але графічні можливості тут бідніше.
Обрізка кутів, градієнт фону, вигадливі шрифти - всі ці та інші "надбудови" ускладнять верстку і зроблять її відображення в різних поштових клієнтів нестабільним.

Який спосіб краще? Тут немає 100% вірної відповіді, багато що залежить від шаблону, який ви збираєтеся використовувати.

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

Кнопки в Мейл Чімп

Кнопки, які пропонує MailChimp, прості і дещо одноманітні, але працювати з ними зручно.

Мейл Чімп використовує в цьому випадку метод таблиці. однак виконує всю рутинні операції по верстці за користувача - варто "перетягнути" блок з кнопкою на поле листи, як готовий html-код буде вбудований туди автоматично.

Правда, поки в наявності тільки кнопки західних соцмереж (Facebook. Twitter. Google+ і ін.). Вставити, наприклад, кнопочку Вконтакте або Однокласники за допомогою цього функціоналу можна.

Кнопки можуть прикрасити ваш лист. Правильно оформлена і розміщена кнопка допоможе підняти і кліки.

Однак сподіватися, що це "чарівний" рецепт збільшення кликабельности в 2-3 рази, не варто. Вирішальну роль в email маркетингу все-таки грає контент ваших листів. Якщо пропозиція передплатника не зацікавить, ніяка сила не змусить його зробити клік миші, навіть якщо все ваше лист буде однією суцільною кнопкою

P.S. У наступній статті побільше поговоримо про Мейл Чімп. Подивимося, як працювати з тегами в цьому Розсильні сервісі, створюючи персоналізацію і динамічний контент.

P.P.S. Якщо ви ще не підписалися на мою розсилку - саме час це зробити. Я не тільки анонсують свіжі статті блогу, але і ділюся з передплатниками бонусної інформацією, а також показую окремі прийоми email маркетингу на практиці. До зустрічі у вашій поштовій скриньці!

Займаючись оглядами MailChimp, відчуваю себе кимось на кшталт Геракла, який воює з гідрою))

Навскидку по функціоналу залишили майже все те ж саме, тільки добряче пройшлися по інтерфейсу. З'явилася можливість відправляти листи моментально (раніше мінімальним інтервалом була година). Повинно стати зручніше працювати з ланцюжками тригерів + тепер можна вибирати не тільки дні тижня для відправки, але і тимчасові інтервали протягом дня або навіть конкретний час.

Поки все це дуже незвично, але в потенціалі - вельми цікаво!

Завжди є нова тема для статті, коли дивляться по Mailchimp. Краса!

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

Добрий день, Роман!

спасибі за відповідь)

в тому то і проблема, картинки я нарізав і вставив, а яку посилання проставляти для розшарювання ніяк не можу знайти

Привіт Alexey! А чи не підкажіть, який тег потрібно додати до кнопки «Детальніше», щоб вона в кінцевому підсумку відкривала анонсований в розсилці пост. Заздалегідь при багато вдячний.

Олександр, добрий день!

Вважаю, вам підійде щось типу такого: * | RSSITEM: URL | *

Дякуємо! Цей merge tags підходить. Є ще одні питання. Як тепер прибрати стандартну посилання «Детальніше» розташовується під анонсованої статтею і залишити тільки кнопку?