- 03 Oct 2023
- 2 Minutes to read
- Print
- DarkLight
- PDF
How to navigate and understand the navigation path
- Updated on 03 Oct 2023
- 2 Minutes to read
- Print
- DarkLight
- PDF
Navigating the page builder can quickly become complicated when you have many levels of elements.
I use this example as a starting point.
The most important tool you have is the navigation path in the lower left corner. It tells you which element you have selected (the one highlighted in blue), all the elements that are above/decide on top of each other. The list begins from the left with the top level and works its way down to the item you have selected. If you hover over a selection you will see on the screen that it flashes in the content. This marks which element this is. Watch the video below:
If I tap on one of the options located in the navigation path, this will become your new selected item. It will then be highlighted in the content with a blue border.
Boxes lying one above the other
Often you will end up in a situation where boxes are on top of each other so that it is not possible to press them. In the example I'm going to show now, I'm going to remove the yellow box. The problem is that after I delete it, there is still a box left.
This is because there is a box located outside the yellow box. Both have the same height and width making it then impossible to press on it. In this case, use the navigation path to select the item directly above and delete it instead.
Boxes decide over the boxes below them
When it comes to the placement of content, one must keep in mind that this applies to the contents of the box. In this example, I will move the location of the yellow box to the top. To do this, I need to change the "Content placement" setting.
In the picture above you can see how all the boxes are placed. To be able to refer to some of them, I will use a number. Container on the left is 1, the next box is 2, container is 3 and the last box is 4.
If I change "Content placement" to the top of box number 4, it won't matter as this is the yellow box.
If I change to the top of box number 3, this won't matter either. This is because box number 3 is the same height as box number 4. It essentially means that it is already at the top.
The correct box to change is box number 2. It is the nearest box that is higher than those that lie within itself. Watch video: