Работа с блоком "Картинки"

Для верстки email рассылок рекомендованное правило 60% текста и 40% картинок зачастую не соблюдается. Текст переносится за футер, а основной акцент на дизайн письма. Работая с картинками всегда возникает масса вопросов: что выбрать, как редактировать, как зафиксировать размер и расположение, особенно, когда оно должно быть адаптивным для разных устройств.

 

Работа в редакторе с блоком "Картинки"

 

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

Для красивого оформления письма раздел картинок делится на:

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

  2. Общие изображения: можно сохранить в редакторе и применять в любом письме, принадлежат вашей компании, например: логотип;

  3. Системные: иконки социальных сетей, платежных систем и пр.;

  4. Банк готовых картинок.

Вкладка "контент" в адаптивном редакторе

Файлы должны быть в форматах PNG, JPG, GIF и размером до 2 Мб для быстрой загрузки в письме и корректного отображения на всех устройствах.

Добавляйте свои картинки:

Перетаскивайте несколько изображений в обозначенную область и загрузка начнется автоматически.

Вкладка "контент" в адаптивном редакторе

Добавляйте картинки с внешних ресурсов:

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

Вкладка "Контент" в адаптивном редакторе

Ищите нужное изображение в банке картинок:

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

Раздел "Контент" в адаптивном редакторе

Сохраняйте для многоразового использования:

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

Вкладка "Контент" в адаптивном редакторе

 

Настраивайте, учитывая лучшие практики

Вкладка "Контент" в адаптивном редакторе

  • Ссылка важна для того, чтобы картинка была кликабельна и подписчики могли перейти по ней на ваш сайт;

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

  • Задавайте размер, отступы, расположение в письме для десктопной версии и отдельно для мобильной;

  • Замените скучную кнопку подтверждения электронного адреса, на картинку в письме, прикрепив нужный ивент;

  • Скрывайте блоки, в которых нет необходимости для показа в мобильной версии;

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

 

Редактируйте изображение в процессе создания письма

Вкладка "Контент" в адаптивном редакторе

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

 
Изменяйте размер:

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

Вкладка "Контент" в адаптивном редакторе

 
Используйте фильтры:

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

Вкладка "Контент" в адаптивном редакторе

 
Улучшайте качество:

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

Вкладка "Контент" в адаптивном редакторе

 
Добавляйте графические элементы:

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

Вкладка "Контент" в адаптивном редакторе

 
Добавляйте текст, рисуйте, стирайте:

Регулируйте размер, цвет, шрифт. В нашем редакторе есть все, для создания яркого баннера всего за несколько минут.

Вкладка "Контент" в адаптивном редакторе

 
Сравните “До” и “После”:

Исходная версия сохраняется автоматически.

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

Создать емейл так легко и просто! Еще не пользовались нашим редактором? Самое время начать.