Создание контента для email в Drag & drop редакторе

Создавайте контент для email во встроенном редакторе Pushwoosh без написания кода. Вы получаете многоразовый макет с блоками контента, изображениями, кнопками, персонализированным текстом и соответствующим требованиям футером, который можно использовать в Customer Journey или в разовой email-рассылке.

Примечание

Предпочитаете HTML? Используйте HTML-редактор Pushwoosh для большего контроля. Подробнее

Важно

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

Создание нового контента для email

1. Перейдите в Контент → Контент email.
2. Выберите, с чего начать:
   • Нажмите Создать контент email, чтобы открыть Drag & drop редактор и создать email с нуля.
   • Нажмите на стрелку рядом с Создать контент email, затем выберите Использовать шаблон, чтобы начать с готового макета из галереи.
   • Нажмите на стрелку рядом с Создать контент email, затем выберите HTML-код, чтобы использовать HTML-редактор. Подробнее

Обзор интерфейса редактора

Когда вы открываете email, встроенный редактор содержит следующие области:

Верхняя панель

Переименуйте email, отмените или повторите изменения, запустите Проверку, чтобы выявить проблемы перед отправкой, и сохраните свою работу. См. Проверка email перед отправкой. Откройте меню ⋮ для дополнительных действий:

• Предпросмотр: посмотрите, как email будет отображаться у получателей, с собственным переключателем «Десктоп/Мобильная версия». См. Редактирование мобильной версии.
• Тестовый email: отправьте предпросмотр на тестовое устройство или адрес. См. Отправка тестового email.
• Brand book: примените сохраненный логотип, цвета, шрифты и стили блоков по умолчанию к этому email в один клик. Подробнее
• Раздел Стили бренда: примените сохраненный бренд или сбросьте переопределения стилей для отдельных блоков, не открывая Brand book. Подробнее
• История версий: просмотрите и восстановите ранее сохраненную версию этого email. См. Восстановление предыдущей версии.

Примечание

Если для вашей учетной записи включено одобрение контента, на верхней панели также отображается кнопка Отправить на одобрение и значок статуса версии (Черновик, На одобрении, Одобрено или Отклонено), а кнопка Тестовый email полностью скрыта. Полный рабочий процесс описан в разделе Одобрения и версии контента.

Панель языка / темы / прехедера

Над рабочей областью переключите язык редактирования, установите тему и прехедер для email и используйте Автоперевод, чтобы заполнить недостающие переводы. Узнайте, как настроить языки и локализацию.

Рабочая область

Просматривайте email так, как его увидят получатели, и редактируйте текст, изображения и кнопки прямо в макете. Пустой email отображает надпись Начните с блока.

Панель слоев

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

Правая панель

Переключайтесь между тремя вкладками:

• Блоки: добавление контента в email. См. Справочник по блокам контента email.
• Настройки: применение стилей ко всему email сразу. См. Настройка общешаблонных стилей и футера.
• AI: общайтесь с AI-помощником для создания или редактирования контента по вашему запросу.

Добавление блоков контента

1. Откройте вкладку Блоки на правой панели.
2. Перетащите блок на рабочую область или нажмите на блок, чтобы добавить его в конец email.
3. Продолжайте добавлять блоки, пока макет не будет готов.

Каждый тип блока служит разной цели в email:

• Заголовок: заголовки и короткие подзаголовки
• Текст: основной текст и длинные описания
• Кнопка: кликабельный призыв к действию
• Изображение: изображения из Медиахранилища, загруженные с устройства или по URL
• Видео: кликабельный постер видео, который открывается на YouTube или Vimeo
• Карточка: изображение с заголовком, текстом и кнопкой в одном макете
• Разделитель: линия, разделяющая секции
• Колонки: макеты с расположением бок о бок (2, 3 или 4 равные колонки, или разделение 33/67 и 67/33)
• Товары: сетка карточек товаров — введите товары вручную или загрузите их из вашего Каталога товаров или из брошенной корзины получателя
• Таймер: обратный отсчет для предложений и сроков
• Меню: строка или столбец навигационных или контактных ссылок
• Соцсети: иконки, ссылающиеся на ваши профили в социальных сетях
• HTML: пользовательский HTML, например, форма, опрос или встроенное видео

См. Справочник по блокам контента email для настроек каждого блока, как сохранять и повторно использовать блоки и типы ссылок для кнопок и текста.

Отображение контента для определенных получателей

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

Редактирование мобильной версии

После добавления блоков контента переключитесь на мобильную версию, чтобы проверить и настроить их отображение на телефоне. Рядом с переключателем языка над рабочей областью используйте переключатель Десктоп / Мобильная версия, чтобы перейти в полностью редактируемый мобильный вид с реальной шириной экрана телефона. Выбирайте, редактируйте и переставляйте контент точно так, как его увидят ваши подписчики на своих телефонах, а не просто просматривайте, как адаптируется десктопный макет.

У каждой настройки, которую можно переопределить для мобильной версии, есть флажок. Когда флажок снят, подсказка показывает унаследованное значение для десктопа, и настройка продолжает его использовать. Включите флажок, чтобы установить отдельное значение для мобильной версии. Снимите его снова, чтобы вернуться к значению для десктопа.

Настройка разных отступов и размеров шрифта для разных устройств

• Отступы: у каждого блока, колонки, карточки и отдельного элемента (например, текста, изображения или кнопки) есть управление отступами, которое можно переопределить для мобильной версии. Переключите рабочую область в режим Мобильная версия, включите флажок рядом с Отступами и установите новое значение. Отступы для десктопа останутся прежними, пока вы не включите флажок.
• Размер шрифта: включите Размер шрифта (мобильная версия) для текстового элемента, чтобы установить размер только для мобильных устройств. Без этого переопределения большие заголовки автоматически уменьшаются, чтобы поместиться на экране телефона.

