Привет! В Soluspage помимо конструктора страниц теперь еще добавили конструктор html-писем для email-рассылки. Сегодня вместе будем тестировать эту опцию.

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

Кроме конструктора писем прилетела еще новость про изменение в тарифах Soluspage.

Ранее у них был полностью бесплатный, где можно было добавить 1 домен и на нем разместить до 20 страниц. Теперь это убрали. Ввели 15 дней бесплатного доступа к тарифу VIP, а после уже за оплату – либо тариф с оплатой каждого домена, которым пользуетесь – 75 р. в месяц. Либо тариф VIP без ограничений 350 р. месяц + возможность экспорта страниц в html-формате и загрузки на свой хостинг.

Но сегодня не о доменах и сайтах, а о конструкторе писем.

Ниже предлагаю посмотреть свой видеообзор:

Новинка доступна в Soluspage в разделе «Кабинет» → «Конструктор» → «Конструктор писем».

Конструктор html-писем в Soluspage

Чтобы добавить письмо – вначале нужно добавить категорию (а в ней уже можно создавать несколько писем).

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

При создании или удалении категории есть маленький косяк – перекидывает на соседний раздел «Конструктор шаблонов» и нужно заново переходить в «Конструктор писем».

Далее добавляем в созданную категорию письмо.

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

У нас откроется редактор.

Конструктор html-писем в Soluspage

Редактор очень похож на тот, в котором мы делаем страницы. Только пока тут мало блоков. Уверена, скоро добавят еще – ведь и в конструкторе страниц они тоже постепенно добавлялись. Например, интересно было бы добавить таймер, видео. А так основные блоки уже доступны.

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

Чтобы добавить нужный вам блок, кликните на него внизу в списке. Затем в меню слева выберите вариант блока (если их несколько).

Конструктор html-писем в Soluspage

Наведите мышкой на добавленный блок – вверху слева есть несколько вкладок «Настройка» и «Содержимое».

Конструктор html-писем в Soluspage

В настройке задаются отступы, ширина блока и фон – прозрачный, цвет или картинка.

Конструктор html-писем в Soluspage

А в содержимом – контент конкретного блока. Например, для блока с изображением – это картинка и ссылка в картинке.

Конструктор html-писем в Soluspage

Справа при наведении на блок мышкой вы увидите еще несколько иконок – там можно сохранить блок в галерею «Мои блоки», удалить, скопировать блок, перемещать вверх/вниз.

Конструктор html-писем в Soluspage

Итак, первым в свое письмо я добавлю блок с изображением – в нем будет мой брендирующий баннер (логотип для письма с моим фото и названием проекта), сделанный в Канве.

Конструктор html-писем в Soluspage

В содержимом блока подгружаю свое изображение с компьютера – тот самый баннер. Нажимаю «Вставить из галереи».

Конструктор html-писем в Soluspage

Затем «Обзор» – выбираю файл у себя на компьютере.

Конструктор html-писем в Soluspage

Дальше – «Загрузить изображение».

Конструктор html-писем в Soluspage

И выбираю в галерее, кликнув по нему мышкой.

Конструктор html-писем в Soluspage

Опционально – можно задать ширину и высоту картинки, вставить в нее ссылку и сохранить. Для баннера в шапке письма я выставляю ширину 600 пикселей и высоту 151 пиксель. При таких размерах он хорошо выглядит и на ПК, и на смартфоне.

Конструктор html-писем в Soluspage

В настройках поменяю ширину данного блока на 12 колонок, и отступ слева поставлю 0. Это определила, когда тестировала письмо в сервисе рассылок, баннер немного съезжал.

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

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

Вторым блоком добавлю заголовок – о чем мое письмо.

Конструктор html-писем в Soluspage

Текст заголовка меняю в содержимом блока, там же настраиваю цвет, шрифт, размер текста.

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

А в настройках блока задам цвет фона – светло серый, чтобы его визуально выделить.

