Более детальную версию, о том как создавать письма в нашем редакторе, Вы можете найти в нашем блоге - https://stripo.email/ru/blog/how-to-build-an-email-with-stripo-manual-a-to-z/

Как создать письмо с помощью Stripo?

Создать первое письмо с помощью Stripo можно тремя способами:

1. Отредактировать один из более чем 650 готовых к использованию шаблонов;

2. Использовать собственный код;

3. Начать с нуля.

Чтобы использовать любую из упомянутых опций, во вкладке “Письма” нажмите кнопку “Создать новое письмо”.

И подберите способ, который Вы найдете наиболее удобным для себя:

  1. Отредактировать один из более 950 подготовленных шаблонов

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

Это лучшее решение для email-маркетологов, которым приходится создавать по несколько писем в день.

С подписками BASIC, MEDIUM, PRO and PRIME доступны к использованию Премиум шаблоны, которые были разработаны нашими дизанерами и имеют уникальный стиль.

2. Использовать собственный код

В Stripo доступен редактор открытого HTML-кода, в котором профессиональные разработчики могут создавать абсолютно уникальные письма. Эта опция также полезна, если Вам нужно импортировать в Stripo пользовательский шаблон и адаптировать его для редактора/сделать редактируемым.

Способ лучше всего подходит для опытных дизайнеров.

3. Начать с нуля/пустой шаблон

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

Ну, что же, давайте попробуем создать письмо вместе со Страйпо.

1. Общие настройки

Как установить общие настройки в Stripo:

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

  • выберите вкладку “Общие настройки”;

  • установите параметры, которые Вам нравятся или которые соответствуют вашему брендбуку.

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

2. Настройки заголовков

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

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

  • выберите вкладку “Заголовки”;

  • установите размер и цвет шрифта для всех заголовков (H1, H2, H3).

3. Создание хедера

Во-первых, нам нужно добавить новую полосу. Чтобы добавить полосы, нажмите значок «+» в нижнем левом углу полосы.

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

Элемент хедера требует два отдельных контейнера: один для логотипа, а другой для меню.

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

  • щелкните значок «Картинка» или перетащите блок «Картинка» в контейнер;

  • слева на панели настроек система предлагает загрузить изображение в формате JPG, PNG или GIF, размером не более 3 Мб и разрешением не более 4000 х 4000 пикселей. Вы также можете вставить внешнюю URL-ссылку Вашего логотипа;

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

  • добавьте Alt-текст для логотипа;

  • установите размер логотипа – ширина нашего логотипа 144 пикселя;

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

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

  • выберите блок “Меню” и перетащите его во второй контейнер;

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

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

  • если Вы выберете ссылки, как сделали мы, то Вы увидите, что цвет и шрифт Ваших ссылок, настроенные ранее в разделе общих настроек, уже применены к ссылкам меню. Мы выделили их жирным шрифтом, кликнув значок B на панели настроек;

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

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

  • установить цвет фона для каждого пункта меню, если хотите;

  • повторите для всех остальных пунктов меню;

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

  • установите разделитель между элементам и задайте его цвет, если Вам нужно;

4. Работа с текстом:

  • перетащите структуру с 1 контейнером в Ваше письмо;

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

  • напишите Ваше приветствие;

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

  • настройте заголовки, если это необходимо. В нашем примере мы выбрали для приветствия заголовок H2 – и так как мы в самом начале установили параметры для заголовков во вкладке общих настроек, Stripo автоматически использовал их (Arial, 24px) для нашего письма;введите текст в следующей строке;

  • выделите его;

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

  • добавьте ссылки, где они нужны.

Как добавить ссылки к тексту:

Если нужно добавить ссылки к тексту, а не только для кнопок CTA, то Вам следует:

  • выделить нужное слово/слова;

  • в верхней части панели настроек кликните значок “Ссылка”;

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

Подчеркивать ссылки или не подчеркивать – на Ваш вкус.

5. Персонализация текста

