Studio Editor: About Page Structure (Parent, Child and Sibling Elements)
4 min read
In this article
- Parent-child relationships between elements
- Creating a page's structure
- Layers on a page
- Re-parenting elements
- Finding an element's place in the hierarchy
- Structuring sibling elements
- Structural changes across breakpoints
When structuring site pages, you are essentially nesting elements within sections and / or containers and layout tools. For example, placing text inside a container box creates a relationship between the text and container, derived from Modern HTML and CSS concepts.
Use this article to learn more about page structure, including parent-child relationships between elements, page layers, and more.
Parent-child relationships between elements
When you place an element inside a container or layout tool, it attaches to that tool or container. This creates a parent-child relationship. For example, adding a logo to a header makes the logo the 'child', and the header the 'parent'.
Similarly to CSS, the design (i.e., size, position, padding, etc.) of a parent container influences its children elements. Adding padding to a container, for example, makes the elements within smaller in order to accommodate the change. Learn more about sizing elements
Good to know:
- New elements you add are automatically docked to the top and the left / right of the parent element. You can disable auto docking to manually adjust the child element's position.
- When you stack elements, they're placed inside a flexbox which acts as the parent.
Creating a page's structure
When planning the design of a site, it's important to begin by creating a layered structure. We recommend creating the parent containers first, then adding children elements by dragging and dropping them in the right place.
Layers on a page
In the Studio Editor, the structure you create is reflected the Layers panel. The following layers make up the structure of the site:
- Page: From the Layers panel, you can edit the page's background color and add padding. Click the More Actions icon
next to the page name to control these settings. - Sections: Every page is made up of at least one section, and you can create as many as your client needs. Most sections contain layout tools and containers (e.g. cells, stacks, etc.).
- Containers and layout tools: Nest elements within containers to easily create a responsive structure and ensure they stay in place. Add containers, or layout tools such as repeaters and flexboxes.
- Elements: These are the elements you add from the Add Elements panel (e.g., text, buttons, media, etc.). Dock single elements, or stack multiple elements to ensure consistent order and spacing across screen sizes.
Re-parenting elements
Moving a child element into a new parent element is referred to as "re-parenting". To re-parent an element, simply drag and drop it inside the new parent.
Finding an element's place in the hierarchy
Every section, container and element on a page has breadcrumbs which indicate its place in the hierarchy. You can easily navigate between these layers by clicking the breadcrumbs on the canvas.
Structuring sibling elements
Siblings are elements sharing the same direct parent. For example, the text and vector art in the below image are siblings, with the container is their parent:
If sibling elements are in certain layout tools (e.g., Stacks, Repeaters, etc.), they may affect each other's size and position. Designing this relationship can be useful in creating a responsive site, as you can prevent elements from overlapping in smaller screen sizes.
In the example below, you can see the margins that are automatically created between sibling elements:
Structural changes across breakpoints
The Layers panel shows you the hierarchy of a page's content (sections, containers / layout tools, and elements) and allows you to adjust them as needed.
The page hierarchy is part of the HTML structure of the site, which means changes you make to it are reflected across all breakpoints. For example, when you separate a parent and a child (e.g., text and its container), that separation applies to all breakpoints. Learn more about designing across breakpoints
