Инструкции

Конструктор писем UniSender: 10 фишек, которые упростят вёрстку

Поиск картинок, адаптивность, удобные отступы и многое другое

В июле 2020 мы запустили новый конструктор писем. Теперь создать письмо намного легче: появились новые блоки и шаблоны, удобнее верстать мобильную версию. И чтобы вам было проще собирать свои рассылки, мы нашли 10 фишек нового конструктора писем, о которых вы могли не знать. Они помогут сделать письмо выдержанным в одном стиле, упростят вёрстку и даже исправят небольшие косяки в дизайне.

Ниже — все 10 фишек:

Доступ к лучшим фотостокам в один клик

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

Доступ к лучшим фотостокам в один клик
По запросу сервис ищет бесплатные для коммерческого использования картинки на крупных фотостоках

Как воспользоваться фишкой

Добавьте блок «Картинка» в структуру письма.

Выберите блок «Картинка» в содержимом

Нажмите «Обзор» и в открывшемся окне выберите «Искать бесплатные фото».

Ищите бесплатные картинки на крупнейших фотостоках

Введите поисковой запрос на английском и нажмите на кнопку поиска или на клавишу Enter.

Выберите фотографию, которую хотите добавить в библиотеку изображений, и нажмите «Импортировать».

Импортируйте понравившееся изображение

Нажмите «Вставить» на фотографии.

Добавьте нужное изображение из файл менеджера

Фотография автоматически подстроится по размеру под параметры блока в структуре письма.

Фотография успешно добавлена в письмо

Интеграция с Giphy

Теперь в письмо можно добавить анимацию напрямую с Giphy — самой крупной платформы, где пользователи делятся гифками. Прелесть гифок в том, что весят они мало и для просмотра не нужно переходить на сторонний сайт, как это происходит при добавлении видео в email.

В рассылках Skyeng часто используют GIF, это делает письма более живыми

Как воспользоваться фишкой

Добавьте блок «GIF» в структуру письма.

добавляем блок

Нажмите кнопку «Search for gifs with Giphy» и введите поисковый запрос на английском.

Фактически гифки — это способ вставить видео и смотреть его прямо в письме

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

Прозрачные стикеры в теле письма

Стикер — это изображение с прозрачным фоном, который можно использовать таким образом:

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

В конструкторе писем стикеры добавляются напрямую из Giphy.

Как воспользоваться фишкой

Добавьте блок «Стикеры» в структуру письма.

Добавьте стикеры в письмо

Нажмите кнопку «Search for stickers with Giphy» и введите поисковый запрос на английском.

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

Интеграция с соцсетями

Если нужно вставить фото с корпоративного мероприятия или рекламный баннер из Facebook* — импортируйте изображения, не выходя из конструктора. Поддерживаются не только Google Drive и Instagram*, но и экзотические для СНГ Flickr, Box, Github.

Как воспользоваться фишкой

Добавьте блок «Картинка» в структуру письма.

Добавьте блок «Картинка» в письмо

Нажмите «Обзор» и в открывшемся окне выберите «Импорт».

Импортируйте изображения из своих соцсетей

Выберите способ импорта и добавьте нужную картинку в письмо.

Выберите платформу, с которой хотите импортировать фото

Отдельные версии письма для мобильных и десктопа 

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

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

Я отключил показ картинки слева на мобильных, в результате — подписчики не увидят эту пару, когда откроют письмо на смартфонах

Размер картинок в мобильной версии письма также можно настроить через опцию «Полная ширина на мобильном». Это хорошо работает, если нужно сохранить читабельность логотипа в мобильной версии или если в письме идёт вёрстка в одну колонку: текст-картинка-текст-картинка-картинка-текст.

Используйте «Полную ширину на мобильном» для детальных изображений
Я поставил «Полная ширина на мобильном», чтобы изображение не было слишком мелким на небольших экранах смартфонов

