Дизайн Маркетинг Структура How-to
~ 13 хв читати
51393 перегляди
оцінити
19 травня 2021

Як за допомогою Stripo додати до повідомлення гіпер- та анкорні посилання

Stripo / Blog / Як за допомогою Stripo додати до повідомлення гіпер- та анкорні посилання

Значення посилань у листах важко переоцінити.

Посилання — це метод навігації в листі, якщо він довгий за структурою; посилання ведуть одержувачів з наших листів на потрібні сторінки сайту, зокрема на сторінки оформлення замовлень, до відповідних відео на Youtube та ін.

Усе це робить посилання корисними для клієнта, полегшуючи навігацію, і це позитивно впливає на показники CTR (переходів за посиланнями).

Крім цього, посилання дозволяють нам відстежувати дії одержувачів у листах і вимірювати ефективність конкретної кампанії.

У цій статті ми розглянемо типи посилань і розповімо про способи їхнього додавання до листів.

Типи посилань у листах

Є кілька основних типів:

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

Гіперпосилання в email-повідомленні, також відоме як лінк, веде нас із листа на сайт, переміщує між сторінками в межах одного сайту або до певних зображень та інших мультимедійних файлів.

За статистикою ESP-сервісу eSputnik, який ми використовуємо, проморозсилка в середньому містить 20 гіперпосилань. Як гадаєте, чи це не забагато? Зовсім ні! Насправді всі пункти меню, зображення, кнопки CTA — усе це має бути обладнане посиланнями.

Погляньте на мапу кліків створеної нами розсилки на День Валентина, надану нашим ESP:

Гіперпосилання в Email-листах_Натисніть на карту

(статистика реальна, вигаданий тільки контент розсилки)

26% підписників клікнули банер. Стільки ж людей натиснули кнопку CTA.

Про всяк випадок, кнопка CTA — це не що інше, як привабливо оформлене гіперпосилання.

І все ж таки навіщо додавати так багато гіперпосилань і прикріплювати їх до кожного зображення, яке ви збираєтеся використовувати? Річ у тім, що деякі клієнти клікають у листах геть усе, що вони бачать і що їм подобається. Тому ми рекомендуємо додавати до розсилки якомога більше інтерактивних деталей.

Гіперпосилання на профілі в соцмережах

Важливо, щоб клієнти підписувалися на вас у соцмережах. Там ми ділимося новинами, оновленнями, анонсуємо майбутні розпродажі та ін. Зазвичай ці посилання йдуть після заклику до дії «Відстежуйте нас у соцмережах». Але не завжди.

Гіперпосилання в Email-листах - підпишіться на нас у соціальних мережах

Мотивуйте одержувачів переходити на ці сторінки із ваших листів.

Гіперпосилання «Поділитися в соцмережах»

Надайте користувачам можливість поділитися окремими частинами ваших листів у соцмережах — це допоможе вашому бренду стати вірусним.

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

Гіперпосилання в Email-листах_Варіант публікації в соцмережах

(Джерело: розсилка від Stripo)

Цей блок зазвичай йде після кнопки заклику «Поділитися у Facebook».

Посилання Mailto (написати електронною поштою)

Ми маємо надати клієнтові можливість зв'язатися з нами у будь-який час та у будь-який зручний спосіб.

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

Додайте до футера листа опцію «Напишіть нам» і прикріпіть до неї посилання «mailto».

Посилання Mailto в Email-листах_Stripo

(Джерело: шаблон Stripo)

Користувачеві достатньо натиснути це посилання, щоб почати писати вам листа. Ви можете навіть додати заголовок для таких листів.

Гіперпосилання для тексту

Не має значення, промо це або тригерна розсилка — у будь-якому випадку нам потрібно додати до тіла листа якийсь текст. Прикріпити гіперпосилання до цього тексту дуже легко. Вам не знадобляться знання коду або навички HTML. Усе елементарно!

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

Гіперпосилання в Email-листах_Посилання в текстах