Важно: при смене фона вы тоже можете столкнуться с багом, когда снимаешь галку с «Прозрачный фон» и хочешь выбрать на шкале цвет – но она реагирует.

Конструктор html-писем в Soluspage

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

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

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

Для этого в настройках верхнего блока я уменьшаю его нижний отступ до 30 пикселей

Конструктор html-писем в Soluspage

А в настройках блока-заголовка одинаково уменьшила до 45 пикселей верхний и нижний отступы. Тем самым подрегулировала высоту данного блока.

Конструктор html-писем в Soluspage

Вот, что получилось:

Конструктор html-писем в Soluspage

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

Конструктор html-писем в Soluspage

Чтобы отредактировать текст, захожу в «Содержимое» блока.

Конструктор html-писем в Soluspage

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

Конструктор html-писем в Soluspage

В настройках текстового блока уменьшила его верхний отступ до 30 пикселей.

Конструктор html-писем в Soluspage

Четвертый последний блок с кликабельной кнопкой – призыв почитать полную статью.

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

Важно: с кнопкой есть косяк (не отображаются стили, и она некликабельна в почтовом ящике) – лучше добавлять картинкой. Тогда работает. Но надеюсь, скоро исправят и обычную кнопку, в поддержку запрос отправляла.

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

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

Конструктор html-писем в Soluspage

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

Конструктор html-писем в Soluspage

И, конечно же, добавить ссылку в кнопку.

Конструктор html-писем в Soluspage

А вот кнопку-картинку можно найти в интернете или создать свою в сервисе Clickminded.

Затем просто загрузить свою картинку-кнопку в разделе «Содержимое».

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

И вставить в нее ссылку.

Конструктор html-писем в Soluspage

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

Конструктор html-писем в Soluspage

Итого, вот такое письмо у меня получилось:

Конструктор html-писем в Soluspage

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

Конструктор html-писем в Soluspage

Готовое письмо сохраняем.

Конструктор html-писем в Soluspage

И копируем его html-код.

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

Далее покажу, как его добавить на примере сервисов email-рассылок Spoonpay и Джастклик.

В Spoonpay идем в Инструменты маркетинга → Письма → Добавить письмо.

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

Указываем название и заголовок (тему письма).

Тип письма выбираем «Импортированное html».

Ниже вставляем скопированный на предыдущем шаге код. И жмем «Добавить».

Конструктор html-писем в Soluspage

Тестируем письмо себе на email перед отправкой в разделе «Рассылки» →»Тестовая рассылка».

Конструктор html-писем в Soluspage

Конструктор html-писем в Soluspage

Если все ок, в том же разделе «Рассылки» добавляем уже настоящую рассылку по базе подписчиков.

Как использовать этот html-шаблон письма в сервисе рассылок Джастклик?

Заходим в раздел «Рассылки», выбираем тип рассылки, например, «мгновенную» (на запланированные дату и время).

Конструктор html-писем в Soluspage

В редакторе письма переключаемся на режим кода – Источник.

Конструктор html-писем в Soluspage

Вставляем код html-письма, скопированный в Soluspage. И снова переключаемся на визуальный режим.

Конструктор html-писем в Soluspage

Тестируем письмо к себе на email перед отправкой по базе.

Конструктор html-писем в Soluspage

Если вам требуется что-то поменять в шаблоне html-письма, то снова зайдите в кабинет Soluspage – в конструктор писем и нажмите на иконку в виде карандаша напротив письма. Оно откроется в редакторе.

Конструктор html-писем в Soluspage

Отредактируйте, сохраните и заново скопируйте его код.

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

Конструктор html-писем в Soluspage

Друзья, буду рада, если данный обзор конструктора html-писем в Soluspage был вам полезен.

Обратная связь и вопросы в комментариях приветствуются.

Кстати, у меня есть на блоге статья про другой конструктор html-писем Stripo.

Виктория