0
1
00:00:00,240 --> 00:00:03,700
When we build our page in Webflow, we're going to have lots of boxes.
1

2
00:00:03,720 --> 00:00:08,220
Many of the smaller boxes will sit inside other bigger boxes, and those bigger boxes will be sitting
2

3
00:00:08,220 --> 00:00:14,310
in an even bigger boxes. To not get lost in this jungle of boxes Webflow has a navigator panel, which
3

4
00:00:14,310 --> 00:00:15,470
you can find here.
4

5
00:00:15,490 --> 00:00:18,480
This Navigator is similar to Figma's layer's panel.
5

6
00:00:18,510 --> 00:00:21,440
Everything that we add to our page we can find it here,
6

7
00:00:21,450 --> 00:00:26,820
even invisible objects. Elements in this panel are arranged with a box model logic.
7

8
00:00:26,820 --> 00:00:31,630
The first top level box, that holds everything inside is called the body.
8

9
00:00:31,650 --> 00:00:33,930
Nothing goes next to it or outside of it.
9

10
00:00:33,930 --> 00:00:35,400
Everything goes inside.
10

11
00:00:35,490 --> 00:00:39,540
It's the great great great grandfather of all the children boxes.
11

12
00:00:39,570 --> 00:00:45,960
That's why you get this slight indentation... To represent the hierarchy of elements and to show what sits
12

13
00:00:45,960 --> 00:00:47,470
inside what box.
13

14
00:00:47,670 --> 00:00:54,420
We call this nesting. So the heading and paragraph are nested inside the body. Webflow shows us
14

15
00:00:54,420 --> 00:00:56,210
this hierarchy with lines too.
15

16
00:00:56,220 --> 00:01:00,000
If we take an empty box and put our heading inside, the line will appear.
16

17
00:01:03,990 --> 00:01:07,800
This line is a helpful guide to easily identify the hierarchy of elements.
17

18
00:01:10,330 --> 00:01:12,240
Hierarchy is the big thing here.
18

19
00:01:12,250 --> 00:01:16,360
Many of the properties pass down from the parent to the children.
19

20
00:01:16,360 --> 00:01:21,880
This is called inheritance. So the child will inherit the properties from the parent.
20

21
00:01:21,880 --> 00:01:29,050
Just like real life. For example, if I change the font color to red on the parent, any text element that
21

22
00:01:29,080 --> 00:01:31,990
I drop inside that parent will be red as well.
22

23
00:01:31,990 --> 00:01:37,480
All of them, regardless of the type of text I drop. Be it a headline, a paragraph, bullet point or what
23

24
00:01:37,480 --> 00:01:37,810
not.
24

25
00:01:41,300 --> 00:01:43,460
And that's until I override it.
25

26
00:01:43,460 --> 00:01:46,080
We don't have to be exact copies of our parents, right?
26

27
00:01:46,100 --> 00:01:48,220
If we decide to be different, then we can.
27

28
00:01:48,290 --> 00:01:54,770
We can directly change the text style on the child element. That's called overriding. Not all properties
28

29
00:01:54,770 --> 00:01:55,660
can be inherited.
29

30
00:01:55,670 --> 00:01:57,770
Mainly this applies to text styles.
30

31
00:02:00,920 --> 00:02:05,080
Webflow can show us if there is any inheritance happening on any element.
31

32
00:02:05,110 --> 00:02:08,100
Do you see how some of the styles are highlighted in orange?
32

33
00:02:08,110 --> 00:02:12,820
It means that the style is being inherited. And if you click on it, it will show you from where it's being
33

34
00:02:12,820 --> 00:02:13,480
inherited.
34

35
00:02:13,480 --> 00:02:16,950
For example, on the color it says Div Block. Referring to that parent box
35

36
00:02:16,950 --> 00:02:18,730
we just edited.
36

37
00:02:18,740 --> 00:02:20,380
Later I'll explain what's a Div Block.
37

38
00:02:20,500 --> 00:02:26,500
If the style is highlighted in blue color instead, that means we have directly styled that property. And
38

39
00:02:26,500 --> 00:02:29,440
it will override any styles from the parent.
39

40
00:02:29,440 --> 00:02:30,870
You don't need to understand this fully,
40

41
00:02:30,880 --> 00:02:34,730
for now. You'll get the hang of it as we practice and build our page.
41

42
00:02:34,780 --> 00:02:40,150
The second visual representation of the hierarchy of elements is visible on the bottom navigator bar.
42

43
00:02:40,150 --> 00:02:44,280
It shows that heading is inside Div Block, which is inside the body.
43

44
00:02:44,320 --> 00:02:49,390
These are clickable and you can select any of the parents. But it doesn't show children or the siblings.
44

45
00:02:49,450 --> 00:02:54,310
Only the parents all the way down to the body. For a complete picture, navigator panel is a better
45

46
00:02:54,310 --> 00:02:57,130
use. The same of course applies to the Navigator panel.
46

47
00:02:57,130 --> 00:03:05,410
If we select an element in the panel just like Figma, we will be editing that exact element. In Figma
47

48
00:03:05,420 --> 00:03:11,090
when we move elements up and down in layers panel, the position of the element doesn't change. It just
48

49
00:03:11,090 --> 00:03:13,420
goes behind or in front of some other element.
49

50
00:03:13,430 --> 00:03:14,640
If they're overlapping.
50

51
00:03:14,750 --> 00:03:19,740
If they're not overlapping then nothing really happens visually. But in Webflow the position changes.
51

52
00:03:19,760 --> 00:03:25,880
Moving paragraph element in the Navigator, changes the order of how it's displayed on the canvas.
52

53
00:03:29,170 --> 00:03:31,780
We can also do this moving right on the canvas.
53

54
00:03:31,780 --> 00:03:38,650
You'll notice that navigator panel updates accordingly. We can also drag elements inside boxes in the
54

55
00:03:38,650 --> 00:03:47,590
Navigator panel. And move the entire boxes, which will move all the children elements with it.
55

56
00:03:47,620 --> 00:03:51,880
This web structure might feel a little confusing in the beginning, but don't worry, quickly you'll get
56

57
00:03:51,880 --> 00:03:52,270
used to.