Как сделать кнопку в письме

Советы по дизайну для создания более кликабельных кнопок призыва к действию для электронной почты

Вы когда-нибудь чувствовали, что ваши рассылки по электронной почте великолепны, но не получают должного количества кликов? Виновником может быть кнопка призыва к действию по электронной почте. Не волнуйтесь, такое случается с лучшими из нас. Но хорошая новость в том, что несколько изменений в дизайне вашей кнопки CTA могут иметь огромное значение.

Почему вас это должно волновать? Цифры говорят сами за себя:

Согласно различной статистике электронного маркетинга, электронная почта является наиболее эффективным инструментом для увеличения продаж и влияния на конверсию ваших маркетинговых кампаний. Хотя некоторые утверждают, что «в наши дни никто не читает электронные письма», они остаются каналом связи №1 для 85% взрослых и источник рентабельности инвестиций №1 для 59% маркетологов.

Более того, электронная почта обеспечивает больше продаж, чем социальные сети:

61% потребителей говорят, что покупают после получения маркетингового электронного письма, и 49% признаются, что ждут писем со скидками от бренда.

Несмотря на все это, не хотите ли вы обратить эту силу в свою пользу?

Персонализированное и целевое, ваше электронное письмо имеет все шансы привлечь потребителей и заинтересовать их покупками у вас. И его призыв к действию — это то, что вам нужно оптимизировать для лучшей конверсии.

Продолжайте читать, чтобы узнать.

5 советов по созданию кликабельной кнопки CTA для электронного письма

Ниже приведены пять практических советов по созданию наилучшего дизайна кнопки CTA для вашего электронного письма. И хотя некоторые из них могут показаться очевидными для опытных email-маркетологов, все пять относятся к числу наиболее распространенных ошибок, которые они допускают на практике.

1) Убедитесь, что есть кнопка электронной почты.

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

Поскольку это влияет на решение пользователя, мотивируя продолжить отношения с вашим брендом или отклонить ваше предложение, закройте электронное письмо и переместите его в корзину.

При использовании платформ электронного маркетинга для кампаний у вас есть несколько вариантов создания CTA: сделайте из него ссылку, изображение или кнопку электронной почты в формате HTML. Чтобы повлиять на решение пользователя и убедить его кликнуть, убедитесь, что вы выберите вариант кнопки:

По статистике, это создает 45% увеличение количества кликов.

На то есть несколько причин:

1. Психологический: большинство людей по-прежнему считают ссылки в электронных письмах спамом, поэтому ваши цели могут просто игнорировать призыв к действию.
2. Техническое: некоторые из ваших потенциальных клиентов не увидят призыв к действию, если вы сделаете его изображением, потому что они отключают изображения в электронных письмах.
3. Удобно: кнопки CTA на основе HTML проще проектировать и контролировать, редактируя их размер, цвет и расположение в теле электронного письма.

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

Интересный факт о HTML-коде кнопки электронной почты заключается в том, что, хотя в электронном письме вы можете увидеть причудливую кнопку с закругленными углами и градиентом, фактический HTML-код самой кнопки очень прост. Это обычный элемент кнопки со стилем, примененным с помощью CSS.

2) Учитывайте его цвет и размер.

Большая вероятность, что вы слышали о цветная психология и его роль в идентичности вашего бренда и вызове особых эмоций у потребителей. То же самое касается кнопки CTA в электронных письмах: при разработке учитывайте ее цвет, чтобы он соответствовал палитре вашего бренда и был достаточно ярким, чтобы потребитель мог видеть, куда нажать.

Из-за упомянутой цветовой психологии эксперты определяют два лучших цвета для кнопок CTA в электронных письмах: оранжевый и зеленый.

Оранжевый означает дружелюбие, а зеленый — мир, поэтому оба цвета идеально подходят для укрепления доверия и пробуждения положительных эмоций при нажатии. Кроме того, оба цвета достаточно яркие, чтобы призыв к действию выделялся в теле письма.

Некоторые настаивают на том, что красный цвет также удобен, потому что он вызывает возбуждение и желание, в то время как другие считают его агрессивным и тормозящим работу. Впрочем, здесь все зависит от контекста.

