Редактор Stripo имеет несколько версий, функционал которых незначительно отличается друг от друга:

1. письма можно создавать напрямую в веб-интерфейсе Stripo, который обладает максимально широким и актуальным функционалом по созданию и редактированию шаблонов писем. С подробной инструкцией вы можете ознакомиться по ссылке.
2. с помощью плагина Stripo в enKod - плагин, созданный Stripo, не отражает всех актуальных обновлений веб-версии, поэтому если вам не хватает какого-то сложного функционала - вы можете создать письмо в веб-версии Stripo и перенести это письмо в enKod

Для создания письма без верстки вы можете воспользоваться плагином Stripo в enKod. Письмо можно создать двумя способами:

• создать письмо с нуля в Stripo

Для этого перейдите в Рассылки → Сообщение → Новое сообщение (Email), на этапе «Редактор сообщения» выберите «Редактор Stripo».

• Отредактировать один из готовых шаблонов

Вам могут понравиться уже готовые шаблоны сообщений enKod, для ознакомления с которыми достаточно нажать «Выбрать шаблон» и кликнуть «Выбрать» у нужного.

Чтобы отредактировать шаблон в предпросмотре нажмите кнопку «Открыть в редакторе Stripo»

Письма в Stripo собираются из горизонтальных полос. Для каждой полосы можно задать область письма:

• Хедер
• Контент
• Футер
• Инфообласть

Зачем: разделение на области расширит ваши возможности кастомизации - для каждой области можно отдельно задавать цвет фона, размер и цвет текста, их отображение на мобильных устройствах.

Наведите или кликните на серый фон канвы письма в редакторе и увидите обводку полосы с кнопкой «+». Нажмите на нее и выберите одну из доступных вам структур полосы (сплошную, с разделителями на 2, 3, 4 части).

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

• хедер - используют для размещения логотипа, меню
• контент - используют для основного содержания письма: текста, медиа
• футер и инфообласть - для указания причины получения письма, для ссылки отписки, контактных данных компании.

Наведите на серый фон канвы письма и увидите обводку полосы. Наведите и кликните на кнопку с многоточием - там приведен список доступных действий над полосой:

• удаление полосы - обратите внимание: невозможно удалить единственную в письме полосу
• копирование - по клику создастся копия полосы
• перемещение - зажав иконку левой кнопкой мыши, вы можете перетащить полосу в нужное вам место письма
• сохранение полосы как модуля - с помощью этой кнопки вы сможете временно сохранить дизайн нужной вам полосы, чтобы потом переиспользовать его в письме

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

• на одну из иконок картинки/текста/кнопки внтури блока «Бросьте контент сюда»
• в левом боковом меню в разделе «Контент» → «Блоки» выбрать нужный и перетащить в блок «Бросьте контент сюда» в нужной области письма

В левом боковом меню перейдите в раздел «Оформление». Там вы можете задать основные параметры письма:

• Общие настройки - можно задать:
  • фиксированную ширину письма - оптимальный размер 600 px
  • фон письма - цвет или изображение
  • шрифт, выравнивание текста
  • наличие адаптивности
  • отступы письма
• Полосы - можно задать цвет фона, контента, цвет и размер текста/ссылок для:
  • хедера
  • контента
  • футера
  • инфообласти
• Заголовки - шрифт по умолчанию для всего письма и размеры каждого из уровней заголовков текста
• Кнопка - цвет кнопки, наличие и цвет ховера (подсвечивания по наведению), границы, отступы, обводка, закругления, шрифт и размер
• Адаптивность - задать размеры текста в разных областях письма для отображения на мобильных устройствах, размеры заголовков, отступы (вокруг письма, относительно полос структуры выши и ниже)

Важно различать:

• фон письма — применяется ко всему пространству письма. Если сообщение открыто на десктопном устройстве, фон занимает всю площадь письма (например, на скриншоте ниже фон письма - голубой), тогда как на мобильных экранах он скрыт.
• фон контента – цвет внутри письма, который применяется для всех контейнеров с карточками товаров, контактной информацией и т.д. (на скриншоте ниже фон контента - белый)

