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

Блоки находятся в самом низу иерархии элементов письма.

В режиме редактирования все базовые блоки доступны во вкладке меню Контент/Блоки.

В редакторе есть следующие блоки для создание элементов письма: картинка, текст, кнопка, разделитель, видео, блок социальных сетей, баннер, таймер, меню, свой HTML элемент и AMP элементы.

Чтобы использовать эти блоки Вам нужно перетащить один из них в Ваш шаблон и начать редактировать.

Давайте рассмотрим блоки поближе:

Картинка

Блок картинка позволяет добавлять изображения в PNG, JPG или GIF форматах.

Можно загрузить изображения размером не более 3 Мб и разрешением не более 4000 х 4000 пикселей.

Есть три способа сделать это:

  1. Перетащить/загрузить изображение

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

2. Вставить внешнюю ссылку URL

Если у Вас нет изображения, сохраненного на вашем компьютере, Вы можете вставить ссылку на картинку, которая хранится в сети.

В поле “Ссылка на внешний ресурс” вставьте ссылку на Ваше изображение.

Если Вы собираетесь использовать это изображение всего лишь один раз, выберете опцию “Оставить как внешнюю ссылку” в выпадающем меню и нажмите галочку.

Если Вы собираетесь использовать это изображение для других рассылок, выберите вкладку “Проект”, затем вставьте ссылку и выберите опцию “Загрузить в галерею” и нажмите галочку.

3. Использование изображений из личной галереи

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

Картинки отсортированы по дате от самых недавних до самых старых.

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

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

Текст

Как добавить текст в Ваши письма в Stripo:

  • перетяните структуру с одним контейнером в Ваш шаблон;

  • перетяните блок “Текст” или нажмите кнопку “Текст” прямо в этой структуре

  • введите приветствие;

  • кликните два раза по всему тексту;

  • установите заголовки где это необходимо. В нашем примере, для приветствия, я выбрала заголовок 2 - и, как только я установила параметры для Заголовков во вкладке “Общие настройки” , Stripo автоматически использовал их (Gergia, 57px) для нашего емейла;

  • введите свой текст в следующую строку;

  • Выделите ее;

  • Установите выравнивание;

Кнопка

Как создать CTA кнопку в Stripo:

  • перетащите блок Кнопка в ваш шаблон и поместите его рядом с продуктом, к которому он относится;

  • нажмите на блок кнопки в Вашем шаблоне, чтобы активировать панель настроек;

  • вставьте необходимую URL ссылку;

  • Введите название, которое будет отображаться на кнопке;

  • задайте стиль текста, например шрифт, размер шрифта;

  • задайте цвет кнопки, цвет шрифта;

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

  • установите выравнивание;

  • по желанию, Вы можете установить границу кнопки;

  • также, вы можете установить иконку в кнопку. Для этого вам нужно добавить изображение, загрузив с компьютера или скопировать ссылку с внешнего ресурса;

Пожалуйста, обратите внимание, что эта функция не поддерживается в некоторых версиях Outlook.

  • установите внутренние отступы. Они отвечают за пробелы внутри Вашей кнопки. Благодаря методу верстки Stripo, не имеет значения на какое конкретное место кликают Ваши клиенты. Пробелы также кликабельны, что делает кнопки более заметными и понятными.

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

Разделитель

Как установить разделитель в письмах Stripo:

  • перетащите структуру с одним контейнером в Ваш шаблон;

  • перетащите блок “Разделитель”;

  • кликните два раза чтобы активировать панель настроек;

  • установите цвет;

  • чтобы установить “толщину” разделителя - Вам нужно установить “число” в разделе “Линия” - увеличить уменьшить числа;

Вам также нужно выбрать стиль Вашей линии. Она может быть сплошная, пунктирная;

  • установите ширину - ширина здесь измеряется в %, а не в пикселях!

  • установите выравнивание разделителя. По умолчанию оно расположено по центру. Вы можете изменить его в пункте “выравнивание”;

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

  • Если необходимо, установите отступы;

Видео

Добавить видео в Stripo можно двумя способами

  1. Вставить URL ссылку на Ваше видео;

  2. Встроить видео.

Способ 1. Вставить URL ссылку на Ваше видео

Это абсолютно безопасный способ доставки видео, потому что он отлично работает во всех почтовых клиентах на всех устройствах.

