Введение

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

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

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

С точки зрения данных есть несколько сущностей: профиль, заказы, бонусная карта, бонусные операции. Каждая из них имеет свой набор CSS-классов и переменных, которые можно использовать при разметке шаблонов. Ниже описаны общие механизмы, а детальные описания сущностей вынесены в отдельные разделы.

Добавить CSS-класс можно одним из двух способов:

1. На весь блок через раздел Настройки - для Zero и стандартных блоков
2. На отдельный элемент или группу элементов - в редакторе Zero-блоков

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

Подробнее про автолейауты и Flex-группы можно узнать из материалов Тильды:

1. Автолейауты в Zero Block — новый способ вёрстки макетов в нулевом блоке
2. Вложенность групп в Zero Block
3. Вебинар "Вёрстка с использованием автолейаутов в Zero Block"

Для подстройки высоты Zero-блоков под контент можно использовать специальные CSS-классы:

1. uc-zero-flex - добавляется на Zero-блок, адаптирует высоту блока и всех Flex-групп внутри
2. uc-artboard-flex - добавляется на Zero-блок, адаптирует высоту блока
3. uc-group-flex - добавляется на Flex-группу, адаптирует её высоту