Как с помощью Stripo добавить теги персонализации:

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

  • на панели настроек найдите кнопку “Персонализация”;

  • в выпадающем меню выберите ESP, который Вы используете;

  • и выберите параметр, который хотите использовать.

Если все сделано правильно, то все будет выглядеть примерно так:

Ваш ESP заменит этот параметр на имя каждого получателя. Если имя (или любой другой параметр) не указано, то ESP оставит это поле пустым.

6. Добавление изображений

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

Как добавить в письмо изображение:

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

  • на панели настроек найдите базовый блок “Баннер” или “Картинка” и перетащите его в письмо;

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

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

Примечание:

Если Вам нужно создать баннер – пожалуйста, используйте блок “Баннер”. Для других целей используйте блок “Картинка”

Сделать это можно тремя способами:

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

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

2. Добавить ссылку на внешний ресурс

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

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

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

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

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

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

Изображения здесь отсортированы по датам, от самых новых до самых старых.

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

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

4. Использовать наш банк изображений

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

Во-вторых, мы предлагаем более 100 000 изображений.

Кликните по вкладке “Стоковые” и введите название или категорию изображений, которые Вы ищете.

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

Если Вам нравится то, что Вы видите, нажмите “Ок".

7. Редактирование изображений

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

Но как их редактировать с помощью Stripo?

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

О работе с изображениями для баннера мы расскажем в следующем разделе.

Как редактировать изображения с помощью Stripo:

  • после загрузки изображения нажмите кнопку “Редактировать” на панели настроек справа от фрагмента изображения;

  • Ваше изображение откроется в редакторе Pixie в новом выпадающем окне;

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

  • когда Вы завершите редактирование, нажмите “Сохранить” в редакторе Pixie – и только тогда изменения, которые Вы внесли в изображение, будут применены к нему.

8. Создание баннера

Как говорится, баннер – лицо Вашей рассылки. Следовательно, Вам следует тщательно поработать над ним.

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

Важно отметить:

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

Как создать баннер с помощью Stripo:

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

  • добавьте блок “Баннер” в этот контейнер;

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

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

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

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

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

  • примените фильтр. Я предпочитаю черно-белый;

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

  • введите Alt-текст – получатели увидят его, если изображение по какой-либо причине не отобразится;

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

  • в тот же момент Вы увидите надпись “Текст” на баннере;

  • сотрите эту надпись и введите свой текст;

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

  • включите кнопку «дополнительное изображение» на панели настроек. Это может быть что угодно: стикер, рамка, логотип, фон, чтобы сделать Ваш текст более заметным. Да, Вы можете добавить текст поверх нее :)

9. Эффект ролловера изображений

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

Но как его создать? Данный метод был разработан нашими программистами, адаптирован к нашей системе — и, что важнее всего, к основным почтовикам.

Он работает даже в Gmail.

Важно отметить:

Данная функция работает в ограниченном количестве почтовых сервисов: Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, MacOS Apple Mail.

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

Как создать эффект ролловера изображений с помощью Stripo:

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

  • на панели настроек включите контрол “Эффект ролловера”;

  • загрузите второе изображение, при необходимости отредактируйте его;

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

  • введите Alt-текст.

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

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

10. Вставка видео в письмо

Согласно многочисленным исследованиям, потенциальные клиенты на 65% чаще покупают после просмотра видео о продукте. Более того, видеоролики являются одной из самых горячих тенденций в 2019 году.

Наш редактор предоставляет возможность добавлять видео в шаблон/письмо двумя способами.

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

  2. Встроить HTML5 видео непосредственно в письмо.

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

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

И так, как же вставить URL ссылку на Ваше видео:

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

  • затем перетащите базовый блок «Видео»;

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

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

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

  • выберите цвет «кнопки Play» - она может быть белым, традиционным красным или черным.

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

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

  • переключите контрол «Собственное изображение» на панели настроек;

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

  • отредактируйте его, если необходимо.

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

Важно отметить:

Кнопка воспроизведения также будет отображаться поверх пользовательского изображения.

Таким образом, необходимо будет выбрать вариант «нет», если ваше GIF изображение уже содержит изображение кнопки.

