Обратите внимание, в статье описывается старый редактор писем.
В феврале 2024 года в Unisender появился новый редактор. Информацию о его основных функциях и преимуществах можно найти в разделе «Создание писем в новом конструкторе».
Креатив — это визуальный контент, который несет в себе информацию или призыв к действию. Его цель — привлечь внимание аудитории. Чаще всего понятие «креатив» подразумевает сочетание изображения (либо другого графического контента) и текста, которые дополняют друг друга.
Пример креатива от Coca-Cola
Для создания креативов существует множество специализированных сервисов и профессиональных программ. С их помощью можно реализовать практически любые потребности в графическом контенте. Но не всегда удобно использовать сторонние сервисы при создании письма, особенно когда нужно быстро отправить рассылку.
Поэтому в Unisender можно создавать креативы прямо в конструкторе писем. Рассмотрим несколько вариантов, как это сделать.
Встроенный редактор изображений
В конструкторе писем доступны все ключевые инструменты для редактирования изображений.
Чтобы перейти в редактор изображений, выберите блок «Картинка», добавьте нужное изображение и нажмите на кнопку «Графические эффекты» в левом меню свойств блока.
Как добавить картинку в письмо
На странице редактора изображений доступны 10 основных инструментов для работы с картинкой. Нажав на нужный, вы перейдете к выбору самого эффекта или к настройкам параметров изображения.
Рассмотрим каждый из инструментов подробнее.
Фильтр. Инструмент, с помощью которого можно накладывать на изображение различные фильтры, меняющие его цвет или текстуру. Для одного изображения можно использовать несколько фильтров, комбинируя их эффекты.
Выбранные фильтры будут отмечены в списке. Чтобы удалить наложенный фильтр, нажмите на крестик.
Размер. С помощью этого инструмента можно менять размер изображения, сохраняя соотношение сторон и пропорций. Размер изображения можно менять как в пиксельном, так и в процентном эквиваленте.
Чтобы изменить размер изображения, укажите нужные данные и нажмите на кнопку «Применить».
Обрезать. Инструмент, с помощью которого можно вырезать нужную часть изображения произвольно или использовать для этого один из самых популярных форматов с заданным соотношением сторон.
Чтобы изменения вступили в силу, нажмите на кнопку «Применить».
Трансформация. Позволяет изменить расположение изображения в пространстве: повернуть его под нужным градусом, отзеркалить содержимое.
Рисовать. Благодаря этому инструменту можно добавить на изображение нужные элементы, например блики. Также, используя стандартную кисть подходящего цвета, можно закрасить нежелательные части изображения.
Текст. Один из важнейших инструментов для создания креатива. С его помощью можно добавить на изображение текст. Для этого нажмите на кнопку «Добавить текст», после чего выберите нужный шрифт и цвет для него.
В редакторе доступно множество шрифтов. Однако нужно учитывать, что не все они будут работать с кириллическим алфавитом.
После того, как сам текст будет добавлен, нажмите на кнопку «Применить». Далее можно перейти в настройки текста и задать для него тень, цвет (включая градиент), контур, фон, прозрачность, текстуру, детали расположения и стиль.
Чтобы удалить блок с текстом нужно выделить его и нажать на клавиатуре кнопку «Delete».
Формы. Инструмент, который позволяет рисовать различные геометрические фигуры: стрелки, круги, квадраты, треугольники.
Чтобы удалить выбранную фигуру с изображения нужно выделить ее и нажать на клавиатуре кнопку «Delete».
Стикеры. Добавляет стикеры мест, событий и эмодзи. Также с помощью этого инструмента можно добавить на изображение дополнительные объекты — звезды и облака.
Чтобы удалить добавленный стикер, нужно выделить его и нажать на клавиатуре кнопку «Delete».
Рамка. Позволяет добавить к изображению рамку. Чтобы выбрать ее размер, нажмите на значок настройки. Выбранная рамка будет выделена в списке. Чтобы удалить рамку, нажмите на крестик.
Углы. Этот инструмент дает возможность скруглить углы изображения
Чтобы отменить действия, связанные с изменением формы или размера картинки, а также удалить нарисованные объекты, выйдите из редактора изображений, нажав на кнопку «Отменить» в правом верхнем углу. В этом случае остальные изменения также не сохранятся.
Завершив работу с изображением, нажмите на кнопку «Сохранить» в правом верхнем углу редактора.
После того как вы нажмете на кнопку «Сохранить» в редакторе изображений, изменить или удалить примененные эффекты уже не получится.
После сохранения отредактированное изображение появится в файловом менеджере в папке «editor_images». Оригинальная картинка при этом не изменится.
Также изображение будет доступно по ссылке из свойств блока, в котором оно выбрано.
Как использовать изображение в качестве фона
Еще один способ создать креатив в конструкторе писем — использовать изображение в качестве фона строки.
Для этого создайте новую строку, перетащив ее из раздела «Строки» на полотно письма. Далее в свойствах строки включите отображение фонового изображения и нажмите на кнопку «Изменить картинку».
Чтобы фоновое изображение смотрелось органично и его размеры не искажались, необходимо выбирать для фона картинку с такими размерами, которые будут соответствовать высоте строки и ширине тела письма.
Высота строки подстраивается под высоту ее содержимого, поэтому фоновое изображение может отображаться не полностью. Чтобы это исправить, используйте блок «Делитель», перетащив его на полотно письма в нужную часть строки.
Далее выберите для делителя прозрачность и укажите нужную высоту, которая соответствует высоте изображения.
Некоторые почтовые клиенты могут не отображать фоновые изображения. Как правило, фоновые изображения недоступны в почтовых клиентах, которые компании используют для внутрикорпоративных целей. Поэтому, помимо фонового изображения, необходимо указывать цвет фона строки. Тогда, если изображение не отобразится, получатель увидит текст или другой контент на выбранном вами цветном фоне, а общий вид письма не слишком пострадает. При этом желательно, чтобы цвет фона строки соответствовал цветовой гамме изображения.
Чтобы указать цвет фона для нужной строки, выделите её и слева, в свойствах строки, задайте нужный цвет фона контейнера.
Теперь вы можете добавить на фоновое изображение любые другие блоки: например, текст или кнопку.
Картинка с наушниками выбрана фоновым изображением строки, поверх фонового изображения добавлены блоки Текст и Кнопка
Когда строка с фоновым изображением будет полностью готова, вы можете сохранить ее целиком, чтобы использовать в других письмах.
Встроенный поиск gif по Giphy
Gif-изображения могут не только отлично дополнять письмо визуально, но и нести определенную функцию — информировать клиента об акции или скидке, поздравлять или приветствовать.
В конструкторе писем Unisender можно использовать собственные gif-изображения, загрузив их как обычные картинки.
Как сделать стильное письмо при помощи gif
Если же у вас еще нет подходящего gif-изображения, его можно найти, используя встроенный поиск по онлайн-базе Giphy.
Для этого выберите блок «GIFS» в разделе «Содержимое» и нажмите на кнопку «Search for gifs with Giphy».
Поиск идет по ключевым словам, которые можно указывать как на английском, так и на русском.
Встроенный поиск стикеров по Giphy
Стикеры — это те же gif-файлы, но с прозрачным фоном. Добавив их на фоновое изображение можно усилить визуальный эффект или акцентировать внимание получателя на нужном участке письма.
Чтобы добавить стикер, выберите блок «STICKERS» в разделе «Содержимое», после чего нажмите на кнопку «Search for stickers with Giphy».
Поиск также происходит по базе сервиса Giphy по ключевым словам.
Встроенный поиск бесплатных фотографий
Если у вас нет подходящей картинки для письма, вы можете попробовать найти нужное изображение среди 500 000 бесплатных фотографий прямо в конструкторе.
Поиск ведется по стокам Unsplash, Pexels и Pixabay. Все изображения можно использовать бесплатно как для личных, так и для коммерческих целей.
Для поиска нужных картинок выберите блок «Изображение» в разделе «Содержимое» и нажмите на кнопку «Обзор».
В открывшемся окне файлового менеджера нажмите на кнопку «Искать бесплатные фото».
В поиске укажите ключевые слова, по которым система будет искать фотографии, и нажмите кнопку поиска. Выбрав подходящее изображение, нажмите на кнопку «Импортировать», после чего оно добавится к вам в файловый менеджер, откуда это изображение можно будет выбрать для нужного блока «Картинка».
Полезные ссылки
Огонь, шарики и безработный воробей. 6 приёмов незабываемой GIF-анимации в письмах
Основные возможности конструктора писем
Как сохранить элементы письма для следующих рассылок
Как вставить GIF в письмо
Как правильно использовать картинки в рассылках
Как сделать стильное письмо при помощи гиф
Конструктор писем: как создавать рассылки за минуты
