Онлайн Конструктор Писем

Здравствуйте! Я рад, что вы продолжаете, а, может быть, с этого видео вы решили начать свое обучение, просмотр уроков по EMail-рассылкам от Чеснокова (это я), NotiSend (это сервис, с которым мы работаем) и РЭУ им. Плеханова (это университет, под патронажем которого происходит запись данного курса, так сказать, он оказывает содействие).

Это 14-й урок, в котором мы с вами научимся работать в бесплатном онлайн конструкторе писем, само собой разумеется, NotiSend, потому что он является одним из участников процесса.

Напомню, при условии, что вы пройдете все 20 уроков и тесты в конце, указав одну и ту же почту, то получите прекрасный сертификат от трех персоналий, указанных выше.

При условии, что вы регистрируетесь в NotiSend по реферальной ссылке, то, помимо все тех преимуществ, которые мы в том числе рассматриваем в нашем курсе, вы еще и получаете 5 000 писем бесплатно для отправки. И в конце урока вас ждет небольшой бонус – читайте до конца.

Хочу напомнить, что уроки идут последовательно, но не закреплены. Если, например, вам нужно только разобраться, как работать в редакторе, вполне себе вы можете просмотреть только этот урок, тут каких-то отсылок к предыдущим урокам точно не будет.

На стороне сервиса Нотисенд перейдите в раздел меню «Рассылки» → «Создать рассылку» → «Простая рассылка».

После этого вы попадете в раздел «Отправитель и тема», в котором заполняете все необходимые поля.

И при клике на кнопку «Следующий шаг» мы попадаем в редактор. Здесь есть определенное количество шаблонов. Надо отдать должное NotiSend – это количество и вариации шаблонов продолжают расти, поэтому можно их использовать. Чуть более подробно мы это рассмотрим в следующих занятиях.

После того как вы начнете использовать этот конструктор писем для рассылки и создадите первую рассылку, у вас появится раздел с собственными шаблонами писем «Мои шаблоны». Обратите внимание, такие информационные письма мои подписчики получают по поводу выхода новых уроков по EMail-рассылкам.

Выбираете шаблон, который вам наиболее подходит, и перед вами откроется интерфейс редактора, где вы сможете внести все необходимые изменения. Мы с вами видим наиболее стандартизированный редактор по отправке. Что имеется в виду. Этот подход, когда по центру у вас находится так называемое body, то есть ваше письмо, а справа и слева две колонки, которые вам позволяют работать с письмом.

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

Сначала мы с вами вставляем некую таблицу, шаблон из левого бокового раздела меню «Колонки», который потом мы заполняем блоками, потом мы их редактируем, форматируем с помощью функций в колонке с правой стороны от тела письма. Соответственно, каким-то контентом мы ее будем заполнять, непосредственно работая с блоком.

Первое. Перетягиваем из раздела «Колонки» блок, который соответствует вашей задумке реализации письма. Я возьму шаблон состоящий из трех колонок. И дальше я вставлю шаблон из двух колонок.

В каждую из колонок можно добавить любой тип блока из левого бокового раздела меню «Блоки». Например, я хочу, чтобы у меня была какая-то картинка по центру — и я перетягиваю в центральную ячейку колонки блок картинки из раздела «Блоки». Также, я могу добавить в колонку необходимый мне блок нажав на кнопку «+» в самой колонке.

С левой стороны я хочу, чтобы у меня был какой текст, я добавляю блок с текстом (иконка «А»). И с правой стороны, например, будет тоже текст.

В блок с картинкой можно загрузить все, что угодно. Можно загрузить картинку с компьютера, нажав на кнопку «Загрузить», или добавить ранее загруженную картинку в Нотисенд перейдя по кнопке «Выбрать». Я найду что-то, что ранее использовалось в моих рассылках, например, логотип и использую его.

С помощью доступных функций и настроек в колонке справа от письма, мы можем изменить:

1. Позицию – упорядочить/расположить картинку по центру или сбоку относительно ячейки в колонке.
2. Вставить ссылку. Я сделаю логотип кликабельным и добавлю ссылку на главную страницу моего сайта.
3. Alt – добавить альтернативный текст.
4. Размер – с помощью ползунка настроить размер картинки.
5. Типы устройств – есть возможность выбрать на каком устройстве будет отображаться картинка (на всех, только на десктопах, только на мобильных устройствах).
6. Отступы – можем настроить отступы для картинки сверху, снизу и по бокам относительно ячейки колонки.