Также, при использовании контрола «Собственное изображение» Вы можете добавлять ссылку на видео, не относящуюся к YouTube или Vimeo. При этом, ссылка должна содержать прямой путь к видео (без относительных путей) и быть доступной для просмотра всем пользователям.

Способ 2. Встраивание HTML5 видео

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

И да, оно не может быть воспроизведено во всех почтовых клиентах. Фактически, только следующие почтовые клиенты поддерживают HTML5: Outlook 2011 и 2013 для Mac OS и Apple Mail (при просмотре на MacBook и iPhone 7, 8, X. Предыдущие версии не поддерживают HTML5).

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

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

  1. Вставить этот код в свое письмо.

  2. Настроить данный код, вставив свои ссылки URL.

И так, как же вставить этот код в письмо с помощью Stripo:

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

  • перетащите блок 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">
<!-- fallback -->
<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» , предназначена для тех получателей, чьи устройства и почтовые клиенты поддерживают этот вид интерактивности.

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

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

Настройка кода для встраивания:

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

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

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

  • загрузите второе изображение, которое Вы собираетесь использовать в качестве эскиза. Добавьте на изображение кнопку «play». На самом деле это может быть скриншот вашего видео на Youtube - он будет отображаться во всех почтовых клиентах, которые еще не поддерживают интерактивность в электронных письмах;

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

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

Дополнительную информацию о том, как работать с видео, можно найти в нашем блоге «Как добавить видео в электронную почту с помощью Stripo».

11. Добавление кнопок в письмо

Как создать кнопку CTA с помощью Stripo.email:

  • перетащите базовый блок “Кнопка” в письмо рядом с товаром, с которым она связана;

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

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

  • введите текст для кнопки;

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

  • установите цвет кнопки и шрифта;

  • примените опцию "Подсвечивание по наведению" на кнопку, если хотите;

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

Если Вы не хотите, чтобы в Ваших письмах был эффект подсвечивания по наведению, просто отключите данный контол в разделе Оформление/Кнопка.

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

  • задайте выравнивание;

  • установите границу кнопки, если хотите;

  • добавьте иконку внутри кнопки;

Важно отметить: данная функция не поддерживается в Windows Outlook 2002, 2007, 2010, 2013, 2016, 2019.

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

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

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

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

12. Создание модулей контента товаров

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

  • перетащите структуру с 2 колонками в письмо;

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

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

  • перетащите текстовый блок во второй контейнер;

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

  • перетащите блок “Кнопка” и поместите его под текстом;

  • настройте стиль для этой кнопки. Пожалуйста, ознакомьтесь с руководством в разделе “Добавление кнопок в письмо”.

Если Вы хотите создать один или два дополнительных модуля, аналогичных этому, то Вам нужно:

  • скопировать модуль, который мы только что создали;

  • и просто перетащить его в нужное место;

  • отредактируйте информацию в нем;

  • добавьте новые изображения;

  • готово.

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

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

Для этого выберите соответствующий элемент, который хотите сохранить и нажмите на иконку сохранить.

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

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

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

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

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

Синхронизированные модули

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

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

Для создания синхронизированного модуля Вам необходимо:

  • выбрать нужный элемент (контейнер, структуру, полосу) и нажать кнопку «Сохранить»;

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

  • переключить контрол кнопки «Сквозной»;

  • нажать кнопку Сохранить;

Более подробную информацию о синхронизированных модулях Вы можете найти в нашем посте.

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

13. Создание таймера обратного отсчета

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

Таймеры обратного отсчета увеличивают прибыли на 9%.

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

Как создать и добавить таймер обратного отсчета с помощью Stripo:

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

  • добавьте в него базовый блок “Таймер”;

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

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

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

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

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

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

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

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

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

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

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

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

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

  • также Вы можете применить "Продвинутые настройки";

  • примените поддержку Retina Display;

  • установите регистр подписей, цвет цифр для дней, часов, минут и секунд;

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

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

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

