Как создать письмо в Stripo. Мануал от А до Я

Когда вы впервые открываете Stripo, то можете почувствовать себя немного растерянным и не знать, с чего начать. А ведь это важное письмо нужно подготовить и отправить в ближайшее время, ведь дедлайн быстро приближается. Пришло время вместе с нами ознакомиться с основными функциями Stripo, где мы расскажем, как создать собственное письмо от А до Я.

Как приступить к созданию письма

Существует три способа создания собственного шаблона письма в Stripo:

1. Выберите пустой шаблон для полной свободы при создании собственной структуры письма на основе базовых блоков и модулей (подробнее о блоках и модулях — далее).
2. Выберите базовые шаблоны, чтобы заложить фундамент и получить общее представление о том, как может выглядеть будущий шаблон письма.
3. Ознакомьтесь с нашими 1650 подготовленными шаблонами писем, выберите понравившийся и отредактируйте его.

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

Выбор опции «Empty Template»

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

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

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

Выбор опции «Basic Templates»

При клике на эту опцию вы перейдете на данный экран, где сможете выбрать один из базовых вариантов шаблонов, таких как «Empty Template» и «Master Template», а также различные компоновки шаблонов из категорий, широко используемых в email-маркетинге («Promo», «Trigger», «Info» и т. д.). При клике на любой шаблон откроется редактор, где можно приступить к работе над выбранным шаблоном.

Опция HTML-шаблона

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

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

Выбор из 1650+ готовых шаблонов

Если письмо нужно подготовить «на вчера», а на разработку концепции времени нет, всегда можно воспользоваться нашей огромной библиотекой готовых шаблонов, созданных штатной командой дизайнеров. Здесь представлены шаблоны для любого повода, индустрии или с любым функционалом, требующимся для достижения поставленной цели в рамках email-маркетинга. В вашем распоряжении как бесплатные, так и премиум-шаблоны: достаточно кликнуть на один из них, чтобы перейти в редактор и внести необходимые изменения.

1. Общие стили

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

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

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

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

• Глобальные стили и найстройки

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

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

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

И не забудьте про общие внешние и внутренние отступы, которые также нужно настроить. Важным моментом являются «Стили по умолчанию», которые определяют, нужны ли вам наши CSS-стили по умолчанию или лучше использовать собственные CSS-стили, чтобы иметь полную свободу в оформлении.

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

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

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

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

• Настройка стилей для полос

Кликните на «Стили полос», чтобы открыть специальное подменю для редактирования общих стилей полос.

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

• Настройка заголовков

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

• Настройка кнопок

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

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

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

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

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

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

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

После клика откроется меню «Галерея изображений», где нужно добавить собственное изображение или выбрать одно из стоковых / готовых изображений, созданных нашими дизайнерами, из различных категорий («Сезонные», «Декоративные», «Фотосток» и др.).

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

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

Зачем добавлять ссылки на логотип? Довольно часто получатели кликают на него, чтобы быстрее перейти на сайт.

Зачем добавлять alt-текст к логотипу? Во-первых, чтобы обойти антиспам-фильтры; во-вторых, чтобы предоставить получателям информацию о том, что изображено на картинке, на случай, если они не видят изображения в письмах; в-третьих, чтобы соблюдать рекомендации по доступности писем.

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

Для добавления меню в хедер просто перетащите блок «Меню» в контейнер, расположенный прямо рядом с логотипом.

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

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

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

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

3. Работа с текстом

Следующий пункт в нашем списке — текст. Добавлять текст в письма в Stripo очень просто.

• Как добавить текст в письмо в Stripo

Если у вас есть какая-либо структура с контейнерами, можно легко добавить текст, просто наведя курсор на них и кликнув на кнопку «Text» или добавив внутрь блок «Текст».

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

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

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

• Как добавлять ссылки в текст в Stripo

Для добавления ссылок в текст выделите нужные слова (или весь текст), кликните на кнопку «Ссылка» и вставьте ссылку в соответствующее поле.

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

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

• Добавление другого контента в текстовый блок

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

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

• Направление текста справа налево

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

После этого весь текст будет адаптирован в соответствии с правилами RTL.

Подробнее об этой функции читайте в нашей специальной статье.

• Переводы

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

Кликните на эту кнопку, чтобы открыть меню перевода.

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

После этого кликните на кнопку «Перевести».

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

4. Персонализация контента письма

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

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

Конструктор шаблонов писем Stripo позволяет добавлять merge-теги в любой текст шаблона письма.

• Как добавить merge-теги в письмо в Stripo

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

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