(Джерело: розсилка від Кріса Сілліззи, The Point, CNN)

Анкорні посилання

Анкорні посилання призначені для того, щоб вести читачів до потрібних розділів листа. За допомогою анкорних посилань у кампаніях ви надаєте одержувачам можливість пропустити якісь частини, щоб без зайвого скролу перейти безпосередньо до моментів, які їх цікавлять. Якщо ваш email досить довгий, обов'язково вставте анкорне посилання — клієнти оцінять.

(Джерело: розсилка від Mercedes-Benz)

Як додати посилання за допомогою Stripo

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

Додавання посилань для кнопок CTA

Кнопки CTA не повинні бути нудними — навпаки, робіть їх якомога яскравішими. Вони можуть мати будь-яку форму на ваш смак. За допомогою Stripo ви також можете застосувати ховер-ефект (CSS-анімацію).

Гіперпосилання в CSS-кнопці в HTML-листі

Як додати посилання для кнопок CTA у Stripo:

  • перетягніть блок «Кнопка» у те місце листа, в якому ви бажаєте бачити кнопку;

  • дайте кнопці ім'я;

  • виберіть колір тексту;

  • налаштуйте шрифт і розмір тексту;

  • встановіть колір кнопки;

  • вставте посилання;

  • готово!

Як додати гіперпосилання в Email-лист за допомогою_Stripo

Додаткову інформацію про те, як створювати кнопки, ви знайдете у цій статті.

14 хв читати

79748 перегляди 4.2

Кращі прийоми заклику до дії в розсилках Читати далі

Додавання гіперпосилання для відео

В одній із статей ми вже показували, як за допомогою Stripo додавати до листів посилання на відео.

Як додавати гіпер- і анкорні посилання в Email-листах_Stripo_Відео в Email-листах

Але щоб вам було зручніше, я все ж таки коротко продублюю це тут.

Як додати гіперпосилання на відео за допомогою Stripo:

  • перетягніть у шаблон структуру з однією колонкою;

  • додайте до неї базовий блок «Відео»;

  • двічі клікніть його в шаблоні, щоб активувати панель налаштувань;

  • на панелі налаштувань вставте посилання відео на Youtube або Vimeo.

Гіперпосилання в Email-листах_Посилання на відео вебінару

Важливо зазначити:

Наш редактор автоматично підтягне і вставить у відповідні поля таку інформацію:

  • зображення попереднього перегляду;

  • альтернативний текст;

  • колір кнопки відтворення.

Ваш лист із вбудованим відео готовий!

Додавання посилань mailto до блоку контактної інформації

Надайте клієнтам можливість розпочати написання електронного листа для вас лише одним кліком.

Гіперпосилання в Email-листах_Посилання Mailto

(Джерело: розсилка від Boden)

Як додати посилання mailto до контактної інформації за допомогою Stripo:

  • додайте до листа нову структуру;

  • перетягніть у кожен контейнер блок «Текст»;

  • введіть свій текст. Я ввела «Зв'язатися з нами»;

  • виділіть текст, після чого клікніть іконку «Посилання» на панелі інструментів;

Додавання посилань Mailto в Email-листах за допомогою_Stripo

  • на панелі налаштувань встановіть тип посилання “mailto”;

  • вставте потрібну адресу електронної пошти;

Як додати посилання mailto в Email-листи

  • введіть тему, якщо бажаєте, щоб такі листи вже мали заголовок.

Як додати посилання Mailto в Email-листи_Вказавши рядок теми

Додавання посилань до іконок соцмереж

Де краще розмістити ваші координати в соцмережах? Тут усе на ваш розсуд. Але ці іконки обов'язково мають бути в листах. Деякі бренди додають їх до меню, але переважна більшість — до футерів.

Гіперпосилання в Email-листах_Посилання на соцмережі в футері Email-листів

(Джерело: розсилка від Pinpointe)

Як додати посилання до іконок соцмереж за допомогою Stripo:

