Дизайн Шаблоны How-to
~ 9 мин читать
13590 просмотры
оценить
07 августа 2018

Как настроить отступы и интервалы в шаблонах рассылок Stripo

Stripo / Blog / Как настроить отступы и интервалы в шаблонах рассылок Stripo

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

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

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

1. Как настроить отступы в шаблонах рассылок

Под словом “отступы” мы подразумеваем пробелы между границами контейнера/структуры и элементами контента.

Итак, в редакторе Stripo вы можете установить отступы:

а) для всего шаблона сообщений

Для этого перейдите во вкладку “Оформление”, выберите пункт “Общие” настройки и установите отступы для всего шаблона рассылки.

Эти настройки будут применены к каждому блоку, структуре или контейнеру вашего емейла.

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

Stripo-Paddings-Ru

Здесь вы можете установить разные отступы для верхней, нижней, левой и правой сторон — просто нажмите “Ещё”.

Stripo-Paddings-Set-for-All-Containers

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

б) для каждого контейнера отдельно

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

Примечание: настройки для блока/структуры имеют приоритет над общими настройками.

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

Stripo-Paddings-Setting-Individual-Paddings

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

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

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

Stripo-Paddings-GIF

Как отключить отступы: вам не нужно стирать/удалять все отступы для каждой отдельной стороны — отмените все настройки отступов, установленные для шаблона или одной полосы, просто отключив “Ещё”.

2. Как настроить интервалы в шаблонах рассылок

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

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

а) настройка общих интервалов для структур/контейнеров

Кликните по структуре/контейнеру в своем шаблоне, и на панели настроек вы увидите:

Stripo-Paddings-Indents-Container-Ru

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

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

Stripo-Paddings-Indents-Between-Containers-Ru

б) настройка отдельных интервалов внутри контейнеров

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

Чтобы этого избежать, вам нужно открыть HTML-код шаблона емейла и работать только с переменной «es-p0r»:

Stipo-Paddings-Settings-Indents-via-Code

3. Как выровнять контейнеры

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

Stripo-Paddings-Equalize-Containers-Ru

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

Stripo-Paddings-Containers

4. Как с помощью Stripo установить межстрочный интервал в HTML-шаблоне емейла

Межстрочный интервал очень важен для читабельности, также как шрифты.

Установите межстрочный интервал для всего емейла или отдельного контейнера.

В Stripo есть один способ сделать это — в панели настроек.

Stripo-Paddings-Spacing-Ru

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

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

Например, Tesla ставит разделитель после письма, чтобы отделить контент и деловое предложение от контактной информации.

Stripo-Paddings-Tesla-to-Underline-It-All

С помощью Stripo применять разделители очень просто. Достаточно перетащить этот базовый блок в шаблон и установить его ширину и толщину. Готово!

Примечание: как правило, разделители являются изображениями. Из-за этого вы можете не уложиться в оптимальное соотношение изображений и текста. Разделитель Stripo представляет собой легкий HTML-код. То есть, наши разделители — просто символ, который не перегружает общий вес вашего емейла. И это помогает пройти фильтры защиты от спама.

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

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

Stripo-Paddings-Border-Line

А интернет-магазин Children’s использует такой причудливый образ-разделитель, чтобы отделить меню от предложения компании.

Stripo-Paddings-Spacer-Children

6. Как настроить границы

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

Stripo-Paddings-Container-Borders-by-Dreamsforce

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

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

Stripo-Paddings-Borders-Shell

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

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

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

Примечание: нажмите на любой элемент в контейнере. Затем нажмите “Перейти к контейнеру” на панели настроек.

Stripo-Paddings-To-Container-Ru

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

Stripo-Paddings-Borders-Ru

Если же не нажать ее, то будет установлена общая граница для всей полосы/контейнера.

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

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

  1. сверху, слева и справа для хедера и меню;
  2. левая и правая сторона для всех остальных полос;
  3. снизу, слева и справа для полосы футера.

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

Stripo-Paddings-Frames

7. Как протестировать емейл

Есть два способа проверить ваши емейлы с помощью Stripo:

a) превью емейла

Эта волшебная кнопка покажет вам, как будет выглядеть ваше сообщение на мобильных и десктопных экранах;

Stripo-Paddings-Preview-Ru

б) отправка тестовых емейлов

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

Stripo-Paddings-Test-Ru

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

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

Вас также может заинтересовать

← Предыдущие статьи Следующие статьи →
Stripo_Outlook Rendering Issues_Featured Image1
9 дней назад
Типичные проблемы отображения писем в Outlook и их решение с помощью Stripo

Outlook – довольно популярный почтовик. Его доля на рынке составляет 11% (на приложения Outlook приходится 9%, а веб-версию используют 2% людей во всем мире). Считается, что он удовлетворяет потребности любого бизнеса. Тем не менее, Outlook известен еще и своими “уникальными особенностями” отображения писем. Вот самые типичные проблемы, с которыми люди сталкиваются при открытии или отправке писем в Outlook: закругленные кнопки становятся квадратными; не отображается фон для отдельных контейнеров и строк; в некоторых версиях Outlook пункты меню теряют стили. Эти проблемы...

Дизайн Шаблоны How-to
13 дней назад
Адаптивность письма

Адаптивность письма для мобильных устройств уже не уникальная возможность, а часть необходимого функционала, поэтому в Stripo вы можете использовать библиотеку адаптивных шаблонов, которые уже готовы к использованию, и письма на их основе будут корректно отображаться на любом устройстве. Но часто бывает, что нужно решить нестандартную задачу по отображению на мобильном устройстве. Именно о возможностях адаптации пойдет речь ниже. 1. Адаптивная картинка Самая простая функция, которую вы можете использовать — “Адаптивная картинка”. Включив эту опцию, вы обезопасите себя от ненужного горизонтального скролла и...

Структура Шаблоны How-to
Будьте всегда в курсе последних новостей в области email маркетинга!