После выбора merge-тега (в нашем примере это тег «First Name») он появится в текстовом блоке, где можно добавить дополнительный текст, чтобы дополнить тег соответствующим персонализированным сообщением.

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

Узнайте больше о merge-тегах в статье нашего Help center.

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

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

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

Сначала подготовьте в своем шаблоне HTML-письма новую структуру с необходимым количеством колонок. Затем перетащите блок «Изображение» в нужный контейнер или кликните по опции «Image», наведя курсор на контейнер.

После этого у вас есть несколько способов добавить изображения в свой шаблон.

1. Перетаскивание или загрузка изображения

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

2. Вставка внешнего URL-адреса

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

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

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

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

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

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

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

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

5. Создание изображений с помощью GenAI

Также можно сгенерировать уникальное изображение для баннера, кликнув на опцию «AI-изображение». Откроется специальное меню, в котором можно ввести запрос, чтобы направить креативность GenAI в правильное русло, настроить различные параметры вроде модели AI, стиля и размеров, а затем сгенерировать нужное изображение.

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

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

Но как их отредактировать в Stripo?

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

• Как редактировать изображения в Stripo

После загрузки изображения кликните по нему, а затем в настройках блока «Изображение» — по кнопке «Редактировать».

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

• добавить фильтры и настроить цвета;
• обрезать, изменить размер и форму;
• рисовать на изображениях, добавлять фигуры, текст, стикеры и обрамления;
• создавать закругленные углы, добавлять фон и объединять изображения.

7. Создание баннеров

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

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

• Как создать баннер для письма в Stripo

Для начала подготовьте структуру из одной колонки для будущего баннера в письме. Затем перетащите наш блок «Баннер» в эту структуру.

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

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

И не забудьте про опцию «Стили», где можно настроить ротацию баннера, цвет фона или применить фильтр.

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

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

При клике на кнопку «Изображение» откроется то же меню для добавления картинок.

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

8. Rollover-эффект изображения

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

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

• Как создать rollover-эффект изображения в Stripo

Создать rollover-изображений просто. Для начала добавьте изображение в нужную часть письма и кликните по нему, чтобы открыть настройки. Там будет пункт «Эффект Rollover».

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

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

Важное примечание: эта функция поддерживается только в Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, Outlook для Mac и Apple Mail в macOS (только в десктопной версии). Кроме того, изображения должны иметь одинаковый размер с точностью до пикселя.

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

В Stripo есть два способа добавления видео в шаблон письма:

1. Добавление видео с помощью нашего специального блока «Видео».
2. Вставка видео с помощью кода.

(Источник: письмо от Charity: Water)

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

• Способ 1. Добавление видео с помощью блока «Видео»

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

Сначала перетащите наш блок «Видео» в любую структуру и кликните по нему.

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

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

Миниатюру всегда можно изменить с помощью нашего контрола «Собственное изображение», который открывает привычный интерфейс для добавления изображений. Кроме того, с помощью контрола «Кнопка Play» можно настроить стиль кнопки воспроизведения или вообще скрыть ее. Не забудьте также настроить размер блока и выбрать, будет ли его миниатюра адаптивной (адаптивное изображение автоматически подстраивает свой размер в зависимости от размера экрана, на котором оно отображается).

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

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

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

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

1. Вставьте этот код в шаблон письма.
2. Измените код, вставив свои URL-ссылки.

Как встроить видео в Stripo

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

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

Теперь скопируйте этот код для встраивания видео:

<video class="adapt-img" controls="controls" poster="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" 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://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" alt="" width="100%" height="313"></a>

</video>

Вставьте его сюда (то есть замените этот текст плейсхолдера) и кликните «Применить код»:

После применения отобразится базовая разметка встроенного видеоплеера с прикрепленным примером видео.

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

1. Первая ссылка представляет собой миниатюру изображения. Конечно, некоторые устройства могут создавать миниатюру на основе видео в формате MP4, но эта миниатюра не будет отображаться на iPhone X и устройствах с дисплеями Retina. Вставьте эту ссылку после атрибута "Poster".
2. Следующие две ссылки ведут на наши видеофайлы в форматах .MP4 и .WebM. Ссылки на YouTube или Vimeo здесь не будут работать. Замените ссылки, расположенные после атрибута "source src", на собственные.
3. Две остальные ссылки, расположенные после «fallback» — это ссылки на видео на YouTube и на его миниатюру. Это наш запасной вариант для тех почтовиков, которые не поддерживают встроенные видео. Загрузите видео на YouTube или Vimeo и добавьте второе изображение, которое будет использоваться в качестве миниатюры. Замените ссылки, указанные в атрибутах "href" и “src”, на свои.