Рассмотрим подробнее функцию Alt – это альтернативный текст. Очень актуально для Outlook. Как правило, когда пользователь получает письма в Outlook, картинки не отображаются. И Alt, так называемый альтернативный текст, будет отображаться, когда у пользователя отключен показ картинок, или картинка не отображается по каким-то техническим причинам. Поэтому в поле для вставки альтернативного текста я напишу «Логотип Digital-центра». Нажимаем «Готово».

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

Хочу вставить здесь кнопку для просмотра письма в браузере. Каждый раз, когда вы создаете какое-то письмо, на стороне NotiSend автоматически создается его веб-версия . Это делается для тех случаев, когда у пользователя, например, не отображается письмо или отображается криво, и «олдскульные» товарищи знают, что можно открыть в браузере это письмо.

Чтобы добавить кнопку в ячейку колонки я могу перетянуть в ячейку колонки блок кнопки из раздела «Блоки». Также, напоминаю, что можно добавить в колонку необходимый вам блок нажав на кнопку «+» в самой колонке.

После этого, в левой от письма колонке с настройками можно изменить следующие параметры для кнопки:

1. Фон – замена цвета для кнопки или загрузка картинки в качестве фона кнопки.
2. Текст – здесь задаем название для кнопки, я напишу «открыть в браузере».
3. Ссылка – здесь все логично, прописываем ссылку куда будет вести кнопка или, нажав на кнопку с перевернутым треугольником ∇, выбираем тип ссылки обычная (сайт, почта, телефон) или специальная (отписка, просмотр в браузере). Я выберу просмотр в браузере.
4. Позиция – выбираем расположение кнопки в колонке (слева, по центру, справа).
5. Размер – настраиваем размер кнопки с помощью ползунка, стрелок больше/меньше или прописываем значение вручную.
6. Скругление углов – эта настройка позволяет либо оставить кнопку закругленной либо скруглить ее углы.
7. Шрифт – можем изменить цвет, тип и размер шрифта текста на кнопке.
8. Обводка – здесь можно добавить обводку для кнопки, выбрать для нее цвет, тип и размер.
9. Типы устройств – есть возможность выбрать на каком устройстве будет отображаться кнопка (на всех, только на десктопах, только на мобильных устройствах).
10. Отступы – можем настроить отступы для кнопки сверху, снизу и по бокам относительно ячейки колонки.

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

В первую ячейку колонки добавлю текст, например, «Это письмо для вас» и задам отступы для текста сверху и снизу. Здесь также как и для кнопки или картинки в левой колонке с настройками можно изменить/настроить некоторые параметры для текста:

1. Фон – задать цвет для фона или выбрать картинку в качестве фона.
2. Типы устройств – выбрать на каком типе устройств будет отображаться этот блок с текстом.

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

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

• можно подвязать к картинке ссылку;
• уменьшить размер картинки до необходимого вам состояния в пикселях;
• прописать альтернативный текст;
• расположить по центру или сбоку;
• и т.д.

Далее мы вставляем основной текстовый контент, который хотим написать. Если хотим персонализировать письмо, то можем использовать функцию «Вставка параметров».

Например, вы вначале письма хотите поприветствовать подписчика по имени. Для этого выбираем значение «name», то есть из того поля, название которого будет соответствовать «name», будут подтягиваться данные. Если у вас в этом поле корректно занесено имя, оно и будет сюда подставляться. Если пользователь забивает сюда «абракадабру», а вы не проверяете, или у вас нет бизнес-процесса на проверку периодически вашей базы данных, то сюда и подтянется та «белиберда», которую он написал.

В строке ниже, рекомендую обязательно прописать «Значение по умолчанию, если параметр не задан. Что это значит? Это значит, что, если в какой-то из групп получателей рассылки нет колонки «name» (в форме из которой в группу попадают подписчики нет поля «name»), или колонка с именами по-другому называется, то вместо имени подставится указанное вами значение. Я, например, напишу «Уважаемый», и будет либо имя, либо «Уважаемый» и далее восклицательный знак. Далее идет какой-то текст, который выражает тему и суть вашего письма.

