Stripes и Containers

Работа с полосами и контейнерами — основа структуры email-шаблона

Что такое Stripe (Полоса)?

Stripe (полоса) — это горизонтальная секция вашего email-шаблона. Каждая полоса представляет собой отдельный блок контента, который располагается вертикально друг за другом.

Типичные примеры полос:

  • Шапка — логотип и навигация в верхней части письма
  • Герой-секция — главное изображение или призыв к действию
  • Основной контент — текст, изображения, кнопки
  • Подвал — контактная информация, ссылки, отписка

Свойства полосы

  • Фоновый цвет — цвет фона всей полосы. Можно использовать для создания цветных секций.
  • Фоновое изображение — изображение, которое отображается на фоне полосы. Поддерживается наложение цвета поверх изображения.
  • Внутренние отступы (Padding) — отступы внутри полосы от краёв до контента. Устанавливаются отдельно для верха, низа, левого и правого края.
  • Внешние отступы (Margin) — отступы между полосами. Позволяют контролировать расстояние между секциями.

Работа с полосами

Добавление полосы

  1. На пустом холсте нажмите кнопку "Добавить полосу"
  2. Или перетащите контейнер из левой панели — полоса создастся автоматически
  3. Или используйте кнопку "+" между существующими полосами

Выделение полосы

Чтобы выделить полосу, кликните на пустое место внутри неё (не на блок или контейнер). Выделенная полоса будет подсвечена синей рамкой.

Перемещение полос

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

Удаление полосы

  1. Выделите полосу
  2. Нажмите кнопку "Удалить" в правой панели или клавишу Delete
  3. Подтвердите удаление

Дублирование полосы

Выделите полосу и нажмите Ctrl+D или кнопку "Дублировать" в правой панели. Полезно для создания похожих секций.

Что такое Container (Контейнер)?

Container (контейнер) определяет макет колонок внутри полосы. Контейнеры позволяют создавать многоколоночные раскладки для размещения контента рядом друг с другом.

⚠️ Важно

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

Типы макетов контейнеров

1 колонка (100%)

Полноширинный контейнер для размещения одного элемента на всю ширину. Идеально для:

  • Заголовков и подзаголовков
  • Больших изображений
  • Кнопок призыва к действию
  • Текстовых блоков

2 колонки (50-50)

Две равные колонки по 50% ширины каждая. Подходит для:

  • Изображения и текста рядом
  • Двух кнопок призыва к действию
  • Сравнения продуктов или услуг

3 колонки (33-33-33)

Три равные колонки по 33.33% ширины. Используется для:

  • Трёх продуктов или услуг
  • Иконок с описаниями
  • Трёх колонок контента

4 колонки (25-25-25-25)

Четыре равные колонки по 25% ширины. Подходит для:

  • Иконок социальных сетей
  • Четырёх небольших элементов
  • Навигационных ссылок

Асимметричные макеты

33-67 и 67-33

Одна колонка занимает 1/3 ширины, другая — 2/3. Полезно для изображения с текстом.

25-75 и 75-25

Одна колонка занимает 1/4 ширины, другая — 3/4. Для боковой панели и основного контента.

Работа с контейнерами

Добавление контейнера

  1. Выделите полосу, в которую хотите добавить контейнер
  2. В левой панели выберите нужный макет контейнера
  3. Перетащите его в полосу или кликните на него
  4. Контейнер появится внутри полосы с пустыми колонками

Изменение макета контейнера

  1. Выделите контейнер (кликните на пустое место внутри него)
  2. В правой панели найдите раздел "Макет"
  3. Выберите новый макет из списка
  4. ⚠️ Внимание: при смене макета контент может перераспределиться

Свойства контейнера

  • Фоновый цвет — цвет фона контейнера (отличается от фона полосы)
  • Внутренние отступы — отступы внутри контейнера от краёв до колонок
  • Выравнивание — выравнивание контента внутри колонок (по левому краю, по центру, по правому краю)
  • Максимальная ширина — ограничение ширины контейнера (полезно для центрирования узкого контента)

Удаление контейнера

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

Колонки (Columns)

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

Работа с колонками

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

Лучшие практики

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