Какой бы цвет вы ни выбрали, в зависимости от индивидуальности вашего бренда и эмоций, которые вы хотите вызвать, помните также о контрасте и размере кнопки:

Да, он должен выделяться, независимо от вашей маркетинговой цели: чтобы расширить свой список адресов электронной почты, превратите подписчиков в потенциальных клиентов или продавайте продукт напрямую по электронной почте. Но хитрость в том, чтобы сделать так, чтобы оно привлекало внимание, а не отвлекало внимание.

Больше не значит лучше: найдите золотую середину между большим и маленьким и не делайте призыв к действию агрессивно заметным в надежде на больший интерес и клики.

Лучшие практики здесь:

• Выберите цвета кнопок CTA, которые соответствуют идентичности вашего бренда.
• Используйте одинаковые цвета в каждом электронном письме, чтобы подписчики могли ассоциировать их с действиями и быстро распознавать, на что нажимать.
• Сделайте кнопку с призывом к действию более заметной, чем текст электронного письма, но будьте проще: она также должна быть сенсорной для пользователей, читающих ваши электронные письма на мобильных устройствах.
• Сделайте его достаточно ярким, чтобы его можно было идентифицировать: позвольте ему иметь высокий контраст с фоном почты.

3) Помните о тексте на нем

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

В то время как цвет, размер и расположение призыва к действию в электронном письме служат для того, чтобы привлечь внимание пользователя и вызвать эмоции, текст — это то, что помогает ему понять, стоит ли нажимать на него. Чтобы текст призыва к действию работал, оформите его следующим образом:

• Сделайте его ориентированным на действие: читатели должны понимать, что делать и какую выгоду они получат, нажав на ссылку.
• Используйте убедительные глаголы, такие как «получить», «попробовать», «купить»,«зарезервировать», «загрузить»,купить,» и другие. Избегайте этих скучных «кликните сюда» or «представлять на рассмотрение,» Это всего лишь общие инструкции, не имеющие ничего общего с вашим конкретным заказом.
• Текст должен быть коротким: два-три слова; ну пять слов максимум.
• Сделайте размер шрифта достаточно большим, чтобы его было легко читать.
• Рассмотрите разные тексты призыва к действию для разных сегментов клиентов в вашей воронке продаж. Само собой разумеется, что «Купить сейчас» Кнопка электронной почты будет выглядеть высокомерно и несвоевременно в приветственной рассылке, где «Расскажи мне больше» вариант будет работать лучше.

Еще один трюк, который стоит попробовать, — написать текст кнопки призыва к действию в электронном письме от первого лица, если позволяет тон вашего бренда: используйте «я» и «мой» вместо «вы» в тексте кнопки. Например:

• «Дайте мою книгу» не «Возьми свою книгу»
• «Да, мне нужен контент» не «Возьмите свой контент»
• «Пришлите мне комплект» не «Попробуйте свой комплект»
• «Покажи мне, как,» не «Научиться»

Такая персонализация однажды привела к 90% нажмите «Увеличить» для Unbounce, так почему бы не протестировать его и не дать ему новую жизнь прямо сейчас?

4) Правильно разместите призыв к действию в электронной почте

Первое правило клуба email-маркетологов: вы не размещайте более одного призыва к действию в одном электронном письме. Второе правило клуба email-маркетологов: НЕ размещайте в одном письме более одного призыва к действию.

Третье правило клуба email-маркетологов: чтобы ваш призыв к действию привлекал внимание, но не отвлекал внимание, найти его правильно.

Во-первых, что касается количества кнопок CTA в электронном письме:

Принцип «больше возможностей, больше возможностей выбрать и нажать» здесь не работает. Ваши многочисленные призывы к действию могут сбить с толку или ошеломить пользователя. Помните о соотношении внимания в маркетинге: оно должно составлять 1:1 того, что человек может сделать на странице, и того, что вы от него хотите.

Чем больше вариантов вы дадите, тем больше вероятность, что вы потеряете их внимание. Кроме того, вы рискуете вызвать любой из следующих эффектов наличия множества вариантов:

1. Паралич выбора: Чем больше у нас вариантов, тем сложнее или даже снижаетмотивациюперсонала нам решать.
2. Раскаяние покупателя: Чем больше у нас вариантов, тем легче нам будет сожалеть о принятом решении, думая, что оно может быть неправильным.

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