Еще можно вставить блок отступа. Здесь можно задавать его высоту, например, чтобы отступ был побольше, когда вы хотите оставить пространство между блоками – рекомендую так делать. Технически правильнее сначала вставлять новую колонку, потом вставлять блок отступа.

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

Можно вставить разделитель, можно в настройках справа поменять его цвет и выбрать на каких устройствах этот он будет отображаться.

Следующий момент, который я хотел бы показать – это кнопки социальных сетей. В правом боковом меню можно выбрать один из двух вариантов размера кнопок – 16 и 32. Можно настроить их расположение в блоке: справа, слева, по центру. Нажатием по зеленой кнопке «+» вы выбираете из списка ту социальную сеть, которую хотите указать и вставляете ссылку на эту соцсеть.

Следующий блок, который я хочу рассмотреть, – таблица. Он нужен, когда мы хотим с вами жизнь немножко усложнить. Например, у вас несколько товаров, вы хотите сюда добавить много-много картинок с перечнем товаром.

Для таблицы можно настроить фоновый цвет или выбрать фоновую картинку, а также выбрать тип устройства на котором в письме пользователь будет видеть эту таблицу.

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

Можно поменять размеры колонок.

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

Что касается вставки видео, думаю, достаточно понятно. Добавляем в тело письма новую колонку, далее в колонку добавляем блок с видео и прописываем в настройках ссылку на видео. Также можно прописать альтернативный текст, выбрать на каком типе устройств этот блок будет отображаться и настроить отступы.

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

Добавляете новую колонку, в нее перетаскиваете блок геопозиции. В колонке справа в строке «Адрес» начинаете вводить адрес, сервис автоматически подтягивает варианты из Google Maps. А в поле ниже автоматически формирует ссылку с адресом на Яндекс.Картах.

Что мы еще можем сделать. В правом верхнем углу письма мы можем перейти по кнопке «Тестирование», нажать «Предпросмотр» и посмотреть, как у нас будет выглядеть письмо.

С левой стороны – как будет выглядеть на десктопных устройствах, справа – на мобильных. Сервис автоматически адаптирует блоки под тот или иной тип устройств.

Можем повернуть телефон, посмотреть, как будет на таком формате в телефонах смотреться. И на планшетах тоже.

Также вы можете отправить тестовое письмо перейдя по кнопке «Тестирование» → «Отправить тестовое письмо». Я вам рекомендую создать внутри кампании некую группу, например, 5-6 человека или, как минимум, отдел маркетинга, которым вы предварительно будете отправлять письма. Это нужно для того, чтобы они могли посмотреть и дать вам обратную связь, все ли ОК или нет. Отправили, они посмотрели – все окей – вы тогда уже отправляете по всей базе.

Отобразить на реальных устройствах – на самом деле это всегда имитация. В целом, сервис пытается имитировать, как ваше письмо будет отображаться в том или ином почтовом агенте, в том или ином сервисе типа Chrome, Gmail, Яндекс и так далее. Кликаем по той же кнопке «Тестирование» → «Отобразить на реальных устройствах».

Это не быстрый процесс, пока он скалькулирует отображение в разных браузерах, может пройти какое-то время. Это такая не стопроцентная вариация, но примерно можете себе представлять.

Дальше нажимаете «Далее». И уже это будет другой урок.

Не забудьте поставить данному уроку лайк, подписаться на мой канал «Маркетинг в огне», если вы еще не подписаны. Если у вас есть вопросы, связанные с EMail-маркетингом в целом, с данным курсом в частности, с NotiSend в частности, задавайте в комментариях, буду стараться отвечать. Рекомендую посмотреть другие уроки, пройти их.

Напоминаю про реферальную ссылку. Лучше всего регистрироваться в NotiSend исключительно по ней, чтобы получить дополнительный бонус – 5 000 писем.

То, что обещал в начале:: «12 идей для повышения эффективности email-маркетинга». Переходите по ссылке и получайте такой замечательный мануал.

Данный урок для вас подготовил Алексей Чесноков. Спасибо за просмотр. До встречи в следующих уроках!