Чтобы задать фон письма:

• в левом боковом меню в разделе «Оформление» доскролльте ниже до строки «Цвет фона письма»
• укажите нужный код цвета, либо выберите его вручную с помощью предлагаемой палитры цветов

Чтобы задать фон конкретной зоны:

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

• для конкретной полосы: кликните на нужную полосу (за зоной контента в рамках нужной полосы). В левом меню в разделе “Контент” появится окно “Внешний вид”. В строке “Цвет фона контента” вы можете задать нужный вам цвет для конкретно выбранной полосы.

Обратите внимание: если вы поменяете цвет для конкретной полосы, то он не изменится при обновлении цвета всех полос одной области.

Кликните на нужную полосу за пределами зоны контента этой полосы. В левом меню в разделе “Контент” → “Внешний вид” задайте нужный вам фон для конкретной полосы в разделе “Цвет фона полосы”.

Вы также можете загрузить картинку в качестве фона полосы в строке “Картинка в фоне”

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

Внутри каждой полосы есть строки с контентом и внешняя область. Каждая из строк контента называется структурой, ей также можно задавать цвет или картинку фона. Для этого:

• нажмите на нужную строку структуры (должен подсветиться блок с названием «Структура»)
• в левом боковом меню в разделе «Контент» → «Внешний вид» задайте «Цвет фона структуры» или «Картинку в фоне»

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

• для всего контейнера: кликните по границе нужного блока, он должен подсветиться с надписью «Контейнер». В левом боковом меню в разделе «Контент» → «Внешний вид» добавьте «Цвет фона контейнера» или «Картинку в фоне»

• для конкретного блока контейнера: в одном контейнере может быть несколько блоков (несколько текстов, кнопок, т.д.), для каждого из которых можно задать свой фон. Кликните на нужный блок. В левом боковом меню в разделе «Контент» → «Блоки» в строке «Цвет фона» задайте нужный вам цвет.

Обратите внимание: нельзя задать цвет фона блоку контейнера, если это блок: картинка, видео или баннер.

В Stripo текст может быть:

• обычным
• заголовком N уровня

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

• шрифт
• размер
• цвет
• способ выделения (курсив, жирный, подчеркивание, выделение маркером и др.)

В левом боковом меню перейдите в раздел «Оформление» → «Общие настройки»:

• с помощью строки «Выравнение» вы можете выбрать наилучший для вас способ расположения текста
• строка «Шрифт» установит шрифт по умолчанию для обычного текста всего письма (не перезаписывает заранее выбранные шрифты для областей письма и иных блоков)
• с помощью «Интервала» и «Абзаца» вы можете регулировать расстроение между строками текста внутри блоков

В разделе «Заголовки» для 1, 2 и 3 уровня вы можете установить свои уникальные:

• шрифты
• интервалы
• подчеркивания
• цвет
• отступы

В левом боковом меню перейдите в раздел «Оформление» → «Адаптивность»:

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

В левом боковом меню в разделе «Оформление» → «Полосы» выберите нужную вам область (хедер, контент, футер, инфообласть) и настройте:

• размер текста
• цвет текста
• цвет ссылок
• отступы и абзацы текста

Выделите нужный вам блок текста в контейнере, в левом боковом меню в разделе «Контент» → «Блоки», для всего блока вы можете задать:

• цвет текста
• выравнивание (отдельно для десктопной и мобильной версий)
• интервалы

Вы также можете кастомизировать часть выделенного текста с помощью быстрого меню вверху редактора:

• менять шрифт, размер, цвет, выделения
• менять выравнивание, отступы всего блока
• добавлять в текст ссылку
• добавлять динамический контент персонализации
• добавлять эмодзи
• создавать таблицы

Для того, чтобы добавить в письмо изображение:

• предварительно создайте место размещения картинки:
  • новую полосу с нужной структурой
  • новую структуру, для этого в левом боковом меню в разделе «Контент» → «Структуры» выберите нужную вам структуру, зажмите ее правой кнопкой мышки и перенесите в нужное место письма