Но, как это часто бывает в маркетинге, из правил есть несколько исключений:

• Не стесняйтесь размещать несколько призывов к действию, если они приведут пользователя к та же страница.
• Рассмотрите несколько призывов к действию в электронном письме, если речь идет об электронной коммерции. продвижение нескольких продуктов/услуг. В этом случае создавайте свое электронное письмо соответствующим образом: разделите его на разделы, каждый из которых содержит отдельный призыв к действию. Пользователям будет удобнее сканировать вашу электронную почту и понимать, о чем идет речь в каждой области.

А теперь о расположении призыва к действию в электронном письме:

Лучше всего было бы разместить его «над сгибом» для читателей, которые все равно не любят прокручивать его, чтобы увидеть. Другие советы зависят от устройства, которое ваши цели предпочитают для чтения электронной почты:

• Для пользователей настольных компьютеров: Разместите призыв к действию справа от текста и изображений электронного письма.
• Для мобильных пользователей: Разместите призыв к действию спереди и по центру или рассмотрите верхний левый угол вашего электронного письма, поскольку некоторые приложения для Android отображают только эту часть.

Правильное расположение кнопки CTA в вашем электронном письме — это гарантия того, что все контакты увидят ее, независимо от их устройства и привычек чтения.

5) Добавьте пробелы

Добавление пробел Вокруг кнопки CTA в электронных письмах — хорошая практика: она отделяет ее от текста и других элементов, создавая визуальный фокус для читателей и выделяя кнопку.

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

Подводя итог

Когда дело доходит до рейтинга кликов по электронной почте, каждая деталь имеет значение, и дизайн вашей кнопки с призывом к действию является не последним из них: ее цвет, размер, расположение и текст могут иметь значение для всей вашей маркетинговой кампании.

Лучшие практики здесь:

1. Создайте его как кнопку, а не ссылку или картинку.
2. При выборе цвета и размера кнопки учитывайте индивидуальность вашего бренда, психологию цвета и контрастность.
3. Используйте ориентированный на действие, привлекательный и короткий текст для кнопки CTA.
4. Выберите подходящее место для него в теле письма: убедитесь, что оно хорошо выглядит и работает на настольных и мобильных устройствах.
5. Добавьте пустое пространство, чтобы отделить призыв к действию от других элементов вашего письма и выделить его.

Если вы хотите сделать шаг вперед в дизайне электронных писем, вы также можете попробовать интерактивные элементы электронного письма и анимированные кнопки CTA. Этот последняя тенденция электронного маркетинга может помочь вам привлечь подписчиков, инициировать действия и получить от них обратную связь.

И как только у вас появится разработанная контент-стратегия, вы сможете автоматизировать электронную почту с помощью инструментов онлайн-маркетинга и выберите те, которые лучше всего подходят для вас.

Автор Био

Лесли Вос

Лесли — профессиональный копирайтер и приглашенный автор, в настоящее время ведет блог на Bid4Papers, платформа, помогающая студентам и авторам в написании решений. Специализируясь на исследовании данных, написании веб-текстов и продвижении контента, она обожает слова, научно-популярную литературу и джаз.

Команда Поптина

Превратите больше посетителей в клиентов, потенциальных клиентов и подписчиков электронной почты с помощью PoptinКрасивые и целенаправленные всплывающие окна и контактные формы.

Сверстать кнопку в письме?

Здравствуйте. Подскажите пожалуйста. Как правильно сверстать кнопку для письма которое открывается в стандартном Windows 10 Почтовике. А то почему-то он padding для тега игнорирует? Windows 10 Почтовик Google Chrome — G.

• Вопрос задан более трёх лет назад
• 3753 просмотра

1 комментарий

Простой 1 комментарий

padding нужно использовать только для ячеек таблицы td. Работает даже для Outlook 2007
Решения вопроса 0
Ответы на вопрос 2
Полина @paulinekorkina
Верстальщик

Верстала письмо под разные почтовики, в Windows 10 смотрится хорошо.