​10. Добавление кнопок CTA

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

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

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

Процесс создания кнопки CTA довольно прост. Перетащите блок с кнопкой в любое место шаблона.

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

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

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

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

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

• Опция hover для кнопки

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

Вот как могут выглядеть hover-кнопки.

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

Что ж, этот раздел довольно сложный, так как в него входит целый ряд блоков и элементов.

(Источник: письмо от M&M's)

Как правило, такие карточки товаров состоят из фрагмента описания товара, краткого описания, цены и кнопки CTA.

Некоторые бренды, например M&M’s, размещают небольшое введение перед демонстрацией продукции, а другие — промоматериалы о товарах прямо под баннером или видео; выбор исключительно за вами.

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

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

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

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

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

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

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

12. Создание таймеров обратного отсчета для писем

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

(Источник: письмо от Malooka)

Создавать, оформлять и добавлять таймер в шаблон HTML-письма можно прямо в редакторе.

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

Для создания собственного таймера перетащите специальный блок «Таймер» в любой контейнер и кликните по нему.

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

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

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

Параметры «Показать дни» и «Цифровые метки» позволяют настроить отображение дней на таймере, а также общих обозначений, таких как «Часы», «Минуты» и «Секунды» (при отключении этих параметров время будет отображаться только в виде цифр).

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

Параметры раздела «Стили» довольно разнообразны и позволяют настроить отображение цифр, меток и разделителей, чтобы таймер гармонировал с общим дизайном.

13. Добавление разделителя

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

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

Добавить разделитель в письмо очень просто. Достаточно перетащить структуру с одной колонкой в шаблон HTML-письма, а затем поместить блок «Разделитель» внутри этой структуры.

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

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

Здесь можно настроить точные отступы, добавить анкорную ссылку (при необходимости) и выбрать, отображать / скрыть ли разделитель в разных версиях письма.

14. Вставка иконок соцсетей

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

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

Добавить иконки соцсетей очень просто, так как для этого у нас есть специальный блок. Перетащите блок «Соцсети» в свой шаблон и кликните по нему, чтобы открыть настройки.

По умолчанию будет включена одна иконка социальной сети. Чтобы добавить другие, кликните на кнопку «+» и выберите нужную из раскрывающегося списка (иконки добавляются по одной, поэтому нужно будет повторить эту операцию несколько раз, чтобы добавить все необходимые пиктограммы).

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

В этом раскрывающемся меню можно выбрать один из множества вариантов дизайна и изменить вид всех иконок.

И не забудьте о дополнительных настройках, которые применяются ко всему блоку «Соцсети», таких как размер иконок, расстояние между ними, названия, цвет фона и многое другое. Эти параметры позволяют точно настроить детали блока «Соцсети» в соответствии с общим дизайном и требованиями к размеру элементов.

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

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

Выберите из большого набора иконок соцсетей и настройте блок «Соцсети» под свои нужды.

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

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

• Как создать футер для письма в Stripo

Это составной элемент писем. Чтобы создать его, необходимо перетащить шаблон с нужным количеством колонок, добавить необходимое количество текстовых блоков, вставить все тексты и отредактировать их. После этого добавьте блок «Соцсети» и настройте его под свои нужды с учетом тех социальных сетей, в которых хотели бы продвигать свой контент.

16. Цвет и картинка фона

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

В этом примере мы применим цвет фона к структуре.

• Как задать цвет фона для структуры

Для начала кликните на любой элемент структуры и перейдите в настройки раздела «Стили» (важно, чтобы вы кликнули именно на структуру, так как при клике на контейнер откроются настройки контейнера, а в данный момент это не то, что нам нужно).

Кликните на опцию «Цвет фона», чтобы открыть палитру и выбрать нужный цвет фона для структуры.

Если у вас есть точный номер цвета, его можно ввести в это поле.

Чтобы задать цвет фона всего письма, перейдите в настройки «Глобальные стили и настройки» и измените значение параметра «Цвет фона письма».

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

Фоновое изображение будет отображаться только на десктопах. На мобильных устройствах оно не будет отображаться. В разделе «Глобальные стили и настройки» кликните на опцию «Фоновое изображение». Откроется привычное меню для добавления изображений. Выберите изображение из фотостока или загрузите его со своего устройства, чтобы сделать его фоновым изображением для письма.

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

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

17. Написание темы письма и прехедера

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

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

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

Если у вас нет времени на самостоятельное создание тем писем, всегда можно воспользоваться возможностями GenAI и кликнуть на кнопку «Улучшить с AI». Это позволит написать пояснительный запрос, задействовать креативность AI и за считанные секунды сгенерировать идеальную тему письма либо прехедер.

18. Адаптация письма для мобильных устройств

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

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

После клика эти настройки стиля (а также многое другое для каждого из элементов письма).

Превратятся в эти:

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

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

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

Вот как это выглядит.

19. Превью и тестирование писем

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

• Как предварительно просмотреть письмо в Stripo

Закончив работу над дизайном шаблона, кликните на кнопку «Превью» над шаблоном.

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

Также можно просматривать письмо в светлой и темной темах по клику на эти кнопки.

• Как отправить тестовое письмо в Stripo

Еще один способ протестировать письмо — просто отправить его себе на почту, чтобы посмотреть, как оно будет выглядеть в реальных условиях в почтовиках. Кликните на кнопку «Тестировать», чтобы открыть это небольшое окно.

Введите электронные адреса для тестирования в соответствующее поле и кликните на кнопку «Отправить тест». После этого вы получите тестовое письмо, которое сможете проверить.

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

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

Благодаря нашей интеграции с Email on Acid сейчас можно предварительно просматривать свои письма в популярных комбинациях почтовых клиентов и устройств прямо в Stripo.

В том же меню тестирования перейдите в раздел «Почтовые клиенты» и кликните на кнопку «Проверить».

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

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

20. Тестирование доступности письма

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

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

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

• Как проверить соответствие письма требованиям антиспам-политики 

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

Кликните на раздел «Спам», а затем на кнопку «Начать проверку».

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

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

21. Оптимизация письма под темную тему

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

В Stripo можно эмулировать как светлую, так и темную тему с помощью опции «Условия отображения». Кликните здесь, чтобы ознакомиться с опцией «Эмуляция темы». По умолчанию каждое письмо создается в светлой теме.

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

22. Применение условий отображения

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

Подробнее об условиях отображения читайте в статье нашего Help Center.

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

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

Подробнее о том, как это работает, читайте в нашем специальном гайде.

24. Добавление интерактивного контента 

Чтобы сделать письмо еще более уникальным, в него можно добавить интерактивный контент с помощью наших специальных блоков. Например, добавьте блок «Карусель», если хотите создать карусель из нескольких изображений.

Хотите сэкономить место в письме? Воспользуйтесь нашим блоком «Аккордеон», который сворачивает и разворачивает размещенную в нем информацию.

Хотите узнать мнение своей аудитории? Добавьте наш блок «Форма», который позволит получателям вводить свои ответы, чтобы можно было увидеть ответы на каждое письмо.

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

Важное примечание: имейте в виду, что не все почтовики поддерживают интерактивный контент. Например, если вы отправляете письма в Outlook, он (пока) не поддерживает интерактивный контент.

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

25. Сохранение элементов письма в качестве модулей

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

Чтобы сохранить элемент, достаточно навести курсор на него, а затем кликнуть по кнопке «Сохранить как модуль» здесь.

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

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

Мы рекомендуем сохранять и повторно использовать следующие элементы: хедеры, футеры, контактную информацию и контейнеры со smart-элементами. Первые останутся без изменений; для вторых потребуется вставить новую ссылку.

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

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

Как только письмо будет полностью готово (то есть протестировано и доработано), его можно легко отправить в ESP. Stripo интегрирована с 90+ ESP, а также с почтовиками вроде Gmail и Outlook, приложениями и многим другим.

Это означает, что всего одним кликом можно переслать свои письма в любой из этих сервисов. Если этих вариантов недостаточно, можно скачать письма в формате HTML / AMPHTML, в виде PDF-файла или изображения.

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

Кликните на кнопку «Экспорт» над шаблоном.

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

Кликните на любой вариант ESP, чтобы открыть настройки перед экспортом, введите необходимую информацию — и все готово.

То же самое касается экспорта в приложения и в виде файлов (просто выберите соответствующие пункты меню).

Советы и функции для значительного сокращения времени на создание писем в Stripo

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

• Кнопки «Отменить» и «Повторить»

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

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

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

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

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

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

• Действия «Дублировать» и «Переместить»

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

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

Затем кликните на кнопку «Переместить» и перетащите скопированный элемент в нужное место шаблона. И все.

• Сохранение и повторное использование существующих шаблонов

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

• Создание базового письма с помощью AI Assistant

Если вам нужно быстро создать базовую разметку письма, воспользуйтесь нашим AI Assistant. Достаточно ввести описательный запрос, в которой нужно описать, о чем будет письмо и какие элементы должны в него войти, а затем кликнуть на кнопку «Сгенерировать».

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

В завершение

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