Спосіб 1. Вставити посилання
  • перетягніть у шаблон блок «Соцмережі»;

  • двічі клікніть його, щоб активувати панель налаштувань;

  • вставте посилання на відповідні профілі в соцмережах;

  • натисніть «Ще», аби додати альтернативний текст;

Гіперпосилання в Email-листах_Як додати посилання в соцмережі за допомогою_Stripo

  • змініть кольорову схему, форму та розмір іконок соцмереж.

Посилання в Email-листах_Створення іконок соцмереж в Email-листах за допомогою_Stripo

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

Спосіб 2. Заповнити профіль і додавати блок соцмереж одним кліком.

Якщо ви хочете ще швидше додавати профілі соцмереж, створюючи нові розсилки, заповніть свій профіль Stripo — і тоді під час роботи з новим листом достатньо буде лише перетягнути до шаблону блок «Соцмережі». Дизайн і коректні посилання на ваші сторінки в соцмережах — усе буде зроблено автоматично.

Посилання в Email-листах_Заповнення профілю для додавання посилань в облікові записи соцмереж одним кліком

Додавайте профілі соцмереж одним кліком

Приєднатися до Stripo

Спосіб 3. Перетягнути до листа модуль контенту — і в такий спосіб додавати всі соцмережі одним кліком.

Якщо вам не хочеться заповнювати профіль Stripo, можна зберегти в особистій бібліотеці контенту модуль із контактною інформацією та футером. І кожного разу, коли вам треба буде створити новий шаблон, просто вставляйте цей блок. Готово.

Гіперпосилання в Email-листах_Соціальні медіа-профілі у ваших Email-листах одним кліком

Більш детальну інформацію про модулі контенту і методи їхнього використання ви знайдете у статті нижче.

5 хв читати

59148 перегляди 3

Модулі Stripo: що це і для чого? Читати далі

Додавання посилань «Поділитися в соцмережах»

Цей тип посилання дозволяє поділитися нашим листом — причому як повністю, так і окремими його частинами.

Посилання в Email-листах для обміну в соцмережах

(Джерело: розсилка від CNN Reliable Sources)

Як додати посилання «Поділитися в соцмережах» за допомогою Stripo:

  • перетягніть у шаблон блок «Соцмережі»;

  • виберіть необхідні іконки соцмереж;

  • попрацюйте над їхнім дизайном;

  • встановіть тип посилання «Поділитися»;

Як додати посилання шейрінга в соцмережах_Stripo

  • у полі вводу «Попередній перегляд» вставте посилання на веб-версію шаблону або на його елемент, який ви хочете дозволити розшарювати.

Включення шейрінга в соцмережах в Email-листах_Stripo

Щоб дізнатися, як отримати посилання на веб-версію вашого листа, читайте цю статтю в нашому блозі.

7 min read

27925 views 3.7

Preview and Send Test Email in Stripo Читати далі

Додавання посилань для пунктів меню

Меню зазвичай допомагають нам перенаправити одержувачів з листа на сайт.

І тому вам треба додати відповідні посилання.

Додавання посилань в Email-листах _Stripo_Приклади посилань для пунктів меню від Gap

(Джерело: розсилка від Gap)

Як додати посилання для пунктів меню за допомогою Stripo:

  • перетягніть у шаблон структуру/рядок з 1 або 2 колонками;

  • додайте до неї блок «Меню»;

  • двічі клікніть його, щоб активувати панель налаштувань для подальшої роботи з цим елементом;

  • виберіть тип меню — «Посилання» (найбільш поширений), «Іконки» або «Посилання та іконки»;

Посилання в меню Email-листах_Stripo

  • попрацюйте над дизайном вкладок меню;

  • дайте назви вкладкам;

  • і вставте посилання для кожної вкладки.

Додавання посилань в меню_Stripo

До вашої уваги: на панелі налаштувань вкладки меню називаються «Пункти».

Додавання анкорних посилань

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

Приклад анкорних посилань в Email-листах_Gmail

Як додати анкорні посилання за допомогою Stripo