• в левом боковом меню в разделе «Контент» → «Блоки» правой кнопкой мыши зажмите блок «Картинка» и перенесите его в нужное место в письме (например, в нужный блок «Бросьте контент сюда»).

• нажмите на контейнер с картинкой. В левом боковом меню в разделе «Контент» → «Блоки» вы можете загрузить картинку двумя способами:

1. загрузить картинку с компьютера напрямую - перенеся ее из локальной папки в блок «Бросьте картинки сюда» или по клику на этот блок и загрузку выбранных картинок из папки. В этом случае медиа (.png, .jpg, .gif, т.п.) будет сохранено в хранилище Stripo, и адрес картинки автоматически сгенерируется.

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

2. подставить ссылку на адрес, где хранится нужная картинка - в поле «Ссылка на внешний ресурс» вставьте адрес картинки и нажмите галочку

После загрузки картинки вы можете настроить все вам необходимое:

• альтернативный текст - рекомендуем заполнять его, отображается в случаях невозможности загрузки медиа
• ссылка - переход на которую производится по клику на картинку из письма
• выравнивание и размер картинки
• адаптивность - влияет на отображение картинки на мобильных устройствах
• отступы - можно настроить отдельно для десктопной версии и отдельно для мобильной

Загруженные в Stripo изображения можно редактировать: обрезать, трансформировать, добавлять рамки, простейшие фигуры.

• выделите нужный вам текст
• в верхнем меню нажмите кнопку «Сделать ссылкой»
• в левом боковом меню в разделе «Контент» → «Блоки» появятся все необходимые настройки, с помощью которых можно:
  • задать цвет ссылки
  • включить/отключить подчеркивание ссылок
  • добавить адрес ссылки

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

• почту
• телефон
• файл
• и др. из списка возможных

• если вам нужно убрать ссылку, достаточно выделить ее в тексте и в верхнем меню нажать кнопку «Сделать ссылкой»

• кликните на нужное изображение
• в левом боковом меню в разделе «Контент» → «Блоки» появятся настройки картинки. В строку «Ссылка» добавьте адрес, на который должен вести клик по изображению из письма

Чтобы корректно добавить ссылку отписки в плагине Stripo:

• сделайте текст «отписаться» ссылкой (через выделение текста или как кнопку/пункт меню)
• в левом боковом меню в разделе «Контент» найдите строку «Ссылка»
• в выпадающем списке в разделе «Специальные ссылки» выберите «Отписка»

Анкорная ссылка - это ссылка на раздел внутри самого письма.

Как создать анкорную ссылку:

• кликните на блок письма, на который вы хотите ссылаться
• в левом боковом меню в разделе «Контент» → «Блоки» доскролльте до строки «Анкорная ссылка» и кликните по переключателю
• в появившуюся строку «Название анкора» введите название:
  • без пробелов
  • допустимы только латинские буквы и цифры

Как добавить ссылку на созданный анкор:

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

• в разделе «Контент» → «Блоки» найдите блок “Кнопка” и вставьте его в нужную вам область письма

• нажмите на блок кнопки. В левом боковом меню в разделе «Контент» → «Блоки» появятся настройки кнопки
• в строку «Ссылки» вставьте URL-адрес, на который будут переходить с клика по кнопке
• введите «Текст кнопки»
• настройте стиль текста – шрифт, тип и размер
• установите цвет кнопки и текста кнопки

• если требуется - примените ховер-эффект, строки «Цвет кнопки/текста по наведению» (для появления этих строк в левом боковом меню в разделе «Оформление» → «Кнопка» должна быть включена функция «Подсвечивать по наведению»)

На этом скриншоте:

• “Цвет кнопки” - основной цвет,
• “Цвет кнопки по наведению” - тот, который увидят пользователи при наведении курсора на кнопку,
• “Цвет текста” относится к шрифту.

Если вы не хотите, чтобы в ваших письмах был эффект наведения, просто примените тот же цвет, который вы установили как основной или отключите в левом боковом меню в разделе «Оформление» → «Кнопка» функцию «Подсвечивать по наведению».

