Первые шаги
Отслеживание событий и поведения
Пользовательские данные
- Обзор адаптивного email-редактора
- Создание оформления для письма
- Создание сквозных модулей
- Настройка адаптивности
- Настройка Smart-элементов
- Оформление промовкладки для Gmail
- Добавление Rolloverʼа
- Добавление фона в письмо
- Добавление анкорных ссылок
- Библиотека блоков (Модули)
- Добавление блока "Видео"
- Добавление таблицы в письмо
- Работа с блоком "Баннер"
- Добавление пользовательских шрифтов
- Добавление кастомных иконок соцсетей
- Работа с блоком "Соцсети"
- Создание кнопки CTA
- Редактирование HTML и CSS
- Робота с блоком "Изображения"
- Работа с блоком “Таймер"
- Настройка блока "Меню"
- Создание футера
Омниканальность
- SDK для мобильных приложений
- Управление ключами доступа к мобильному SDK
- Подключение мобильного приложения
- Создание Google проекта для Mob Push
- Создание мобильных push-сообщений
- Настройка аналитики доставляемости и кликов
- Планирование мобильных push-уведомлений
- Настройка универсальных ссылок (deeplinks & Universal links)
- Отчеты по мобильным push-рассылкам
Автоматизация
- Настройка дополнительных рассылок
- Двойное подтверждение подписки
- Приветственная серия
- Приветственная серия с сегментацией по категориям
- Запуск сценария после импорта контактов
- Регулярный сценарий для группы
- Поздравление с днем рождения
- Привязка сценария к кнопке
- Согласование переменных события со сценарием на примере сценария "Заказ доставлен"
- Сбор отзывов о заказе
- Реактивация клиентов и подписчиков
- Отправка рассылки непрочитавшим
- Контроль триггеров
Персонализация
- Подстановка промокода из файла
- Подстановка промокода с использованием API
- Принципы генерации промокодов с помощью PHP/JAVA
- Подстановка промокода с помощью персонализации
- Загрузка промокодов для использования в сценарии
- Генерация промокодов в сценарии
- Отправка промокода с помощью препроцессора
- HTTP-запрос для передачи промокода из сообщения в карточку контакта
Аналитика
- Отчёт по email-рассылке
- Отчет по AMP-рассылке
- Отчеты по мобильным push-рассылкам
- Отчет по SMS-рассылке
- Отчет по Web-push рассылке
- Отчет по Viber-рассылке
- Настройка передачи UTM-меток
- Визуализация дохода от рассылок
- Отслеживание эффективности рассылок в Google Analytics
- Как открыть CSV-файл после экспорта
Мультиязычность
Товарные рекомендации
API
Смена системы
Документы
Интеграция
Добавление фона в письмо
Существует несколько способов сделать письмо интереснее и привлекательнее, один из них – расставить акценты, добавив фоновое изображение. Сделать это можно с помощью двух методов: залить цветом область или добавить картинку.
Цветной фон подчеркнет уникальность рассылки. Задать цвет можно для:
- Всего письма.
- Полосы.
- Структуры.
- Контейнера.
Благодаря адаптивному редактору eSputnik сделать это несложно, ниже приведены простые шаги по добавлению фоновой картинки.
Разберем эту функцию на примере анонса вебинара от компании eSputnik, так как в этом письме использованы практически все методы добавления фона.
Общие настройки цвета
В меню слева у вас есть возможность задать цвет каждой области: фона, полосы, структуры и контейнера соответственно. Там вы указываете код цвета (в формате #хххх) или подбираете подходящий из всплывающей палитры:
Как задать фон всего письма
Прежде чем приступить к созданию письма, необходимо определить общие параметры (установить ширину письма, задать отступы и т. д.). К ним относится и цвет фона. В разделе “Оформление” перейдите во вкладку “Общие настройки” и укажите необходимый цвет.
В нашем случае указан серый фон – #f6f6f6.
В том же разделе “Оформление” во вкладке “Общие настройки” есть чекбокс “Картинка в фоне”. Если его переключить, открываются дополнительные настройки:
Далее вы можете загрузить заранее подготовленное изображение с компьютера, добавить ссылку из общедоступных источников или выбрать изображение из банка. Обратите внимание, что картинки должны быть в формате PNG, JPG, GIF и не более 3 Мб или 4000 × 4000 рх.
Настройки картинки в фоне
-
Заменить изображение
-
Редактировать выбранное изображение (добавить фильтр, изменить размер, обрезать и т. п.)
-
Дублировать картинку по высоте и ширине. Лучше брать бесшовные (стыкуемые) картинки, чтобы подложка выглядела цельной
-
Разместить изображение по центру письма
-
Задать положение изображению по оси X и Y.
Обращаем ваше внимание: некоторые почтовые клиенты (Windows 10 Mail, Android 4.4, приложение Gmail для iOS и Android с аккаунтами не Gmail) не поддерживают фоновые изображения. Мы рекомендуем выбирать цвет, похожий на изображение, в качестве запасного варианта.
После настройки всех параметров получаем письмо на подложке с изображением
.
Следует помнить, что на мобильных устройствах за счет размера экрана подложка не видна.
Настройки каждой области
Фон полосы
Полоса – элемент, больше ориентированный на десктопный просмотр письма, который помогает расставить акценты. Мобильные клиенты не отображают его полностью.
Полосы включают в себя такие элементы, как хедер, контент, футер и инфообласть. Задавать цвет можно как для всей полосы, так и отдельно для каждого элемента, кроме инфообласти.
Если кликнуть по полосе, всплывают настройки редактирования (меню слева) появляется дополнительное поле – цвет фона хедера/контента/футера.
.
В нашем примере для полосы верхней части письма задали синий цвет. Вместо заливки цветом можно добавить картинку. Благодаря выделению полосы внимание привлечено к информации о спикерах:
Также можно гармонично сочетать в себе заливку цвета и добавление картинки. Но для этого важно использовать картинку с прозрачным фоном.
В нашем письме задан синий фон полосы – #2b64cd и добавлена заранее подготовленная картинка с прозрачным фоном:
Получается письмо с оригинально выделенной полосой:
Фон структуры
Структура – это элемент полосы, который может содержать в себе видео, картинки, баннеры, кнопки и т. д.
Для каждой структуры в письме есть отдельные настройки в меню слева, где можно задать цвет, отступы, закругление углов.
В приглашении на вебинар структуре второго блока письма задан синий цвет. Так мы разграничили информацию.
В подложку структуры также можно добавлять картинку и совмещать ее с заливкой фона.
Фон контейнера
Вся информация размещается в контейнерах, поэтому с помощью заливки контейнера можно выделить любую область письма, тем самым привлечь к ней большее внимание.
Часто таким образом выделяют заголовки в письме или товарные блоки.
В нашем примере добавляли фон контейнера дважды: для ссылок на предыдущие выпуски и для информации об отправителе.
Блок с информацией о предыдущих выпусках:
Тут три контейнера закрашены в синий цвет и добавлены три разные картинки на прозрачном фоне.
Важные моменты при добавлении фона в письме
- Рекомендуем добавлять такой фоновый цвет или картинку, которые будут ассоциироваться с вашим брендом или гармонировать с содержимым писем.
- Всегда проверяйте, как ваша рассылка будет смотреться на экране мобильного телефона, так как многие люди не проверяют почту с компьютера, а письмо должно достойно выглядеть и без фоновой заливки.
- Обращайте внимание, чтобы текст на фоне картинок или заливки фона был читабельный, поэтому не забывайте делать его контрастным.