Спосіб 1. Активувати опцію «Додати анкорне посилання». Не потребує роботи з кодом
  • створіть панель меню/навігації, як показано вище;

  • дайте кожному пункту зрозумілу назву;

  • виберіть пункт, із яким бажаєте пов'язати вкладку меню;

  • на панелі налаштувань активуйте опцію «Додати анкорне посилання» для цього конкретного елемента;

  • дайте йому назву;

Включення опції анкорного посилання в Email-листах

  • тепер йдемо до потрібної вкладки меню;

  • на панелі налаштувань вибираємо тип посилання «Анкор» і відповідне ім'я анкора;

Як створювати анкорні посилання в Email-листах_Stripo

  • готово.

Додавайте анкорні посилання легко
Реєстрація
Спосіб 2. Попрацювати з кодом листа
  • створіть панель меню навігації у хедері листа;

Як створити посилання в Email-листах_Створення меню для анкорних посилань

  • розмістіть блок HTML у листі точно над тим розділом, до якого ви хочете спрямувати одержувачів, коли вони клікнуть відповідний пункт меню;

Додавання анкорних посилань_Stripo_Переміщення блоку HTML

  • двічі клікніть цей блок листа, щоб відкрити редактор HTML-коду;

Додавання анкорних посилань в редакторі коду листів_Stripo

  • у редакторі замініть існуючий рядок таким елементом коду:

<a name="yourlabel"></a>

де «yourlabel» — назва параграфу, з яким ви бажаєте пов'язати анкорне посилання. У моєму прикладі це «музика». Насправді ви можете дати будь-яку назву, але не додавайте жодних пробілів або службових символів — тільки одне слово в лапках;

Створення анкорних посилань_Додавання блоку HTML

  • тепер, щоб пов'язати параграф із відповідним пунктом меню, нам треба двічі клікнути відповідний пункт у хедері листа;

  • коли меню стане виділеним/активним (як показано нижче), відкрийте редактор, натиснувши кнопку «редактор коду», щоб працювати безпосередньо з цією конкретною частиною листа:

Додавання анкорних посилань в Email-листи_Відкриття редактора коду_Stripo

  • у редакторі коду після тегу “href=", куди ми зазвичай додаємо гіперпосилання, треба вставити елемент “#yourlabel”. Елемент коду, який я вставила після тегу “href=", мав такий вигляд: “#music”

Робота з HTML-редактором Email-листів для вставки анкорних посилань_Stripo

  • те саме потрібно зробити для всіх пунктів меню, щоб прив'язати їх до відповідних елементів листа.

Обов'язково додайте хештег "#" після тегу “href=" і замініть ім'я “label” тим, яке ви застосовували для свого анкора. Усі інші елементи, наприклад, закриваючий тег посилання </a>, Stripo додасть автоматично.

Спосіб 3. Попрацювати з кодом листа: версія 2

Коли лист буде готовий, вам треба:

  • визначитися, куди направляти користувачів за натисканням анкорного посилання;

  • двічі клікнути цей елемент, щоб активувати його;

  • відкрити редактор коду (як показано вище);

  • вставити фрагмент коду <a name="yourlabel"></a> в код відповідного елемента. «Yourlabel» — назва потрібного розділу;

Додавання анкорних посилань_Спосіб 2

  • тепер перейдіть до вкладки меню, яка має спрямовувати користувачів до вищезгаданого розділу;

  • клікніть вкладку в шаблоні для активації;

  • на панелі налаштувань змініть тип посилання «Сайт» на «Інше». Ми робимо це, аби запобігти додаванню ESP-сервісами елемента «https://» до коду листа;

Додавання анкорних посилань_Зміна типу посилання на панелі налаштувань

  • вставте назву розділу, перед якою стоїть хештег. У нашому випадку це #yourlabel;

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

  • готово!

Важливо зазначити:

Анкорні посилання в редакторі не працюють. Щоб перевірити їх, відправте тестового листа або відкрийте в новій вкладці посилання «Перегляд у браузері».

Перевірка анкорних посилань

