Создание кнопки CTA

Кнопка призыва к действию (CTA) - это обязательный элемент email-рассылки, который побуждает подписчика перейти на сайт, соцсети и т.д. Создать кнопку в письме с помощью редактора eSputnik очень просто, следуя нашей пошаговой инструкции.

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

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

Два варианта добавления кнопки в письмо

Выбираем место в шаблоне, где будет расположена кнопка.

Вариант 1: Создаем кнопку в Структуре с несколькими Контейнерами

• во вкладке “Контент” на левой боковой панели заходим в пункт “Блоки”;

• выбираем блок “Кнопка” и перетаскиваем его мышкой в нужный контейнер

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

Вариант 2: Создаём кнопку в отдельной Структуре

• в левом боковом меню во вкладке “Контент” заходим в “Структуры”,

• перетаскиваем мышкой нужную структуру в требуемое место в письме, затем выбираем тип контента, который хотим создать, в данном случае это “Кнопка”.

  

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

Такая структура, в которой только блок с СТА, не будет перестраиваться относительно других структур и прочих элементов контента в письме.

Как изменить дизайн кнопки

По умолчанию всегда создаётся кнопка без перелинковки, с надписью “Кнопка” сделанной шрифтом Arial 18 размера, цвет кнопки зеленый #31cb4b, а цвет текста - белый #ffffff. Остальные настройки кнопки по умолчанию следующие:

• Цвет фона - прозрачный

• Закругление 30 px

• Выравнивание по центру

• Границы активированы, для левой, правой и верхней установлены значения 0px, для нижней - 2px.

• Внутренние отступы: левый и правый по 20 px, верхний и нижний - по 10 px.

Как задать стиль одной кнопке

Редактировать внешний вид кнопки можно следующим образом:

Кликаем по блоку с кнопкой. В левой части экрана появляется меню, в котором задаются все необходимые параметры:

• Ссылка, которая будет открываться по клику на кнопку.

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

• Текст кнопки.

• Стиль текста (шрифт, размер).

  Рекомендуем использовать стандартные шрифты, чтобы всё отобразилось так, как вы задумали.

• Цвет кнопки.

  Можно указать как готовый код цвета, так и выбрать наиболее подходящий из предложенных.

• Цвет текста.

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

• Цвет фона.

  По умолчанию всегда установлен прозрачный фон, но его легко заменить.

• Закругление.

  По умолчанию значение всегда 30 px. Отрегулировать его можно нажатием кнопок -/+ или прописать вручную.

• Выравнивание кнопки.

  Чтобы задать настройки выравнивания на мобильном устройстве, нажмите на значок телефона.

• Растянуть по ширине.

  Включайте если вам необходимо, чтобы кнопка СТА была на всю ширину письма. Высота кнопки при этом не меняется.

• Границы.

  Можно задать границы и цвет всей кнопке или поиграться с каждой гранью отдельно.

  

  Помимо размеров можно задавать форму границ:

  

• Внутренние отступы, которые проставятся вокруг текста внутри кнопки.

• Внешние отступы. Отступы вокруг кнопки в выбранном блоке.

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

• Включать элемент в разные типы писем. Если вы уже отправляете AMP-письма, то для отображения этой кнопки нажмите на ϟAMP.

• Выберите событие. Если вы хотите автоматизировать какие-то письма, например, по клику на кнопку отправлять письмо клиентам, - укажите событие, которое выполнит это действие.

Пример кнопки после внесения изменений в оформление:

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

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

В оформлении можно задать такие параметры:

• Подсветка кнопки по наведению;

• Цвет кнопки;

• Цвет текста;

• Стиль текста;

• Закругление;

• Границы;

• Внутренние отступы.

Процесс изменения параметров аналогичен описанному выше, только изменения выполняются во вкладке “Оформление”, в разделе “Кнопка”.

Добавление эффекта смены цвета кнопки при наведении

Такая опция позволяет привлечь внимание подписчика к СТА элементу в письме. Для этого активируем функцию “Подсвечивать по наведению” (по умолчанию она отключена).

Затем задаем два контрастных цвета кнопки: основной и тот, который будет отображаться при наведении курсора на кнопку. Вот как меняется на сайте кнопка из нашего примера::

Определяем цвета (в данном случае это черный #000000 и серый #757575) и задаем их в соответствующих полях:

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

Затем задаем закругление кнопки (у нас - почти прямоугольная, радиус закругления устанавливаем небольшой, 5), а также цвет обводки кнопки (если в ней нет необходимости, эту опцию можно не активировать):

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

После всех описанных выше действий кнопка приобрела такой вид:

А при наведении такой:

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

Не забудьте сделать надпись и задать перелинковку, это делается уже в самом письме: выделите кнопку в письме, в боковом меню вставьте название кнопки и ссылку:

Адаптивность кнопки для мобильных

Чтобы на мобильных устройствах кнопка имела другой вид, нужные параметры необходимо задать в разделе “Оформление” во вкладке “Адаптивность”. Для кнопки можно поменять размер шрифта и задать опцию отображения кнопки на всю ширину письма.

Во вкладке “Контент” можно задать факт отображения или скрытия кнопки на мобильных устройствах. Для этого кликните по блоку с кнопкой в письме и в появившемся слева меню выберите нужную опцию в пункте “Скрытие элемента”:

Как привязать событие к кнопке

Можно задать событие, которое будет запускаться по нажатию на кнопку:

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

Читать статью о привязке события к кнопке >>

Как добавить картинку в фоне

Если кнопку нужно изменить, это можно сделать прямо в письме:

1. Выделяете блок с кнопкой

2. Справа во вкладке “Контент” появляются все параметры кнопки, где вы можете изменить то, что считаете нужным:

• Название кнопки,

• Стиль, размер и цвет шрифта,

• Цвет кнопки,

• Радиус закругления,

• Цвет обводки и сам факт ее наличия,

• Выравнивание кнопки в блоке (по центру, по левому или правому краю,

• Внутренние и внешние отступы (внутренние, как мы писали выше, это отступы от текста кнопки до ее границ, внешние - от краев кнопки до границ блока, в котором она расположена).

Для примера изменим вид созданной с помощью стилей кнопки на такой:

1. Сначала определяем цвет. Это #fb2d29. И задаём в настройках: 

2. Увеличиваем внутренние отступы:

• Слева и справа - 40 рх,

• Сверху и снизу - 20 рх.

3. У красной кнопки, взятой для примера, есть синяя фоновая картинка. Поэтому мы добавляем фоновую картинку контейнеру с кнопкой:

• Перетаскиваем бегунок и активируем функцию “Картинка в фоне”,

• Загружаем выбранную для фона картинку.

Кнопка готова! Если планируете использовать ее и в других письмах, сохраните этот элемент в библиотеке блоков. О том, как это сделать, читайте в нашей статье.