After reading this article you’ll know how to:
Comprehend the layer structure
Switch between parent and child components
Work with the component tree
While building the page layout, you will have to work with various components and therefore it’s important to understand their relationship and learn how to navigate between them. For this reason, this article will explain how to switch between parent and child components and navigate through them using the component tree option.
Component layers
When you add components to your page canvas, they form layers. For instance, to add a new button component, you need to place it into the column component, and when you add one, the row component will be created. As a result, they form this three-layer hierarchy.
Switching between components
In the first example, we will take a look at how to switch between components. Here we see three columns, one of which is filled with the text, media, and button components, the two are blank. |
If you click once on the media component (the same applies to the text and button ones), it will be chosen and its options will be visible in the sidebar on the left. Using key binds you can navigate to its parent components by clicking the upper arrow: you’ll see that it has the column component upon it. By clicking on the same button one more time, you’ll get to the row component and this one will be the highest in the components hierarchy as it unites all the columns. |
Navigating via component tree
You can also navigate between components via the component tree. In fact, in some cases, it’s even more convenient to do so. Also, it gives you the opportunity to search for components that you need.
Open the component tree on the sidebar. Clicking the right-side button will move the entire component tree to the right side of your page. |
 |
You will see the list of all components on your page: parent and child ones. You can easily switch between them and see the bigger picture in this overview. From the component tree, it is possible to move elements within your page by just dragging them beneath or above one another.
The key binds mentioned above are also applicable in the component tree, meaning you can quickly navigate through the tree using the arrow keys. |
You might have also noticed a small eye icon beside some components. This function toggles the visibility of these elements on your page when your page is compiled (after clicking the |