Создание контента 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 сразу. См. Настройка общешаблонных стилей и футера.
• ИИ: чат с ИИ-помощником для генерации или редактирования контента по запросу.

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

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

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

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

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

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

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

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

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

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

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

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

Управление расположением колонок в мобильной версии

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

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

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

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

Примечание

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

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

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

Сохранение email

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

Примечание

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

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

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

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

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

Совет

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

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

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

• Кнопки без ссылки
• Незаполненные плейсхолдеры ИИ
• Пустые слоты для изображений и отсутствующий 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-кампаниях. Узнайте больше о том, как его использовать