Как вставить URL ссылку в Ваше видео:

  • перетащите структуру с одним контейнером;

  • перетащите блок “Видео”;

  • кликните левой кнопкой мыши по контейнеру;

  • в панели настроек Вам нужно будет только добавить ссылку на Ваше видео на Youtube или Vimeo;

  • наша система автоматически заполнит поле “Альтернативный текст”;

  • выберите цвет кнопки проигрывания - она может быть белой, привычной красной или черной.

Stripo автоматически генерирует иконку предварительного просмотра для Ваших видео. Но Вы также можете установить собственное изображение.

Как установить свою иконку к видео в письме:

  • нажмите кнопку “собственное изображение” на панели настроек;

  • загрузить изображение;

  • редактировать если необходимо.

Вы также можете вставить анимированую GIF картинку как свою иконку к видео. Это определенно привлечет больше внимания.

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

Способ 2. Встроить видео

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

Да, не каждый почтовый клиент поддерживает воспроизведение видео в письме. На самом деле, только Apple Mail, встроенное iOS приложение для почты, Thunderbird и Outlook для Mac поддерживают этот вид контента.

Stripo предоставляет своим пользователям универсальный код - используя его, Вы сможете отослать пользователям видео, которым Вы хотите с ними поделиться.

Мы рекомендуем придерживаться следующего порядка:

  1. Встроить этот код в шаблон письма;

  2. Заменить в письме URL ссылки на видео на Ваши собственные.

Как вставить этот код в письма Stripo:

  • перетащите структуру с одним контейнером в ваш HTML шаблон;

  • Перетащите HTML блок;

  • в шаблоне письма нажмите левую клавишу мыши и кликните “Добавить свой HTML в реактор кода” чтобы открыть редактор кода;

  • В этом редакторе вместо “Вставьте свой HTML в редактор кода” вставьте код для встраивания видео;

  • настройте код встраивания.

Весь код для встраивания:

<video class="adapt-img" controls="controls" poster="https://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/92621531318217276.jpg" width="100%" height="313">

<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

<source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm">

<a href="https://www.youtube.com/watch?v=ryqOEPk51Lg/" class="esd-frame-element esd-hover-element esdev-disable-select"><img class="adapt-img" src="https://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/48461531318273724.jpg" alt="" width="100%" height="313"></a>

</video>

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

Используя этот код, Вы можете быть уверены, что все Ваши получатели увидят видео, которым Вы хотите поделиться.

Настройка собственного кода:

  • загрузите изображение, которое Вы будете использовать как иконку для Вашего видео на любой сайт (я использую Pinterest для этих целей) — оно послужит как изображение для предпросмотра для клиентов, которые используют устройства Apple. Конечно, MP4 видео сгенерирует собственное изображение предпросмотра, но это изображение не будет подгружаться на iPhone X и устройствах с высоким разрешением экрана. Кнопка проигрывания автоматически появится на картинке. Вставьте эту ссылку после Poster attribute;

  • преобразуйте Ваше видео в формат MP4 используя сайт видеохостинга ( я использую Streamable. Он бесплатный). В коде, замените ссылку, которая расположена после атрибута "source src" своим URL;

  • преобразуйте свое MP4 видео в формат WebM — и вставьте ссылку в соответствующую строку в коде. Это видео будет проигрываться на устройствах, которые поддерживают этот формат; и

  • загрузите второе изображение, которое Вы собираетесь использовать как изображение видео. Установите кнопку “воспроизведение” на него. Это может быть скриншот Вашего видео на Youtube — он будет отображаться в почтовых клиентах, которые еще не поддерживают интерактивность в письмах; затем

  • загрузите Ваше видео на Youtube (Vimeo, Ваш вебсайт, и т.д.) — вставьте этот URL в атрибут "href" после кавычек вместо существующей ссылки. Как только клиент нажмет на кнопку “воспроизведение”, он будет перенаправлен на соответствующий веб сайт.

Социальные сети

