Работа с блоком "Социальные сети"

 

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

Основная цель блока “Социальные сети” в письме - это удержать/оставить/повысить активность покупателя или потенциального клиента в других каналах посредством подписки на ваши социальные страницы.

Твитнуть 

Следовательно, блоки “Социальные сети” стоит использовать как в триггерной, так и в промосерии писем.

Добавить блок очень просто, наглядная иллюстрация приведена на гифке ниже.

Как добавить блок “Социальные сети” в письмо

  1. Необходимо зайти во вкладку  “Блоки”, выбрать блок “Социальные сети” и перетащить его в письмо.

Блоки адаптивного редактора

 

Это можно сделать двумя способами.

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

Размещение блока социальных сетей в письме

  • Перетащить блок в структуру, которая заранее добавлена. Для этого способа все форматирование — отступы, заливка и пр. — вы задаете после добавления.

Дизайн блока "Социальные сети"

Выбирайте подходящий вам способ и добавляйте блок.

  1. Затем раскройте меню выбора оформления социальный сетей, там приведены разные стили иконок: цветные, с заливкой, без заливки. Их можно применять совершенно по-разному. В данном примере мы взяли светло-серые иконки, которые лаконично вписываются в общий дизайн письма. От этого, собственно, и можно отталкиваться.

Оформление иконок социальных сетей

 

Как управлять блоком “Социальные сети”

Чтобы увидеть поле для редактирования блока “Социальные сети”, нажмите на добавленный  блок с соц.сетями в письме один раз.

Поле редактирования блока “Социальные сети”

Рабата с блоком "Социальные сети" без верстки

  1. Чтобы добавить заливку блока, нужно нажать на поле с кодом цвета  и в раскрывающемся окне выбрать нужный цвет, или добавить код по примеру #000000.

Дизайн блока "Социальные сети"

     

  1. Чтобы установить размер иконок, нажмите на стрелочку, и выпадающем меню выберите размер.

Оформление иконок социальных сетей

  1. С помощью значка “Корзина” иконка удаляется.

  1. Чтобы добавить новую cоциальную сеть, необходимо нажать на “+” и затем в раскрывающемся окне выбрать необходимую иконку.

Добавление новых иконок социальных сетей без применения HTML

  1. Для вставки альтернативного текста, нужно нажать на кнопку “еще”, и в раскрывающемся меню прописать необходимую информацию.

Простая работа с блоком "Соц.сети"

  1. Добавить ссылку можно просто скопировав ее и вставив в специальное поле.

Добавление ссылок на блок "Социальные сети"

  1. Функция выбора выравнивания блока “Социальные сети” применима отдельно как для стандартной почтовой, так и для мобильной версии. Для выбора выравнивания на мобильном телефоне нужно нажать на значок телефона и выбрать положение: справа, слева, по центру.

Форматирования блока "Социальные сети" в адаптивном редакторе

  1. Увеличить или уменьшить отступы между иконками в блоке можно нажимая на “+” или на “-”.

Регулировать высоту и ширину отступов от блока можно с помощью знака “+” для увеличения или “-” для уменьшения. Максимально значения отступа 40px.

  1. С помощью кнопки “Скрыть на мобильных” можно убрать социальные сети для отображения в телефонах.

Адаптивность писем в новом редакторе eSputnik

Примеры дизайна и размещения блока “Социальные сети” в email-рассылках

Зачастую блок размещается в футере, а также в шапке письма. Так принято, но это совсем не означает, что именно такое размещение дает 100% результат. Можно выделять социальные сети все сразу, можно делать акцент на одной из них.

  1. Размещайте блок “Социальные сети” в футере .

Пример размещения соц.сети в футере

Пример дизайна размещения соц.сети в футере

  1. Добавляйте несколько иконок социальных сетей в шапку письма.

Оформление шапки письма социальными сетями

  1. Добавляйте социальные сети  в основную часть письма.

Размещение блока "Социальные сети" в основной части письма

Несмотря на общепринятые практики использования блока “Социальные сети”, вы можете тестировать размещение блока в самых различных местах и анализировать количество переходов от письма к письму, чтобы выбрать наиболее оптимальные вариант размещения.

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