Блоки, контейнеры и сетка

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

• Добавить. Откройте панель «Блоки» в левой колонке и перетащите блок на холст — внутрь экрана, контейнера или ячейки сетки. Синяя линия покажет, куда встанет блок.
• Перенести. Перетащите блок на холсте или в панели «Структура».
• Скопировать или удалить. Выделите блок: на плашке над ним есть кнопки копирования и удаления.
• Найти. Откройте панель «Структура», чтобы увидеть все блоки экрана деревом. Там видны и блоки внутри контейнеров, и блоки, скрытые на текущем размере экрана.

Контейнер выстраивает блоки в ряд или в колонку. Как именно — задаёт раздел «Раскладка»:

• «Направление» — «Вертикально» (блоки друг под другом) или «Горизонтально» (в ряд).
• «Выравнивание элементов» — как блоки встают поперёк направления: по началу, по центру, по концу или растягиваются.
• «Распределение» — как блоки распределяют свободное место вдоль направления: прижимаются к началу, к центру, к концу или расходятся с равными промежутками.
• «Расстояние между элементами» и «Отступы внутри» — промежутки между блоками и от краёв контейнера.

В разделах «Оформление» и «Размер» задают фон, тень, скругление углов, ширину и высоту контейнера.

На телефоне горизонтальный ряд обычно не помещается. Настройка «На мобильном» разворачивает его в колонку. Она в разделе «Адаптивность», подробнее — в статье «Мобильная версия попапа».

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

У блока, который лежит в контейнере, в разделе «Анимация и расположение» есть ещё три настройки:

• «Ширина в ряду» — «По содержимому»: блок занимает столько места, сколько ему нужно; «Заполнить»: блок забирает всё свободное место в ряду. Например, поле email в ряду с кнопкой ставят на «Заполнить», чтобы поле растянулось, а кнопка осталась своей ширины.
• «Сжиматься, если тесно» — «Да»: блок уменьшается, когда в ряду не хватает места; «Нет»: блок сохраняет свою ширину.
• «Выравнивание в контейнере» — поставить этот блок иначе, чем остальные: к началу, по центру, к концу или растянуть. «Авто» — как у контейнера.