Управление тем, как колонки складываются на мобильных устройствах

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

• Складывать: колонки выстраиваются в один столбец, сверху вниз (по умолчанию).
• Сохранять ряд: колонки остаются рядом, сохраняя десктопный макет.
• Обратный порядок: колонки складываются в обратном порядке. Полезно для строк с изображением и текстом: оставьте изображение справа на десктопе, но покажите его сверху на мобильном устройстве.

Отображение или скрытие контента в зависимости от устройства

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

Примечание

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

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

После того как основной макет готов, откройте вкладку Настройки, чтобы задать шрифты, цвета и отступы, которые применяются ко всему email, и заполните Футер данными вашей компании и ссылкой для отписки. Значения по умолчанию здесь обеспечивают единообразие новых блоков, пока вы не переопределите их на рабочей области. Подробнее

Сохранение email

Нажмите Сохранить на верхней панели, чтобы сохранить изменения. Используйте Отменить/Повторить на верхней панели, чтобы перемещаться вперед и назад по вашим правкам.

Примечание

При сохранении ваш email сохраняется в Контент → Контент email. Оттуда вы можете редактировать и управлять им, а также использовать в своих кампаниях. Подробнее

Восстановление предыдущей версии

Pushwoosh сохраняет снимок каждый раз, когда вы нажимаете Сохранить. Чтобы получить к ним доступ, откройте меню ⋮ на верхней панели и выберите История версий — доступно после того, как email был сохранен хотя бы один раз.

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

Восстановление загружает HTML-контент, языковые варианты и тему версии как несохраненные изменения. Это не затрагивает общешаблонные стили и футер, установленные на вкладке Настройки. Ничего не перезаписывается, пока вы не нажмете Сохранить. Чтобы отменить восстановление, нажмите Cmd/Ctrl+Z. Pushwoosh хранит 20 самых последних версий для каждого email, и версия, ожидающая одобрения, никогда не удаляется.

Совет

Если ваш браузер закроется до того, как вы сохраните изменения, Pushwoosh сохранит локальную резервную копию ваших несохраненных правок. В следующий раз, когда вы откроете этот email, появится баннер с предложением Восстановить или Отменить. Эта резервная копия существует только в том браузере, где она была создана, и удаляется, как только вы сохраняете изменения.

Проверка email перед отправкой

Нажмите Проверить на верхней панели, чтобы открыть Умную проверку и просканировать ваш email на наличие распространенных проблем:

• Кнопки без ссылки
• Незаполненные плейсхолдеры AI
• Пустые слоты для изображений и отсутствующий alt-текст
• Контрастность текста, не соответствующая WCAG AA
• Пустая или слишком длинная тема письма
• Отсутствие почтового адреса отправителя в футере маркетингового email
• Контент, из-за которого email превышает лимит Gmail на обрезку (~102 КБ, после чего Gmail обрезает сообщение)
• Непереведенный контент
• Непроверенные переводы остались неподтвержденными
• Таймер обратного отсчета, дата окончания которого уже прошла
• Условие отображения с неработающим или пустым правилом, ветка, потерявшая блок, к которому она привязана, или условие, которое не будет применяться, потому что динамический контент отключен для учетной записи
• Неправильный синтаксис Liquid в теме, прехедере, футере или теле письма, проверенный на всех добавленных вами языках
• Блок Товары, использующий Правило каталога, Корзину или Рекомендации без токена доступа к API

Нажмите на найденную проблему, чтобы перейти прямо к соответствующему элементу на рабочей области.

Примечание

Умная проверка выполняется внутри редактора и не проверяет доставляемость. Аудит, который запускается на этапе отправки кампании на основе реальной тестовой отправки, по-прежнему проверяет такие вещи, как спам-рейтинг, неработающие ссылки и заголовок отписки. Сначала запустите Умную проверку, чтобы исправить видимые в редакторе проблемы, а затем положитесь на Аудит перед отправкой.

Умная проверка автоматически проверяет синтаксис Liquid каждый раз, когда вы ее открываете — отдельной кнопки для этого нет. Пока идет проверка, на панели отображается Проверка синтаксиса Liquid…; Умная проверка не сообщит, что все в порядке, пока эта проверка не завершится, поэтому медленная или неудачная проверка Liquid не может скрыться за ложным сообщением «все чисто».

Примечание

Проверка Liquid проверяет только синтаксис. Она не проверяет, существуют ли теги или атрибуты событий, на которые вы ссылаетесь, и доступны ли значения для каждого пользователя.

Отправка тестового email

Перед отправкой email-кампании вы можете отправить тестовый email, чтобы посмотреть, как контент будет выглядеть в почтовых ящиках получателей.

1. Откройте меню ⋮ на верхней панели и выберите Тестовый email.

2. В открывшемся окне добавьте до 50 получателей: выберите одно или несколько сохраненных тестовых устройств или введите любой действительный email-адрес, чтобы добавить его в список. Чтобы удалить получателя, нажмите на × рядом с ним.

3. Нажмите Отправить, чтобы отправить тестовое сообщение всем выбранным получателям. Если отправка на все адреса не удалась, Pushwoosh покажет ошибку в диалоговом окне; если не удалось отправить только на некоторые, он перечислит неудачные адреса во всплывающем уведомлении и все равно доставит остальным.

Использование сохраненного контента email

Теперь, когда ваш контент для email готов, его можно использовать в email-кампаниях. Узнайте больше о том, как его использовать