Благодаря этим микрофишкам можно создать два варианта одного и того же письма: для десктопа и мобильных. Удобно, особенно если с мобильного и ноутбука вашу рассылку читает разная аудитория.

Как воспользоваться фишкой

Чтобы показывать часть письма только подписчикам на десктопах или мобильных, выберите блок, который нужно скрыть. Это полезно, если одна и та же картинка выглядит слишком крупной на десктопе, и слишком маленькой — на экранах мобильных.

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

Скройте тяжелые элементы в мобильных версиях письма
Скрою GIF в мобильной версии, чтобы подписчики тратили меньше мобильного трафика при открытии

Чтобы настроить размер блока в мобильной версии, в свойствах блока выберите «Полная ширина на мобильном».

Настроить размер изображения можно вручную в теле письма
Я настроил вручную отображение блока для разных платформ

Кастомные иконки соцсетей

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

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

Перетащите блок «Соцсети», чтобы добавить иконки соцсетей в письмо
Добавьте кнопки соцсетей в письмо
Если встроенные иконки не подходят — можно загрузить собственные

Как воспользоваться фишкой

Перетащите блок «Соцсети» в структуру письма.

Перетащите «Соцсети» в email

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

Выберите один из наборов иконок соцсетей

Быстрое добавление видео с YouTube и Vimeo

Большинство почтовиков не поддерживают видео, поэтому если прикрепить ролик напрямую в письмо — мало кто из подписчиков его увидит. Поэтому обычно ставят картинку-обложку видео с гиперссылкой на оригинальный ролик, и сверху добавляют кнопку Play.

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

Как воспользоваться фишкой

Добавьте в структуру письма блок «Видео».

Добавьте блок с видео в письмо

Нажмите на добавленный блок и вставьте ссылку на видео.

Добавьте ссылку на видео, чтобы подгрузить его обложку

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

Настройте вид и размер кнопки Play

Отмена правок. Возвращение к оригинальной версии письма

Часто на середине вёрстки письма понимаешь, что допустил ошибку в самом начале. Как вернуться и найти её? Мы добавили возможность откатиться к любому изменению в письме. Удобно, если хочется посмотреть несколько вариантов шаблона: переключаетесь между несколькими версиями в рамках одного письма и выбираете лучшее.

Вам доступна вся история изменений в email-шаблоне
За минуту у меня получилось около десяти изменений письма, все они отображаются в истории изменений

Как воспользоваться фишкой

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

Отмените последнее действие, нажав на кнопку «Назад»

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

Модули для быстрого создания типовых рассылок

Если рассылки похожи друг на друга, приходится брать старый шаблон, заменять в нём текст и изображения. При этом у компании может быть много рассылок: под распродажу или конкретную акцию, праздничные, промо конкурса, информационные. Искать нужный шаблон и менять его неудобно.

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

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

Как воспользоваться фишкой

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

Сохраните часть письма, которая вам нравится

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

В любое письмо можно добавить сохранённые ранее строки

Нахожу сохранённую строку и добавляю её в письмо. Я сохранил её в «Мои сохранённые строки» и назвал «Соцсети».

Сохраняйте строки в разделы конструктора

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

Добавьте строку в структуру письма

Удобные отступы между блоками

Как было раньше: если в письме было что-то не так с отступами между блоками или видео лезло на текст — приходилось верстать заново, звать на помощь дизайнера или оставлять как есть. Теперь можно пользоваться делителем. Делаем его прозрачным, чтобы увеличить пробелы между блоками с контентом или задать отступы между текстом и картинками.

Между блоками можно ставить прозрачные разделители

Как воспользоваться фишкой

Перетащите блок «Делитель» в структуру письма.

Перетащите блок «Делитель» в письмо

Нажмите на блок в письме и выберите «Прозрачность». После этого можно будет настроить высоту делителя.

Активируйте «Прозрачность», чтобы превратить делитель в отступ

Готово! Такие же отступы можно добавить и к другим элементам письма.

Итого

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

Хотите попробовать?