Docs RU

Как использовать блок с кнопкой

Редактор

Что такое кнопка и зачем она нужна?

Кнопка — важнейший элемент письма. Она направляет пользователя на нужную страницу и выполняет роль призыва к действию (CTA), указывая, что именно нужно сделать. Это один из ключевых факторов повышения конверсии email-рассылки.
Использовать кнопку просто: добавьте её в нужные места письма. Например:
  • перейти к товару, о котором идёт речь;
  • пройти опрос;
  • завершить оформление заказа и т.д.
❗️Не стоит добавлять слишком много кнопок с разными целями — это может запутать получателя. Но допустимо дублировать одну и ту же кнопку в начале и в конце письма для повышения кликабельности.

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

  1. Перейдите в раздел «Инструменты и модули» (иконка в правой панели).
  2. Откройте вкладку «Блоки».
  3. Перетащите блок «Кнопка» в нужное место письма.
Drag and drop button block to your email

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

  1. Кликните по блоку с кнопкой.
  2. В правой панели в разделе «Контент» укажите ссылку.
Add link to the button in the block settings
Поддерживаются следующие типы ссылок:
  • Сайт в формате https:// (откроется в новой вкладке).
  • Email — откроется почтовый клиент с адресом.
  • Телефон в формате tel:+74951234567.
  • Skype — откроется приложение Skype с вызовом пользователя.
Choose the link type in the block settings according to your goal

Как изменить текст на кнопке?

Перейдите в настройки блока справа и в разделе «Контент» измените текст кнопки.
Add button text in block settings

Как добавить иконку к кнопке?

  1. Включите переключатель «Кнопка с иконкой».
  2. Загрузите изображение с компьютера, по ссылке или из библиотеки.
  3. Выберите положение иконки: слева или справа от текста.
Switch on button with icon feature in the block settings
Upload the image as a button icon in the block setttings
Change the location of icon on the button in the block settings

Как изменить размер кнопки?

Размер задаётся внутренними отступами (расстояние от текста до краёв кнопки).
Изменить их можно в разделе «Размер кнопки» на правой панели.
Также можно включить переключатель «Растянуть по ширине», чтобы кнопка занимала всю ширину секции.
Edit the paddings to change the size of a button in the block sections
Make the button as wide as a section by enabling

Как настроить цвет и границу кнопки?

  1. Перейдите в раздел «Стиль кнопки» на правой панели.
  2. Задайте цвет кнопки в hex-формате.
  3. Включите настройки границы, чтобы задать её цвет, толщину, стиль и скругление углов.
Change the button color in block settings
Enable and adjust border for button in block settings

Как настроить цвет при наведении (hover)?

В разделе «Стиль кнопки» укажите цвет для состояния при наведении курсора. Без заполнения этого параметра цвет при наведении не изменится.
Adjust the hover color in button style settings

Как изменить стиль и цвет текста кнопки?

В разделе «Стиль текста» вы можете настроить:
  • шрифт,
  • жирность,
  • курсив,
  • размер,
  • цвет,
  • регистр (всё прописными или строчными).
Change the button text styles in block settings

Как изменить фон под кнопкой и границу блока?

  • Перейдите в раздел «Фон» на правой панели.
  • Укажите цвет фона блока с кнопкой.
Set the background color for button block in settings
  • Включите настройки границы, чтобы задать стиль, цвет, толщину и скругление границы вокруг блока.
Adjust background border settings for button block

Как изменить выравнивание и внешние отступы кнопки?

В разделе «Позиция» можно:
  • выбрать выравнивание кнопки (слева, по центру, справа),
Change button alignment in block settings
  • задать внешние отступы (расстояние от кнопки до границ секции).
Change button alignment in block settings

Как скрыть кнопку на мобильных или десктопных устройствах?

Вы можете скрыть отображение кнопки для определённых устройств. Подробнее об этом читайте в этой статье.

Мобильные настройки кнопки

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

Настройки кнопки для тёмной темы

Для корректного отображения кнопки в тёмной теме перейдите в редактор тёмной версии письма. Там вы можете изменить:
  • цвет кнопки,
  • цвет при наведении,
  • цвет границы,
  • цвет текста,
  • цвет фона под кнопкой.
Подробнее — в этой статье.