14. Как добавить разделитель

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

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

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

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

  • настройте цвет разделителя и его толщину;

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

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

  • установите выравнивание разделителя. По умолчанию установлено выравнивание по центру;

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

  • если Вам нужно применить вертикальное выравнивание, то в этом случае подключите контрол «динамического разделителя», а затем просто протяните разделитель до нужной длины;

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

15. Добавление иконок соцсетей

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

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

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

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

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

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

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

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

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

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

16. AMP-элементы

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

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

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

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

  • добавьте столько секций, сколько вам нужно;

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

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

  • отредактируйте контент так, как вы обычно это делаете при создании писем в Stripo.

Важно отметить:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Важно отметить:

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

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

Как добавить AMP-форму в письмо.

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

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

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

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

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

  • вы можете выбрать поле ввода для Tекста, Email, Пароля, Телефона, и Числа.

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

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

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

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

Важно отметить:

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

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

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

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

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

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

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

Дизайн формы

Работаем над дизайном формы:

а) непосредственно форма

  • создать форму как таковую, кликнуть на иконку «AMP HTML» в своем шаблоне;

  • в панели настроек выбрать цвет фона и обводки.

б) кнопка

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

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

в) раздел уведомлений

  • кликните на «Уведомление об успехе/ошибке» в своем шаблоне;

  • отредактируйте текст прямо здесь;

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

Также, вы можете просмотреть наше видео, где показан процесс добавления блока-формы в письмо

Создание нового Сервиса Данных для хранения отзывов и ответов ваших пользователей.

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

Более подробно с процессом создания Сервиса Данных, Вы можете перейдя по ссылке - https://stripo.email/ru/blog/stripo-data-service/

Чтобы связать его со своими письмами, вам необходимо:

  • перейти в Данные;

  • зайти на вкладку «Сервис»;

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

  • затем выбрать Хранилище Данных — Stripo.

Важно отметить:

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

Также, в своих статьях мы показывали как связать Сервис Данных с Google Sheets через Zapier. Это значит, что отзывы пользователей будут доставлены и сохранены либо в Zapier, либо в Google Sheets, или же в любом другом хранилище данных, связанных с письмами через Zapier.

Для тестирования полученной формы необходимо:

  • отправить тестовое письмо на один либо несколько адресов, нажать кнопку «Тестировать» над шаблоном;

  • ввести свои адреса (если их больше одного, нужно разделить запятыми);

  • непосредственно во входящем письме оставить комментарий, или даже несколько;

  • затем перейти к «Сервису Данных» в своем аккаунте Stripo;

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

  • загрузить файл данных в формате CSV;

Важно отметить:

Для отправки тестового AMP-письма необходимо добавить Stripo в качестве доверенного отправителя в своем аккаунте Gmail.

17. Создание футера письма

Как создать футер с помощью Stripo:

Это составной элемент. Чтобы построить его, Вам нужно:

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

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

  • добавьте и отредактируйте текст;

  • вставить соответствующую ссылку в опцию отписки;

  • добавить иконки соцсетей.

Вдохновение и идеи для эффективной рассылки вы найдете в этой статье.

18. Фоновый цвет и изображение

Как настроить фоновый цвет для структуры:

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

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

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

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

  • при необходимости, в поле “Картинка в фоне” загрузите нужное изображение.

Важно отметить: таким же способом можно задать цвет фона для всего письма.

Как добавить фоновое изображение для всего письма:

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

  • во вкладке “Общие настройки” включите кнопку “Картинка в фоне”;

  • добавьте изображение – в разделе о добавлении изображений мы говорили, как вставлять/добавлять/загружать изображения в письма с помощью Stripo;

  • настройте положение картинки;

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

Важно отметить:

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

19. Написание темы письма

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

Вы можете добавить заголовок в своем ESP или сделать это с помощью Stripo.

Как написать тему письма с помощью Stripo:

  • на верхней панеле нажмите значок “Настройки”;

  • в выпадающем меню введите тему письма и текст скрытого предзаголовка;

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

