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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итого

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

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