Підтримка анкорних посилань у листах:

Анкорні посилання_Підтримка_Ua

Важливо:

Анкорні посилання не працюють у листах на основі AMP HTML, оскільки валідатор AMP-коду не дозволяє використовувати символи “#” та “name” у тезі <a>.

На завершення

Посилання — невід'ємна частина будь-якої email-кампанії. Вони допомагають отримувачам із навігацією і надають нам можливість відстежувати активність підписників. Ми показали, як додавати посилання до різних елементів листа.

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

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

Якщо у вас є запитання або виникли проблеми, пишіть нам на адресу contact@stripo.email або залишайте коментарі нижче.

Створюйте ефективні листи у найкоротші терміни за допомогою Stripo

Вас також може зацікавити

Попередні статті Наступні статті
banner9
06 червня · 15 хв читати
ТОП-10 email-редакторів 2022 року

Усі конструктори email-шаблонів вам здаються однаковими? І ви вагаєтесь із вибором найкращого інструменту для своїх кампаній, чи не так? Не дивно, адже цих інструментів дуже багато. Тож давайте зробимо огляд найпопулярніших конструкторів, аби виділити їхні відмінності й допомогти вам у пошуку ідеального HTML-редактора шаблонів для ваших поточних потреб. Я спробую створити однакові шаблони з ідентичними медіа-файлами у кожному редакторі, щоб побачити, чим відрізняються ці інструменти. Найкращі конструктори email-шаблонів Для нашого огляду ми обрали такі редактори: Stripo, HubSpot, Campaign Monitor, AWeber,...

Дизайн Маркетинг Шаблон
24 травня · 18 хв читати
Найкращі шрифти для розсилок: поради та хитрощі

Одна з найсерйозніших проблем під час створення електронних листів — правильно вибрати шрифт. Вага, висота, ширина, колір, форма, інтервал... Чи справді тут все має значення? Так, важливим є все, але найголовніша умова — вибрати читабельний шрифт. У цій статті ми розповімо, як вибрати найкращий професійний шрифт для розсилки. Створюйте елегантні листи за допомогою Stripo в найкоротші терміни, використовуючи наші готові шаблони Ознайомитися   Шрифти HTML-листів: основні правила, яких треба дотримуватися Вибираючи оптимальний шрифт, слід враховувати три базових правила: 1. Не...

Дизайн Шаблон
Greatest Examples of GIF animations in Emails_Cover Image
27 жовтня 2021 · 10 хв читати
16 найкращих прикладів GIF-анімацій у розсилках

GIF-анімації в електронних листах стануть у великій нагоді, якщо ви бажаєте продемонструвати свою продукцію, привернути увагу користувачів до певних елементів листа або просто трохи прикрасити свій текст. У цій статті ми підготували для вас добірку найкращих прикладів таких анімацій. Приклади GIF-анімацій в email-розсилках Отже, ось наша компіляція найбільш вдалих прикладів використання GIF-файлів у листах. У кожному з них гіфка виконує свою місію. 1. Adidas (Джерело: лист від Adidas) Adidas застосували в листі анімацію, щоб показати доступні кольорові версії товару. Виглядає...

Дизайн Маркетинг
08 квітня 2021 · 17 хв читати
Дизайн підпису в листах: 14 найкращих прикладів

Хороші підписи у листах допомагають нам розвивати бізнес і справляти гарне враження на клієнтів. І оскільки це останній елемент, який люди побачать у вхідних, нам треба робити персональні підписи креативними й такими, що запам'ятовуються. Давайте розглянемо найкращі приклади підписів та їхнє правильне використання в листах та шаблонах розсилок. Варто зазначити, що професійні підписи з детальною контактною інформацією потрібні будь-якому бізнесу. Використовуйте цей шаблон, створюючи підписи для розсилок Використати Такий приклад підпису добре підходить для юридичних консультацій, банківської справи та ін....

Дизайн Маркетинг Шаблон
Будьте завжди в курсі останніх новин у сфері email-маркетингу