Как настроить отображения письма на мобильном:

  • на панели настроек перейдите во вкладку “Оформление”;

  • кликните вкладку “Адаптивность”;

  • задайте параметры размера текста для полос хедера, контента, информационной области, футера, размера текста для блока меню и заголовков H1, H2, H3;

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

Также Вы можете отрегулировать отступы необходимым блокам/контейнерам/структурам для мобильного отображения.

21. Дополнительные элементы письма

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

Интерактивные элементы

Интерактивные элементы — тренд 2019 года. Они удваивают конверсию, так как теперь предназначены не только для развлечения — они стали информативными и функциональными.

В нашей публикации “6 примеров интерактивного контента в письмах” мы подробно рассказали, как с помощью Stripo создать и добавить интерактивные элементы в Ваши рассылки.

Благодаря нашим продвинутым технологиям вы можете создать:

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

Важно отметить:

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

Конструктор промо-аннотаций Gmail

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

Вы можете легко создать код аннотации с помощью нашего конструктора промо-аннотаций.

22. Предварительный просмотр и тестирование Ваших писем

Всегда просматривайте и тестируйте письма перед отправкой.

Предварительный просмотр писем с помощью Stripo:

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

Как отправить тестовое письмо с помощью Stripo:

  • нажмите кнопку “Тест”;

  • в выпадающем окне введите свой email-адрес и адреса ваших коллег – разделяйте их запятыми, если намерены отправить на несколько адресов сразу;

  • нажмите “Отправить”.

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

Также, Вы можете протестировать Ваше письмо при помощи опции "Предварительный просмотр письма на различных устройствах"

  • Вам нужно нажать кнопку “Начать тест”:

  • Сразу после нажатия, тестирование начнется;

  • В новом окне вы увидите скриншоты отображения вашего письма во многочисленных почтовых сервисах и девайсах:

Для вашего удобства скриншоты разделены на три группы:

  • а) Мобильные;

  • б) Приложения;

  • в) Веб

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

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

если вы перейдете по этой ссылке, то вы будете перенаправлены на следующие отдельные вкладки:

  • веб-версия письма (где будут отображаться версии для ПК и мобильных устройств)

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

Плюс вы можете выгрузить картинки текущего теста в архив.

Также вы можете просмотреть результаты предыдущих тестов. Просто нажмите на стрелку справа от кнопки “Начать тест”.

23. Экспорт письма в ваш ESP

После того как Ваше письмо будет полностью готово и Вы протестируете и отшлифуете его, Вы можете легко отправить его в свой ESP одним кликом.

Stripo интегрирован с более чем 65 ESP, а также почтовыми клиентами Gmail и Outlook.

Для большего удобства экспорты распределены на 3 группы:

1) недавно использованные;

2) экспорт в файл или приложение;

3) экспорт в ESP доступен для подписок BASIC, MEDIUM, PRO and PRIME.

Если этих опций недостаточно, скачайте своё письмо в виде HTML-файла и импортируйте в ESP, который используете.

Важно: Stripo также позволяет скачать письмо как PDF-файл.

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

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

  • в выпадающем меню выберите подходящую опцию;

  • готово.

Несколько подсказок, которые значительно сэкономить время на создание письма в Stripo

Их много, поэтому упомянем только некоторые:

Кнопка отмены действия

Эта простая кнопка поможет Вам отменить предыдущее действие или несколько действий.

С ее помощью нам не придется много раз создавать элементы письма с нуля.

История изменений

Она позволяет видеть, кто и когда вносил изменения в наши письма. И, что более важно — восстановить любую версию.

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

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

Копирование и перемещение элементов

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

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

И затем переместите скопированный элемент. Вот так.

Хранение и повторное использование существующих писем

Это, наверное, моя самая любимая опция. Если Вам нужно отправлять похожие письма ежедневно и Вы просто обновляете какую-то информацию в них (например, текст или баннер) – просто скопируйте предыдущее письмо нажав на троеточие. И отредактируйте нужные элементы. Вуаля!

Надеемся, это руководство будет полезным для Вас.

Искренне желаем Вам всего наилучшего.

Если у вас возникли вопросы, пожалуйста, напишите нам support@stripo.email

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