Створення кнопки СТA

Кнопка заклику до дії (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. У червоної кнопки, взятої для прикладу, є синя фонова картинка. Тому ми додаємо фонову картинку контейнеру з кнопкою:

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

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

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