Колонки в письме

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

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

Чтобы изменить параметры блока, кликните на него в редакторе. Откроются настройки блока. Перейдите во вкладку «Колонки».

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

• Ширина колонок — позволяет изменить соотношение ширины колонок (например сделать одну колонку шире другой).
• Добавление, удаление и копирование колонок — позволяет изменять структуру блока в зависимости от задачи. (для удаления и копирования колонок наведите курсор на область колонки с прописанной шириной)
• Варианты отображения блока — расположены ниже настройки ширины колонок и позволяют выбрать другой вид расположения колонок из предложенных вариантов.
• Изменить порядок в десктопе — позволяет изменить порядок отображения колонок в ПК-версии письма не затрагивая их расположение в мобильной версии.
• Вертикальное выравнивание — позволяет настроить расположение содержимого колонок по вертикали.
• Горизонтальный отступ — позволяет регулировать расстояние между колонками.

Как изменить порядок колонок на ПК, не меняя мобильную версию

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

Для этого:

• Создайте блок с изображением в левой колонке, а текстом — в правой.
• Откройте настройки блока и перейдите во вкладку «Колонки».
• Измените порядок в десктопе, чтобы изображение отображалось справа.

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

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

Чтобы изменить отображение блока и сделать его в одну строку:

Если переключатель включён, колонки располагаются друг под другом. Если отключить его, колонки останутся в одном ряду.

На этой же вкладке можно настроить:

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

Как изменить ширину колонок на мобильном устройстве

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

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

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

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