Сверстать кнопку в письме?
Здравствуйте. Подскажите пожалуйста. Как правильно сверстать кнопку для письма которое открывается в стандартном Windows 10 Почтовике. А то почему-то он padding для тега игнорирует? Windows 10 Почтовик Google Chrome — G.
- Вопрос задан более трёх лет назад
- 3654 просмотра
1 комментарий
Простой 1 комментарий
padding нужно использовать только для ячеек таблицы td. Работает даже для Outlook 2007
Решения вопроса 0
Ответы на вопрос 2
Полина @paulinekorkina
Верстальщик
Верстала письмо под разные почтовики, в Windows 10 смотрится хорошо.
Кнопка-ссылка кроссплатформенно верстается только таблицей, насколько я знаю, правда, я делала упор на Outlook и The Bat! (последний в плане верстки — просто жесть). Паддинги многие почтовики не хавают, поэтому в качестве левого и правого мы используем пустые столбцы таблицы с заданной шириной. У меня окончательный вариант получится такой:
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
Если нужна кнопка с border-radius:
https://buttons.cm/
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
- +2 ещё
Как распределить элементы на адаптивной, векторной кривой?
- 1 подписчик
- час назад
- 20 просмотров
Добавить кнопку
Чтобы добавить кнопку, выберите на вкладке «Содержимое» блок «Кнопка» и перетащите его на рабочую область.
Нажмите на добавленный блок, чтобы открыть вкладку «Свойства блока». На этой вкладке вы сможете настроить кнопку под дизайн своего макета.
Рассмотрим настройки более подробно.
Искусственный интеллект. Если вы не можете определиться с текстом для кнопки, сгенерируйте его с помощью искусственного интеллекта. Для этого нажмите на кнопку «Пишите с AI», сформулируйте свой запрос, нажмите «Сгенерировать» и добавьте понравившийся вариант в письмо.
Действие. При помощи этой настройки вы можете:
- добавить к кнопке ссылку, чтобы при нажатии на нее пользователь мог перейти на сайт;
- настроить действие, чтобы при нажатии на кнопку пользователь смог позвонить вам, отправить письмо или SMS.
Выберите из выпадающего списка нужное действие и заполните соответствующие поля.
Авто ширина. По умолчанию ширина кнопки регулируется автоматически, но вы можете изменить ее вручную. Для этого отключите переключатель «Авто ширина» и с помощью ползунка настройте ширину кнопки.
Шрифт. С помощью данной настройки вы можете изменить шрифт для текста кнопки. Выберите нужный шрифт из выпадающего списка.
Толщина шрифта. По умолчанию толщина шрифта обычная. Но вы можете выделить текст кнопки жирным шрифтом, для этого выберите в выпадающем списке значение «Жирный».
Размер шрифта. С помощью данной настройки вы можете изменить размер текста для кнопки.
Цвет фона. Параметр для настройки цвета кнопки. Укажите hex-код цвета или подберите подходящий цвет в палитре.
Цвет текста. Параметр для настройки цвета текста в кнопке. Укажите hex-код цвета или подберите подходящий цвет в палитре.
Выравнивание. Параметр для выравнивания кнопки относительно всего письма. Вы можете переместить ее к левому/правому краю письма или оставить по центру.
Межстрочный интервал. С помощью данного параметра можно изменить интервал между строками текста внутри кнопки.
Межбуквенный интервал. С помощью данного параметра можно изменить интервал между символами текста внутри кнопки.
Направление текста. Параметр позволяет изменить направление текста внутри кнопки слева направо или справа налево.
Закругление углов. С помощью данного параметра вы можете изменить радиус скругления углов кнопки.
Отступы содержимого. Параметр позволяет изменить положение содержимого в кнопке.
Граница. Параметр позволяет добавить обводку к кнопке.
Отступы блока. Параметр позволяет изменить положение кнопки в блоке.
Скрыть блок. С помощью данного параметра вы можете скрыть блок:
- на ПК или мобильной версии письма;
- в AMP или HTML версии письма.
Как сверстать кнопку в письме
Кнопка в письме — один из важных элементов email-рассылки, который украшает письмо и помогает сделать письмо более эффективным. Без призыва к действию уже трудно представить проморассылки и транзакционные письма — они просто необходимы, чтобы захватить внимание клиентов и побудить их купить/почитать/перейти на сайт и т.д.
Для продвинутых пользователей, наверное, проще сверстать кнопку с нуля, чем брать уже готовую и заморачиваться над изменениями. Мы разобрали популярные практики, как можно сделать кнопку СТА разными способами.
Краткое содержание статьи, как сверстать кнопку:
1. Кнопки в виде картинок
Если вы не хотите мучиться с вёрсткой или дизайн вашего письма требует уникальных кнопок со спец. эффектами, такими как: тени, свечения, анимация, градиенты или нестандартные шрифты — вы всегда сможете использовать кнопку нарисованную в графическом редакторе. Такая кнопка будет выглядеть 100% одинаково везде, но есть вероятность, что некоторые почтовые клиенты сразу ее не загрузят. Тот же Outlook по-умолчанию блокирует загрузку картинок.
Не забывайте использовать ALT-текст для кнопок-картинок. Дублируйте в нем название вашей кнопки, а так же применяйте стили для оформления ALT-текста.
2. Campaign Monitor
Компания разработала инструмент для создания кнопок на основе VML. Язык VML используется для корректного отображения кнопки в MS Outlook.
Создать такую кнопку можно легко по ссылке buttons.cm, вам нужно будет лишь указать исходные параметры и вам автоматически сгенерится код для использования.
В зависимости от редактора, где вы планируете добавить кнопку, возможно, придётся её немного дорабатывать.
Пример кода для тестирования:
Откровенно говоря, слишком много кода получается. В Outlook такая кнопка хорошо смотрится, но она не универсальная из-за фиксированных размеров. Получается, её нужно постоянно генерировать заново, изменяя размеры в зависимости от длины названия.
3. MailChimp
Компания предлагает использовать кнопки на основе таблицы. Образец кнопки вы можете найти на странице Buttons.
Также компания рекомендует использовать адаптивные кнопки, в таком случае ширина призыва к действию будет зависеть от объема текста внутри ячейки таблицы.
Пример кода для тестирования
Кликнуть по такой кнопке получится только если точно попасть по ее названию. Так же получилось довольно много кода, а значит — это увеличит размера письма.
4. eSputnik
Мы верстаем наши кнопки используя в качестве основного элемента — ссылку, которая обернута в span элемент для создания эффектов границы вокруг кнопки или отбрасывания тени.
Мы не задаем фиксированных размеров кнопкам, поэтому наши кнопки увеличиваются в размерах вместе с увеличением размеров шрифта текста и его длины.
Делайте красивые письма!
«Объем» кнопки, или иными словами отступы вокруг текста, задается в виде толщины границ ссылки. Этот прием позволяет кнопке остаться объемной в Outlook и не превратиться в ссылку с цветным фоном. Однако Outlook не поддерживает css-свойство border-radius (и др.), поэтому закругленная кнопка в Outlook будет с острыми углами.
Вот так выглядят CSS-классы со стилями наших кнопок. Вы можете экспериментировать с этими стилями, чтобы добиться желаемого результата.
А это HTML верстка самой кнопки:
Пример кода для тестирования:
При создании письма выбираете блок кнопку и добавляете её в письмо.Кроме того, в нашей системе есть готовые наборы кнопок, которые можно добавлять лёгким движением руки.
Перед вами откроются все настройки кнопки, которые можно задать в несколько кликов даже без знаний вёрстки. В том числе, адаптивность кнопки и расположение в письме.
Создание кнопки, как и всего письма не займёт много времени. В редакторе вы сможете задать настройки кнопки:
- отступы,
- обводку,
- выравнивание,
- адрес ссылки,
- расположение в письме,
- адаптивность,
- цветовую гамму.
Вот и всё! Останется только дополнить вашу кнопку красивым призывом к действию.
Кстати, всем нашим новым пользователям (для комфортного пользования нашей системой и быстрого старта) мы дарим первый бесплатный шаблон в стиле сайта клиента. В шаблоне так же создаем стили для главной и второстепенной кнопки вашей будущей рассылки.
До новой встречи!:)
P.S.: Настройте дополнительный канал коммуникации для рассылок — Viber — кнопки здесь делаются так же просто.)
Практичный email маркетинг
Однако здесь не обойтись и без сложностей. Как видео и опросы , кнопка в письме относится к интерактивному контенту. В идеале хочется видеть её объёмной, кликабельной и реагирующей на щелчок пользователя — так же, как на сайте:
Однако как раз последнего эффекта в рассылке достичь крайне сложно.
Из-за технических особенностей почтовых клиентов вставить кнопку тем же кодом, что и на сайте, в письмо не получится.
Впрочем, в запасе у нас как всегда есть парочка обходных путей:)
Как вставить кнопку в письмо
#1. Разместить кнопку картинкой
Очевидный способ: находим подходящее изображение кнопки (просим нарисовать дизайнера), пишем мотивирующую к действию надпись — узнать больше, читать полностью (подробнее о работе с текстом ссылок см. Пишем письма ) — и аккуратно вырезаем то, что получилось.
Вставляем картинкой в нужное место письма:
Для почтовых клиентов, которые по умолчанию могут не загружать картинки (например, gmail), страхуемся: прописываем в html-коде изображения стили фона и шрифта , а также alt-текст :
Тогда в отсутствие картинки кнопка в письме тоже будет смотреться приемлемо:
“Подкладываем” под картинку нужную ссылку и добавляем последний штрих — атрибут title.
Пусть при наведении на кнопку подписчику демонстрируется небольшая подсказка, что именно произойдёт, если он кликнет на изображение:
Достоинства этого способа: вы можете вставить в письмо любую, сколь угодно “навороченную” графически кнопку.
Недостатки: кнопка в этом случае — всё же обычная картинка, которая может и не загрузиться в части почтовых клиентов.
#2. Разместить кнопку таблицей
Кнопка в письме может быть свёрстана “классическим” html-кодом.
Для этого просто создаём её, как ячейку во вложенной таблице. Для ячейки прописываем цвет фона , обрамление границей , стиль/размер/цвет шрифта :
В итоге получается совсем неплохо:
Такую кнопку удобно редактировать: поменять цвет, вписать другой текст (не забываем про ссылку с атрибутом title, чтобы расшифровать подписчику действие кнопки).
Таблица гарантированно отобразится во всех почтовых клиентах. Её достаточно просто можно адаптировать под мобильные устройства (можно задать ширину таблицы в % от ширины экрана).
Но графические возможности здесь беднее.
Скругление углов, градиент фона, затейливые шрифты — все эти и прочие “надстройки” усложнят вёрстку и сделают её отображение в разных почтовых клиентах нестабильным.
Какой способ предпочтительнее? Здесь нет 100% верного ответа, многое зависит от шаблона, который вы собираетесь использовать.
Если дизайн шаблона подразумевает простые и “строгие” кнопки, удобны таблицы. Если же кнопка состоит сплошь из графических изысков, то проще будет использовать вставку картинкой.
Кнопки в Мэйл Чимп
Графический редактор MailChimp ( Drag&Drop ) предусматривает возможность автоматической вставки кнопок:
Кнопки, которые предлагает MailChimp, простые и несколько однообразные, но работать с ними удобно.
Настраивается текст, ссылка, граница, радиус скругления углов, цвет фона и расположение. Кнопка автоматически адаптируется под мобильные устройства.
Мэйл Чимп использует в этом случае метод таблицы, однако выполняет всю рутинные операции по вёрстке за пользователя — стоит “перетащить” блок с кнопкой на поле письма, как готовый html-код будет встроен туда автоматически.
Дополнительная возможность — кнопки расшаривания социальных сетей:
Они также снабжены достаточно гибкими настройками (набор социальных сетей, оформление, расположение и тип кнопок).
Правда, пока в наличии только кнопки западных соцсетей (Facebook, Twitter, Google+ и проч.). Вставить, к примеру, кнопочку Вконтакте или Одноклассники с помощью этого функционала нельзя.
Кнопки могут украсить ваше письмо. Правильно оформленная и размещённая кнопка поможет приподнять и клики.
Однако надеяться, что это “волшебный” рецепт увеличения кликабельности в 2-3 раза, не стоит. Решающую роль в email маркетинге всё-таки играет контент ваших писем. Если предложение подписчика не заинтересует, никакая сила не заставит его сделать клик мыши, даже если всё ваше письмо будет одной сплошной кнопкой
P.S. В следующей статье побольше поговорим о Мэйл Чимп. Посмотрим, как работать с тегами в этом рассылочном сервисе, создавая персонализацию и динамический контент.
P.P.S. Если вы ещё не подписались на мою рассылку — самое время это сделать. Я не только анонсирую свежие статьи блога, но и делюсь с подписчиками бонусной информацией, а также показываю отдельные приёмы email маркетинга на практике. До встречи в вашем почтовом ящике!