When we build our page in Webflow, we're going to have lots of boxes. 1
Many of the smaller boxes will sit inside other bigger boxes, and those bigger boxes will be sitting 2
in an even bigger boxes. To not get lost in this jungle of boxes Webflow has a navigator panel, which 3
you can find here. 4
This Navigator is similar to Figma's layer's panel. 5
Everything that we add to our page we can find it here, 6
even invisible objects. Elements in this panel are arranged with a box model logic. 7
The first top level box, that holds everything inside is called the body. 8
Nothing goes next to it or outside of it. 9
Everything goes inside. 10
It's the great great great grandfather of all the children boxes. 11
That's why you get this slight indentation... To represent the hierarchy of elements and to show what sits 12
inside what box. 13
We call this nesting. So the heading and paragraph are nested inside the body. Webflow shows us 14
this hierarchy with lines too. 15
If we take an empty box and put our heading inside, the line will appear. 16
This line is a helpful guide to easily identify the hierarchy of elements. 17
Hierarchy is the big thing here. 18
Many of the properties pass down from the parent to the children. 19
This is called inheritance. So the child will inherit the properties from the parent. 20
Just like real life. For example, if I change the font color to red on the parent, any text element that 21
I drop inside that parent will be red as well. 22
All of them, regardless of the type of text I drop. Be it a headline, a paragraph, bullet point or what 23
not. 24
And that's until I override it. 25
We don't have to be exact copies of our parents, right? 26
If we decide to be different, then we can. 27
We can directly change the text style on the child element. That's called overriding. Not all properties 28
can be inherited. 29
Mainly this applies to text styles. 30
Webflow can show us if there is any inheritance happening on any element. 31
Do you see how some of the styles are highlighted in orange? 32
It means that the style is being inherited. And if you click on it, it will show you from where it's being 33
inherited. 34
For example, on the color it says Div Block. Referring to that parent box 35
we just edited. 36
Later I'll explain what's a Div Block. 37
If the style is highlighted in blue color instead, that means we have directly styled that property. And 38
it will override any styles from the parent. 39
You don't need to understand this fully, 40
for now. You'll get the hang of it as we practice and build our page. 41
The second visual representation of the hierarchy of elements is visible on the bottom navigator bar. 42
It shows that heading is inside Div Block, which is inside the body. 43
These are clickable and you can select any of the parents. But it doesn't show children or the siblings. 44
Only the parents all the way down to the body. For a complete picture, navigator panel is a better 45
use. The same of course applies to the Navigator panel. 46
If we select an element in the panel just like Figma, we will be editing that exact element. In Figma 47
when we move elements up and down in layers panel, the position of the element doesn't change. It just 48
goes behind or in front of some other element. 49
If they're overlapping. 50
If they're not overlapping then nothing really happens visually. But in Webflow the position changes. 51
Moving paragraph element in the Navigator, changes the order of how it's displayed on the canvas. 52
We can also do this moving right on the canvas. 53
You'll notice that navigator panel updates accordingly. We can also drag elements inside boxes in the 54
Navigator panel. And move the entire boxes, which will move all the children elements with it. 55
This web structure might feel a little confusing in the beginning, but don't worry, quickly you'll get 56
used to.