Как выровнять элементы в вертикальных продуктовых карточках

Если у продуктов в письме могут быть названия разной длины, в одних карточках название займет одну строку, а в других — две или три. Из-за этого элементы под названием (цена, кнопка и др.) могут оказаться на разной высоте и сетка карточек будет выглядеть неровно.

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

Ограничьте длину названияОграничьте длину названия

1. Откройте письмо в конструкторе и нажмите на текст в карточке продукта.

2. На вкладке «Дизайн» в разделе «Текст» нажмите на переменную в поле текста, например «Название».

   

3. Включите опцию «Ограничить максимальную длину текста».

4. В поле «Максимальное количество символов» введите или выберите максимальное количество символов для текста.

   Если название продукта длиннее, в письме его конец заменится многоточием. Многоточие входит в заданное количество символов: например, при ограничении 40 символов в письме останутся первые 37 символов названия и многоточие.

   

Ограничить длину можно и при добавлении переменной. Подробнее в статье «Добавить переменную».

Задайте высоту текстового элементаЗадайте высоту текстового элемента

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

1. В той же вкладке в разделе «Настройки текста» выберите «Настроить вручную».

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

   

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

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

Как проверить результатКак проверить результат

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

Если название не помещается целиком, увеличьте высоту текстового элемента или уменьшите максимальное количество символов.

Что дальшеЧто дальше

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