Как сохранить одинаковые отступы между элементами при позиционировании в Zero Block на Tilda

При создании адаптивных сайтов на Tilda с использованием Zero Block часто возникает задача: зафиксировать элемент относительно левого или правого края окна в процентах, но при этом сохранить постоянный отступ между вложенными объектами (например, иконкой и текстом). Проблема в том, что при изменении ширины окна процентные отступы между дочерними элементами тоже меняются, нарушая дизайн.

В чём сложность стандартного подхода

В Zero Block каждый элемент можно позиционировать в процентах относительно границ окна (Window). Если вы задаёте группе элементов позицию слева: 10%, а каждому дочернему элементу - отступ слева: 5%, то при изменении ширины экрана эти 5% будут давать разное абсолютное расстояние между объектами. На маленьком экране (360px) отступ будет 18px, а на большом (470px) - уже 23.5px. Это не всегда желательно, особенно для шапки сайта, где требуется визуальная стабильность.

Решение без кастомного кода

Да, это можно сделать штатными средствами Zero Block, не прибегая к HTML/CSS. Используйте контейнеры (группы) с настройками Flexbox. Вот пошаговая инструкция:

• Шаг 1. Создайте в Zero Block группу (Container) и поместите в неё все элементы, которые должны иметь фиксированный отступ друг относительно друга (например, иконку и текст).
• Шаг 2. В настройках группы выберите тип позиционирования - Flex. Установите направление (ряд или колонка) и выравнивание.
• Шаг 3. Задайте gap (отступ между элементами внутри группы) в пикселях - например, 10px. Этот отступ не будет меняться при изменении ширины окна.
• Шаг 4. Саму группу позиционируйте относительно окна в процентах (например, слева: 5%, сверху: 10%). Теперь группа будет двигаться пропорционально окну, но внутренние отступы останутся фиксированными.

Почему это работает

Flexbox в Zero Block позволяет разделить внешнее позиционирование (группы относительно окна) и внутреннее (дочерние элементы внутри группы). Параметр gap задаётся в абсолютных единицах (px), поэтому он не масштабируется. Группа же может использовать проценты, чтобы привязываться к краям экрана. Таким образом, вы получаете адаптивность без потери точности вёрстки.

Пример для шапки сайта

Допустим, у вас шапка с логотипом и контактами. Логотип - это группа, внутри которой иконка и текст. Задайте группе позицию слева: 2%, а внутри используйте Flex с gap: 12px. При любом разрешении экрана отступ между иконкой и текстом останется 12px, а вся группа будет смещаться на 2% от левого края.

Альтернативный способ: использование вложенных Zero Block

Если вы не хотите использовать Flexbox, можно создать вложенный Zero Block (блок внутри блока). Внешний блок позиционируйте в процентах, а внутри разместите элементы с фиксированными отступами в пикселях. Однако этот метод менее гибкий и требует больше времени на настройку.

Заключение

Позиционирование в Zero Block с сохранением одинаковых отступов - реальная задача, которая решается через контейнеры с Flexbox. Это позволяет не использовать кастомный код и сохранять адаптивность. Главное - помнить: внешние проценты для группы, внутренние пиксели для gap.