Як створити кнопку CTA

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

Як зробити кнопку в листі?

Основна кнопка в листі зазвичай робиться в тому ж стилі, що й кнопки на сайті. Наприклад, на сайті компанії ми бачимо таку кнопку і нам треба зробити її аналог у листі.

Приклад кнопки

Два варіанти додавання кнопки в лист

Вибираємо місце в шаблоні, де буде розміщена кнопка.

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

  • у вкладці "Контент" на бічній панелі ліворуч заходимо до пункту "Блоки";

  • вибираємо блок "Кнопка" й перетягуємо його мишею в потрібний контейнер.

Створюємо кнопку в Контейнері

Структура як елемент листа є вищою за ієрархією, ніж контейнери і блоки. Вона включає їх до себе. Такий варіант краще використовувати, щоб контент коректно перебудовувався в мобільній версії. Наприклад, якщо треба задавати інверсію блоків.

Варіант 2: Створюємо кнопку в окремій Структурі

  • у бічному меню ліворуч у вкладці "Контент" заходимо до "Структури";

  • перетягуємо мишею необхідну структуру в потрібне місце в листі, потім вибираємо тип контенту, який хочемо створити; у нашому випадку це "Кнопка".

    Створюємо кнопку в окремій Структурі

Коли ми додаємо нову структуру, в ній уже є порожній контейнер, до якого ми й додаємо кнопку. Отримуємо такий результат:

Кнопка

Така структура, яка містить тільки блок з СТА, не буде перебудовуватися відносно інших структур та елементів контенту в листі.

Як змінити дизайн кнопки

За замовчуванням завжди створюється кнопка без перелінкування, із написом "Кнопка", зробленим шрифтом Arial 18 розміру, колір кнопки зелений #31cb4b, а колір тексту — білий #ffffff. Інші налаштування кнопки за замовчуванням є такими:

  • Колір фону — прозорий.

  • Заокруглення 30 px.

  • Вирівнювання по центру.

  • Межі активовані, для лівої, правої та верхньої встановлені значення 0px, для нижньої — 2px.

  • Внутрішні відступи: лівий і правий по 20 px, верхній та нижній — по 10 px.

Як задати стиль для однієї кнопки

Редагувати зовнішній вигляд кнопки можна таким чином:

Клікаємо блок із кнопкою. У частині екрана ліворуч з'являється меню, в якому задаються всі необхідні параметри:

  • Посилання, яке відкриватиметься при натисканні кнопки.

Задаємо посилання

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

Додаємо текст

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

    Рекомендуємо використовувати стандартні шрифти, щоб усе відобразилося так, як заплановано.

Задаємо шрифт та розмір тексту

  • Колір кнопки.

    Можна як вказати готовий код кольору, так і вибрати найвідповідніший із запропонованих.

Задаємо колір кнопки

  • Колір тексту.

    Вибраний колір застосовується тільки для тексту кнопки. Вибирайте кольори, які добре поєднуються між собою і контрастують із фоном кнопки.

Задаємо колір тексту

  • Колір фону.

    За замовчуванням завжди встановлений прозорий фон, але його легко замінити.

Вказуємо колір фону

  • Заокруглення.

    За замовчуванням значення завжди 30 px. Відрегулювати його можна натисканням кнопок -/+ або прописати вручну.

Змінюємо радіус заокруглення кнопки

  • Вирівнювання кнопки.

    Щоб задати налаштування вирівнювання на мобільному пристрої, натисніть значок телефону.

Обираємо вирівнювання кнопки

  • Розтягнути по ширині.

    Увімкніть, якщо вам потрібно, щоб кнопка СТА була на повну ширину листа. Висота кнопки при цьому не змінюється.

Розтянути по ширині

  • Межі.

    Можна задати межі й колір для всієї кнопки або погратися з кожною стороною окремо.

    Задаємо межі

    Крім розмірів можна налаштовувати форму меж:

    Розміри кнопок

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

Встановлюємо внутрішні відступи

  • Зовнішні відступи. Відступи навколо кнопки у вибраному блоці.

Встановлюємо зовнішні відступи

  • Приховування елемента на різних типах пристроїв. За замовчуванням кнопка завжди відображається. Щоб відключити її на десктопі або телефоні, натисніть відповідний значок пристрою.

Приховування елемента на різних типах пристроїв

  • Включати елемент у різні типи листів. Якщо ви вже відправляєте AMP-листи, то для відображення цієї кнопки натисніть ϟAMP.