Как добавить иконки социальных сетей в Stripo:

  • перетащите блок “Социальные сети” в свой шаблон;

  • кликните по блоку, чтобы открыть панель настроек;

  • По умолчанию, Вы увидите 4 иконки. Если этого недостаточно, нажмите на кнопку “плюс”, чтобы добавить дополнительные иконки в Ваше письмо;

  • на панели настроек, рядом с иконкой социальных сетей, нажмите кнопку “ещё”, чтобы начать работать с этой социальной сетью;

  • установите соответствующие URL ссылки;

  • Установите заголовок и альтернативный текст;

  • установите стили для этих иконок;

  • установите их размер;

  • и установите внешние и внутренние отступы между иконками;

Баннер

Как создать баннер со Stripo:

  • перетащите структуру с одним контейнером в Ваш шаблон;

  • Перетащите блок “Баннер”в структуру;

  • кликните по блоку в шаблоне, чтобы активировать панель настроек;

  • загрузите изображение, которое Вы хотите использовать;

  • на панели настроек система предложит Вам при желании обрезать изображение;

  • установите ориентацию изображения. Изображение может быть вертикальным, горизонтальным, квадратным. Горизонтальное расположение самое популярное;

  • добавлен новый контрол «Размер» в базовом блоке «Баннер», который позволяет задавать собственную высоту области кадрирования баннера;

  • примените фильтры;

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

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

  • если Вам нужно поместить текст на баннер, Вам нужно нажать на кнопку “Т” на панели настроек вверху. Как только она будет выделена, нажмите левой кнопкой на это изображение снова;

  • в этот момент Вы увидете окно, куда можно будет ввести ваш текст;

  • введите текст;

  • установите размер шрифта, цвет шрифта и стиль шрифта;

  • Среди шрифтов баннера выберите тот, который подходит Вам больше всего;

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

Пожалуйста, обратите внимание:

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

Чтобы построить баннер как на примере Вам нужно:

  • загрузить изображение;

  • установить ориентацию изображения;

  • установить дополнительное изображение поверх баннера;

  • Поместить копию на оба изображения.

Таймер

Как создать и добавить блок отсчета в письма Stripo:

  • перетащите структуру с одним контейнером в Ваш шаблон;

  • перетащите блок Таймер;

  • Кликните левой кнопкой мышки по контейнеру чтобы активировать панель настроек таймера;

  • установите дату окончания и точное время;

установите часовой пояс;

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

  • если это необходимо, настройте размер чисел и их цвет. Изначально, Stripo применяет параметры, которые Вы указали в общих настройках;

  • Перетащите кнопку “Отображать дни”, если Вы хотите, чтобы получатели видели сколько дней осталось. В обратном случае. Они увидят только часы и минуты. “5 дней 20 часов” легче воспринимать, чем “140” часов;

Если нужно, Вы можете поменять стиль даты. По умолчанию используется “:” (двоеточие) для разделения дней и часов, минут, секунд. Вы также можете установить “-” и “/”;

  • включите кнопку “подписи цифр таймера” чтобы отображались “дни”, “часы”, “минуты” и “секунды”под соответствующими цифрами;

  • установите цвет, тип шрифта, размер подписей;

  • включите кнопку “ Картинка по окончанию таймера”;

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

  • вставьте URL ссылку, которая перенаправит получателей либо на Ваш сайт либо на конкретную страницу на Вашем сайте где подробно описано Ваше предложение. Эта ссылка также применится к “ Картинке по окончанию таймера”;

  • Установите альтернативный текст для удобства.

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

Меню

Как добавить меню в Ваши письма Stripo:

  • нажмите вкладку “Контент” на панели настроек;

  • перетащите структуру с одним контейнером и поместите ее под лого;

  • откройте вкладку “Блоки”;

  • перетащите блок меню в Ваш шаблон;

  • Добавьте дополнительные пункты меню, если нужно. По умолчанию Stripo предлагает три пункта;

  • теперь в панели настроек Вам нужно выбрать использовать ли иконки, ссылки или и то и другое. “Иконки” означает изображения в меню; в то время как “ссылки” означают названия вкладок меню;

  • как только Вы выберите тип ссылок, Вы увидите цвет и шрифт Ваших ссылок, который Вы предварительно установили в разделе “Общие настройки” уже применился к ссылкам меню. Я сделала их жирным шрифтом, кликнув “В” символ на панели настроек;

  • теперь нужно задать название каждому пункту меню;

  • вставьте необходимые URL ссылки;

  • Сделайте тоже самое для всех пунктов меню;

  • если Вы хотите спрятать некоторые элементы на мобильном, просто нажмите иконку “Спрятать на мобильном”;

  • Закончили с названиями пунктов меню? Затем посмотрите на полученный результат. Я посчитала, что меню выглядело маленьким, поэтому я решила установить больший шрифт для него - я установила “18”.