В настройках кнопки вы также можете:

• установить закругление, если вам нравятся овальные кнопки
• установить выравнивание
• установить границы кнопки

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

Чтобы добавить меню, вам нужно:

• в левом боковом меню в разделе «Контент» → «Блоки» найти блок «Меню» и перетащить его в нужное вам место в письме
• кликните по блоку с меню в редакторе письма
• в левом боковом меню в разделе «Контент» → «Блоки» появятся все необходимые вам настройки:
  • вы можете выбрать тип меню: ссылки (только кликабельный текст), иконки (только кликабельные картинки), иконки и ссылки (кликабельные картинки с подписями)
  • при включении адаптивного меню все пункты меню на мобильных устройствах будут показываться списком (друг под другом). Если не включать адаптивность, то пункты меню буду отображаться в ряд. Для проверки отображения воспользуйтесь предпросмотром на мобильных устройствах в «Мастере создания сообщения» enKod. Для простоты настройки рекомендуем использовать меню типа иконки. При этом каждое изображения для меню стоит предварительно выверить в редакторе (например, в Figma) и сделать одной высоты.
  • вы также можете задавать стиль текста, размер, выравнивание, отступы
  • добавлять ссылки и изображения для иконок

С помощью плагина Stripo в enKod вы можете добавлять в текст простейшие таблицы. Для этого:

• кликните по блоку с текстом, в который хотите добавить таблицу
• в верхнем меню нажмите на «…» и выберите «Таблица»
• укажите размеры таблицы, количество строк и столбцов, наличие заголовков, отступов и границ.

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

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

• в левом боковом меню в разделе «Контент» → «Структуры» выбрать нужную вам по количеству столбцов структуру
  • если столбцов не хватает, то вы можете добавить нужное количество самостоятельно. Для этого нажмите на структуру - в левом боковом меню в разделе «Контент» → «Структуры» появятся настройки количества стобцов, добавьте нужные и настройте ширину каждого столбца. Если вам необходимо делить размер поровну между всеми стобцами, нажмите на «=».
• в каждый блок структуры добавьте текст
• для имитации разделителей столбцов и строк, вы можете добавить обводку для каждого из контейнеров с текстом
• для добавления новой строки в таблицу достаточно будет скопировать уже существующую полосу структуры

Чтобы настроить отображение элементов письма на мобильных устройствах:

• перейдите в раздел «Оформление» → «Адаптивность»
• задайте параметры для размера заголовков, текста кнопок и контента в разных контейнерах
• рекомендуем включить функцию «Кнопки во всю ширину», чтобы клиент точно заметил ваш призыв к действию
• для медиа: в редакторе кликните на нужное изображение. В левом боковом меню в разделе «Контент» → «Блоки» появятся настройки:
  • адаптивная картинка - если активна, опция позволяет изображению подстроиться под ширину экрана мобильного устройства (работает только на тех устройствах, что поддерживают адаптивность). Будьте осторожны с адаптивностью логотипов, если включить на них эту опцию они растянутся на всю ширину мобильного экрана, что может сильно исказить изображение.
  • отступы для мобильного - в строке отступов кликните по иконке мобильного, чтобы настроить отступы контента относительно фона только для мобильных устройств.

Чтобы перенести в enKod письмо, собранное в веб-версии Stripo, и избежать артефактов или проблем с отображением контента следуйте простой инструкции:

• в веб-версии Stripo откройте панель HTML по кнопке в верхней части экрана
• на панели HTML откройте раздел CSS

• создайте в enKod письмо и выберите Stripo редактор
• в редакторе откройте панель HTML по кнопке в верхней части экрана
• на панели HTML откройте раздел CSS

• перенесите содержимое HTML (левая часть панели) из Stripo в соответствующее место в enKod
• перенесите содержимое CSS (правая часть панели) из Stripo в соответствующее место в enKod

• Модули в Stripo ищутся через поиск по названию, но только в том случае, если названия были указаны на английском языке.