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

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

Примечание

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

Важно

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

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

1. Перейдите в Content → Email content.
2. Выберите, с чего начать:
   • Нажмите Create email content, чтобы открыть Drag & drop редактор и создать email с нуля.
   • Нажмите на стрелку рядом с Create email content, затем выберите Use a template, чтобы начать с готового макета из галереи.
   • Нажмите на стрелку рядом с Create email content, затем выберите HTML code, чтобы использовать редактор HTML-кода. Узнать больше

Изучение интерфейса редактора

После открытия email во встроенном редакторе вы увидите следующие области:

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

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

• Preview: просмотр email в том виде, в котором его увидят получатели, с собственным переключателем Desktop/Mobile. См. Редактирование мобильной версии.
• Test email: отправка предварительной версии на тестовое устройство или адрес. См. Отправка тестового email.
• Brand book: применение сохраненного логотипа, цветов, шрифтов и стандартных настроек блоков к этому email в один клик. Узнать больше
• Раздел Brand styles: применение сохраненного бренда или сброс стилей отдельных блоков без открытия Brand book. Узнать больше
• Version history: просмотр и восстановление ранее сохраненной версии этого email. См. Восстановление предыдущей версии.

Панель Language / Subject / Preheader

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

Холст

Просматривайте email так, как его увидят получатели, и редактируйте текст, изображения и кнопки прямо в макете. В пустом email отображается Start with a block.

Панель слоев

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

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

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

• Blocks: добавление контента в email. См. Справочник по блокам контента email.
• Settings: применение стилей ко всему email сразу. См. Настройка стилей и футера для всего email.
• AI: чат с AI-помощником для генерации или редактирования контента по запросу.

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

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

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

• Heading: заголовки и короткие подзаголовки
• Text: основной текст и длинные описания
• Button: кликабельный призыв к действию
• Image: изображения из хранилища медиафайлов, загруженные или по URL
• Video: кликабельный постер видео, который открывается на YouTube или Vimeo
• Card: изображение с заголовком, текстом и кнопкой в одном макете
• Divider: линия, разделяющая секции
• Columns: макеты с расположением бок о бок (2, 3 или 4 равные колонки, или разделение 33/67 и 67/33)
• Products: сетка карточек товаров — вводите товары вручную или извлекайте их из вашего каталога товаров или из брошенной корзины получателя
• Timer: обратный отсчет для предложений и сроков
• Menu: строка или столбец навигационных или контактных ссылок
• Social: иконки, ссылающиеся на ваши профили в социальных сетях
• HTML: пользовательский HTML, например, форма, опрос или встроенное видео

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание

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

Настройка стилей и футера для всего email

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

Сохранение вашего email

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

Примечание

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

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

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

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

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

Совет

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

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

Нажмите Check на верхней панели, чтобы открыть Smart check и проверить ваш email на наличие распространенных проблем:

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

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

Примечание

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

Smart check автоматически проверяет синтаксис Liquid каждый раз, когда вы его открываете — отдельной кнопки для этого нет. Пока идет проверка, на панели отображается Checking Liquid syntax…; Smart check не сообщает, что все прошло успешно, пока эта проверка не завершится, поэтому медленная или неудачная проверка Liquid не может скрыться за ложным сообщением “все в порядке”.

Примечание

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

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

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

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

2. В открывшемся окне выберите сохраненное тестовое устройство или введите любой email-адрес.

3. Нажмите Send, чтобы отправить тестовое сообщение на выбранный вами адрес.

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

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