Редактор Studio: О структуре страницы (родительские, дочерние элементы и сиблинги)
При структурировании страниц сайта вы, по сути, вкладываете элементы в секции и/или контейнеры и инструменты макета. Например, размещение текста внутри бокса-контейнера создает связь между текстом и контейнером, основанную на современных концепциях HTML и CSS.
Используйте эту статью, чтобы узнать больше о структуре страницы, включая иерархические связи между элементами, слои страницы и многое другое.
Studio Editor: Родительские и дочерние связи между элементами
Когда вы помещаете элемент внутрь контейнера или инструмента макета (например, сетки, стопки), он прикрепляется к этому инструменту или контейнеру. Это создает иерархическую связь «родитель — потомок». Например, при добавлении логотипа в хедер логотип становится «потомком», а хедер — «родителем».
Аналогично CSS, дизайн (т. е. размер, положение, отступы и т. д.) родительского контейнера влияет на его дочерние элементы. Например, добавление отступов в контейнер уменьшает дочерние элементы, чтобы адаптировать их к изменениям.
Подробнее о размерах элементов
Знаете ли вы?
- Новые элементы, которые вы добавляете, автоматически фиксируются по верхнему и левому/правому краю родительского элемента. Вы можете настроить положение дочернего элемента вручную, отключив автофиксацию.
- Когда вы складываете элементы в стопку, они помещаются внутрь Flex-контейнера, который выступает в роли родителя.
Studio Editor: Создание структуры страницы
При планировании дизайна сайта важно начать с создания многослойной структуры. Мы рекомендуем сначала создать родительские контейнеры, а затем добавить дочерние элементы, перетащив их в нужное место.
Studio Editor: Слои на странице
В Редакторе Studio созданная вами структура отображается на панели
Слои. Структуру сайта составляют следующие слои:
- Страница: В панели слоев вы можете редактировать цвет фона страницы и добавлять отступы. Нажмите на иконку Действия
рядом с названием страницы , чтобы управлять этими настройками. - Секции: Каждая страница состоит как минимум из одной секции, и вы можете создать столько секций, сколько нужно клиенту. Большинство секций содержат инструменты макета и контейнеры (например, ячейки, стопки и т. д.).
- Контейнеры и инструменты макета: Размещайте элементы внутри родительских контейнеров, чтобы они сохраняли свое положение и интервалы на экранах любого размера. Добавляйте контейнеры или такие инструменты макета, как репитеры и flex-контейнеры.
- Элементы: Это элементы, которые вы добавляете из панели Добавить элементы (например, текст, кнопки, медиа и т. д.). Вы можете фиксировать отдельные элементы или собирать несколько элементов в стопку, чтобы обеспечить единообразный порядок и интервалы на экранах разного размера.
Studio Editor: Изменение родительского элемента
Перемещение дочернего элемента в новый родительский элемент называется «сменой родителя». Чтобы сменить родителя элемента, просто перетащите его внутрь нового родителя.
Определение места элемента в иерархии
При выборе элемента на холсте в левом нижнем углу появляется панель навигации, показывающая его иерархию. Это позволяет увидеть родительский элемент, «прародительский» и так далее, помогая перемещаться по слоям страницы и понимать их структуру.
При наведении на синюю этикетку элемента на холсте также отображается его иерархия. В примере ниже при наведении на этикетку «Меню» видно, что оно вложено в ячейку внутри раздела хедера.
Studio Editor: Структурирование соседних элементов
Сиблинги — это элементы, имеющие одного и того же прямого родителя. Например, текст и векторная графика на изображении ниже являются сиблингами, а контейнер — их родителем:
Если соседние элементы находятся в определенных инструментах макета (например, в контейнере, репитере и т. д.), они могут влиять на размер и положение друг друга. Настройка этой взаимосвязи может быть полезна при создании адаптивного сайта, так как вы можете предотвратить наложение элементов на экранах меньшего размера.
В примере ниже вы видите поля, которые автоматически создаются между соседними элементами:
Структурные изменения на разных размерах экрана
Панель слоев показывает иерархию контента страницы (секции, контейнеры / инструменты макета и элементы) и позволяет настраивать их по мере необходимости.
Иерархия страницы является частью HTML-структуры сайта, а это значит, что вносимые вами изменения отражаются на всех размерах экрана. Например, когда вы разделяете родительский и дочерний элементы (например, текст и его контейнер), это разделение применяется ко всем размерам экрана.
Подробнее о дизайне для разных размеров экрана