Включення елементів у різні типи листів

Оберіть подію для запуску

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

Приклад кнопки зі змінами

Як задати стилі оформлення для всіх кнопок одразу

За замовчуванням зовнішній вигляд кнопки листа визначається заданими в шаблоні стилями оформлення. Щоб змінити дизайн цього елемента, треба змінити стилі всього листа, тоді всі кнопки, створювані після цього, матимуть однаковий вигляд. Щоб це зробити, в бічному меню вибираємо у вкладці "Оформлення" пункт "Кнопка".

Як задати стилі оформлення для всіх кнопок одразу

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

  • Підсвічування кнопки при наведенні.

  • Колір кнопки.

  • Колір тексту.

  • Стиль тексту.

  • Заокруглення.

  • Межі.

  • Внутрішні відступи.

Процес зміни параметрів аналогічний описаному вище, тільки зміни здійснюються у вкладці "Оформлення" в розділі "Кнопка".

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

Така опція дозволяє привернути увагу підписника до СТА-елемента в листі. Для цього активуємо функцію "Підсвічувати за наведенням" (за замовчуванням її відключено).

Підсвічувати за наведенням

Потім задаємо два контрастних кольори кнопки: основний і той, який буде відображатися при наведенні курсора на кнопку. Ось як змінюється на сайті кнопка з нашого прикладу:

2 контрастні кольори кнопки

Визначаємо кольори (у нашому випадку це чорний #000000 і сірий # 757575) і задаємо їх у відповідних полях:

Визначаємо кольори і задаємо їх у відповідних полях

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

Обираємо шрифт

Потім задаємо заокруглення кнопки (у нас — майже прямокутна, радіус заокруглення встановлюємо невеликий, 5), а також колір обведення кнопки (якщо в ньому немає потреби, цю опцію можна не активувати):

Заокруглення кнопки

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

Встановлюємо відстань від напису на кнопці до її кордонів

Після всіх вищеописаних дій кнопка набула такого вигляду:

Результат

А при наведенні вигляд такий:

Результат - кнопка при наведенні

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

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

Задати текст і перелінкування

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

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

Адаптуємо для мобільних

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

Приховування елемента

Як прив'язати подію до кнопки

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

Як задати подію

За допомогою цієї опції можна запускати сценарії, що відповідають, наприклад, за потрапляння підписника до певної групи, зазвичай це підписники, що виявили інтерес до певного товару, категорії, акції.

Читати статтю про прив’язку події до кнопки>>

Як додати картинку у фоні

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

  1. Виділяєте блок із кнопкою.

  2. Праворуч у вкладці "Контент" з'являться всі параметри кнопки, де ви можете змінити те, що вважаєте за потрібне:

  • Назва кнопки.

  • Стиль, розмір і колір шрифту.

  • Колір кнопки.

  • Радіус заокруглення.

  • Колір обведення й сам факт його наявності.

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

  • Внутрішні та зовнішні відступи (внутрішні, як ми писали вище, — це відступи від тексту кнопки до її меж, зовнішні — від меж кнопки до меж блоку, в якому вона розміщена).

Для прикладу змінимо вигляд створеної за допомогою стилів кнопки на такий:

Як  зробити кнопку з фоном

1. Спочатку визначаємо колір. Це #fb2d29. І задаємо в налаштуваннях:

Робимо кнопку за зразком

2. Збільшуємо внутрішні відступи:

  • Ліворуч і праворуч — 40 рх.

  • Зверху і знизу — 20 рх.

Збільшуємо внутрішні відступи

3. У червоної кнопки, взятої для прикладу, є синя фонова картинка. Тому ми додаємо фонову картинку контейнеру з кнопкою:

  • Перетягуємо бігунок та активуємо функцію "Картинка у фоні".

  • Завантажуємо вибрану для фону картинку.

Додаємо фонову картинку

Кнопка готова! Якщо ви плануєте використовувати її також в інших листах, збережіть цей елемент у бібліотеці блоків. Про те, як це зробити, читайте в нашій статті.

Залишилися питання?
Спеціалісти обов'язково нададуть відповідь та допоможуть вирішити вашу проблему!
Зворотний дзвінок
Залишіть заявку – і наш спеціаліст зв'яжеться з вами в робочий час.
Відправити заявку
Консультація в чаті
Готові до ваших запитань!
Написати в чат
Електронна пошта
Напишіть в службу підтримки eSputnik.
Надіслати email