Кнопка-ссылка кроссплатформенно верстается только таблицей, насколько я знаю, правда, я делала упор на Outlook и The Bat! (последний в плане верстки — просто жесть). Паддинги многие почтовики не хавают, поэтому в качестве левого и правого мы используем пустые столбцы таблицы с заданной шириной. У меня окончательный вариант получится такой:

Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать

Если нужна кнопка с border-radius:
https://buttons.cm/
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• CSS

Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?

• 1 подписчик
• 2 часа назад
• 36 просмотров

Как сверстать кнопку в письме

Кнопка в письме — один из важных элементов 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-рассылке

Призыв к действию – это один из важнейших маркетинговых инструментов, способный мотивировать читателя на выполнение целевого действия, например, покупку товара. Он должен быть убедительным и цепляющим, иначе вся рассылка может оказаться неэффективной, а компания потеряет вложенный бюджет.

Что такое призыв к действию и как его правильно оформить в email-рассылке – рассказываем в сегодняшней статье.

Что такое призыв к действию

Призыв к действию (от англ. Call to Action, СТА) – это побуждающая фраза, которая стимулирует пользователя купить товар, подписаться на рассылку, воспользоваться услугой или предложением. Как правило, CTA состоит из следующих элементов:

1. Кнопка. По ней читатель может кликнуть для перехода на сайт, в приложение или иной ресурс.
2. Баннер. Он включает в себя кликабельное изображение, текст, иногда кнопку.
3. Ссылка. Обычная гиперссылка, которая побуждает пользователя выполнить действие. Чаще всего она используется, чтобы привлечь читателя для перехода к определенному контенту.

Сам CTA может быть оформлен как одним из вышерассмотренных способов, так и несколькими. Например, в начале рассылки расположен баннер, а в конце – кнопка. Чтобы призыв к действию оказался эффективным, важно также позаботиться о том, как будет написан текст призыва.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как сделать призыв к действию эффективным

Правило 1: Делайте CTA понятным

Призыв к действию должен четко отвечать пользователю на вопрос «‎Что сделать?». Например, кнопка может называться «Прочитать статью» или «Посмотреть товары». Если вы будете писать простые фразы по типу «Читать здесь», «Подробнее» и так далее, то это запутает читателя.

Также не стоит называть кнопки как-то «загадочно», например, «Станьте мастером своего дела». Это звучит слишком абстрактно – пользователь не поймет, что от него хотят, если не вчитается в письмо. А в рассылках, как правило, не читают сообщения целиком – читатели «‎цепляют» из них главное. Поэтому лучше сразу написать понятно.

Правило 2: Показывайте пользу для читателя

Часто можно заметить, как компании думают только о себе – на каждом месте они предлагают купить, купить и больше ничего. Это не совсем правильно, в первую очередь, нужно предложить пользователю сделать выбор. Например, мы можем писать на кнопках не «Купить товар», а «Посмотреть товар». Изменив всего одно слово, посыл уже не выглядит таким кричащим. В таком случае пользователь с более высокой вероятностью кликнет по кнопке, и, возможно, купит продукцию компании без каких-либо «криков».

Правило 3: Краткость

Чем короче будет ваш CTA, тем эффективнее он станет отражаться на бизнесе. Не стоит добавлять в него лишние подробности – они утомляют читателей. Раскрыть суть предложения можно и в тексте письма. Чтобы пользователь легко воспринимал призыв к действию, выделяйте на него от одного до трех слов.

Пример:

• Плохо: «Открыть приложение для просмотра фильма»
• Хорошо: «Посмотреть фильм».

Если вы хотите раскрыть суть CTA, то просто напишите небольшую фразу. В случае с просмотром фильма это может быть краткое описание: «Для просмотра фильма у вас должно быть установлено приложение…». Таким образом читателю письма будет более понятно, что произойдет после клика по кнопке – она отправит его в определенный сервис.

Правило 4: Только один призыв к действию

По статистике, письма, где используется только один призыв к действию, получают на 371% больше кликов. Связано это с тем, что пользователю проще выполнить одно действие, нежели несколько.

Старайтесь делать акцент на чем-то конкретном, например, не нужно предлагать читателю купить товар, приобрести премиум-тариф и еще ко всему этому подписаться на социальные сети. В рассылке лучше оставить одно предложение.