HTML

Как встроить собственный HTML код в письмах Stripo:

  • перетащите структуру с одним контейнером в Ваш HTML шаблон;

  • перетащите блок HTML;

  • в шаблоне письма нажмите левой кнопкой “Вставить свой HTML в редактор кода” чтобы открыть редактор кода;

  • в редакторе, вместо “Вставить свой HTML в редактор кода” вставьте свой встраиваемый код;

  • Отредактируйте встраиваемый код.

AMP-Карусель

Подробнее о том, как создать AMP-карусель для Ваших писем со Stripo без каких-либо навыков кодирования, Вы можете прочитать в нашем посте.

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

  • перетащите блок AMP-карусель в Ваш шаблон;

  • теперь на панели настроек переключили контрол «Показывать превью», если вы хотите показывать небольшие изображения предварительного просмотра;

  • настройте ширину предпросмотра (опционально) и задайте показ превью сверху или снизу;

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

Тип "картинка превью":

Это означает, что в превью будет отображаться загруженное вами изображение

Тип "цвет превью":

Это означает, что у вас есть возможность выбрать цвет, который будет отображаться в превью.

В итоге мы получаем такой результат превью:

  • добавьте нужное количество слайдов, нажав на кнопку "Добавить слайд", чтобы добавить новое изображение;

  • введите ALT текст и вставьте ссылку на соответствующую страницу, если она вам необходима;

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

  • проверьте, совпадают ли размеры всех изображений. Если нет, обрежьте их с помощью нашего встроенного фоторедактора;

  • подключите опцию «Автоперелистование» и при необходимости установите время задержки. В нашем случае, слайды будут автоматически меняться каждые 2 секунды;

  • или подключите контрол "Цикличное перелистование";

  • подключите "Обводку активного превью" и "Обводку неактивного превью";

  • настройте выравнивание превью и его закругление.

Ваша AMP карусель готова.

AMP-Аккордеон

Как добавить AMP аккордеон в Ваши письма в Stripo:

  • перетащите блок AMP аккордеон в Ваш шаблон;

  • установите параметры для для фоновых разделов, границы, шрифты

  • добавьте необходимое количество секций;

  • добавьте к каждому разделу выбранный блок и контент

  • Ваш AMP аккордеон готов.

AMP-Форма

Чтобы добавить AMP-форму в письма с помощью Stripo, вам нужно:

  • перетащить AMP-блок в свое HTML-письмо;

  • кликнуть на иконку «AMP HTML» в текущем шаблоне, чтобы открыть ее настройки;

  • в панели настроек выберите свое хранилище данных. Вы можете прочитать о том как создать свое хранилище данных здесь. Мое для текущей кампании называется «Формы в рассылках;

  • in the settings panel, select your data service. You can read how to create your data service here. Mine for this campaign is “Forms in Emails”;

  • теперь нажмите «Добавить элемент формы» и выберите «Поле ввода»;

  • кликните на «Label name» в форме, чтобы начать ее редактирование;

  • в панели настроек в поле «Отображать метку поля» введите ваш текст CTA, с которого начинается форма;

  • введите текст в «Подсказку поля»;

  • и введите имя своей Переменной — это просто поможет быстрее находить отзывы ваших пользователей в отчете. Переменная может быть прописана только латиницей;

Теперь, если вы хотите знать, кто из ваших пользователей оставил комментарий. Следует:

  • кликнуть на иконку «AMP HTML» в своем шаблоне;

  • потом добавить элемент формы;

  • и выбрать «Скрытое поле;

  • нажать на «input_hidden» в своей форме;

  • затем в панели настроек ввести Значение по умолчанию и переменную, где «Значение по умолчанию» — это merge-тег, который извлекает email-адрес респондента. Чтобы получить его, свяжитесь со своим ESP или найдите его в Stripo.

Это поле будет скрыто в письмах пользователей.

Более детально вы можете ознакомится с тем как создавать AMP-Форму в нашем блоге.

Вы нашли ответ?