1
00:00:00,000 --> 00:00:01,260
I just want to spend
a few more minutes

2
00:00:01,260 --> 00:00:02,550
to walk you through

3
00:00:02,550 --> 00:00:05,820
the general concepts
of sections,

4
00:00:05,820 --> 00:00:09,810
columns, as well as elements
and patterns and margins.

5
00:00:09,810 --> 00:00:11,520
As I showed you previously.

6
00:00:11,520 --> 00:00:12,870
If you want to add an element,

7
00:00:12,870 --> 00:00:14,310
you can just simply drag from

8
00:00:14,310 --> 00:00:15,780
the left-hand side and

9
00:00:15,780 --> 00:00:17,540
then they'll simply
drop it in slide.

10
00:00:17,535 --> 00:00:19,895
Now the thing is
automatically whenever

11
00:00:19,890 --> 00:00:22,220
you're adding elements
with Elementor,

12
00:00:22,215 --> 00:00:24,335
a section and economy will be

13
00:00:24,330 --> 00:00:27,420
created for that
particular element.

14
00:00:27,420 --> 00:00:30,530
We just dropped in the
text editor elements.

15
00:00:30,525 --> 00:00:32,675
And now you would
notice right up here

16
00:00:32,670 --> 00:00:34,950
we have this blue line here.

17
00:00:34,950 --> 00:00:38,230
This is gonna be
this section holding

18
00:00:38,230 --> 00:00:42,830
the column that's holding
the text edit. All.

19
00:00:42,830 --> 00:00:44,080
Notice right here, you've

20
00:00:44,075 --> 00:00:45,475
got this brown
button right here.

21
00:00:45,470 --> 00:00:46,580
And if I hover over it,

22
00:00:46,580 --> 00:00:48,350
it says Edit Column.

23
00:00:48,350 --> 00:00:51,080
Now this is the actual
element itself,

24
00:00:51,080 --> 00:00:52,690
the actual text edit tool.

25
00:00:52,685 --> 00:00:54,565
Once again, the way elemental

26
00:00:54,560 --> 00:00:56,570
walks is there you
will have an element,

27
00:00:56,570 --> 00:00:58,970
whether it's an image,
video or button.

28
00:00:58,970 --> 00:01:01,550
And then a column will hold,

29
00:01:01,550 --> 00:01:03,580
will contain that element.

30
00:01:03,575 --> 00:01:05,785
In both the column
and the elements will

31
00:01:05,780 --> 00:01:08,390
be inside a section.

32
00:01:08,390 --> 00:01:11,390
It's kind of like a hierarchical
structure section column

33
00:01:11,390 --> 00:01:13,400
then the actual element.

34
00:01:13,400 --> 00:01:14,950
Now just like with editing,

35
00:01:14,945 --> 00:01:16,675
the element where
you will have access

36
00:01:16,670 --> 00:01:18,730
to content style advanced.

37
00:01:18,725 --> 00:01:22,835
You can also edit the column
holding that element.

38
00:01:22,835 --> 00:01:24,445
You can see I've hovered on

39
00:01:24,440 --> 00:01:26,450
the bottom here, it
says Edit column.

40
00:01:26,450 --> 00:01:27,920
You click in there.

41
00:01:27,920 --> 00:01:29,240
And then you will have access to

42
00:01:29,240 --> 00:01:31,010
layout style and advanced.

43
00:01:31,010 --> 00:01:33,290
With layout, you can
do things like maybe

44
00:01:33,290 --> 00:01:36,340
reduce the length of the column.

45
00:01:36,335 --> 00:01:38,125
You can change the alignment.

46
00:01:38,120 --> 00:01:40,280
You can add an HTML tag fluids.

47
00:01:40,280 --> 00:01:43,070
You can style the
column and we want to

48
00:01:43,070 --> 00:01:46,190
add a black background
like in a red background.

49
00:01:46,190 --> 00:01:48,340
And you want to add an
image, things like that.

50
00:01:48,335 --> 00:01:51,215
So that a lot of things you
can do all with the column.

51
00:01:51,215 --> 00:01:54,185
Now, if you right-click on
the Edit Column button,

52
00:01:54,185 --> 00:01:56,275
you can do things like
add a new column,

53
00:01:56,270 --> 00:01:57,730
duplicated column.

54
00:01:57,725 --> 00:02:00,535
You could even copy
and paste the style.

55
00:02:00,530 --> 00:02:02,840
Maybe you added a
black background,

56
00:02:02,840 --> 00:02:04,220
you change the font style of

57
00:02:04,220 --> 00:02:06,770
the text and you want
to reuse that style,

58
00:02:06,770 --> 00:02:08,810
you simply copy the
style and then you

59
00:02:08,810 --> 00:02:11,180
can pierce his style
are elsewhere.

60
00:02:11,180 --> 00:02:13,670
The same thing goes with this
section in here as well.

61
00:02:13,670 --> 00:02:15,910
If I click on the edit
section button up here.

62
00:02:15,905 --> 00:02:19,285
Now you see I have access
to layout style advanced.

63
00:02:19,280 --> 00:02:22,190
Like with layout, I can
change this to full width.

64
00:02:22,190 --> 00:02:24,290
I can maybe change

65
00:02:24,290 --> 00:02:26,510
the size or the length of
the width naked, very,

66
00:02:26,510 --> 00:02:28,580
very wide availability
now I will,

67
00:02:28,580 --> 00:02:31,270
I can change the height
as well if I wanted to.

68
00:02:31,265 --> 00:02:32,765
I can do a lot of things.

69
00:02:32,765 --> 00:02:34,195
Same goes with his style.

70
00:02:34,190 --> 00:02:38,080
Again, I can add a background
color. If I wanted to.

71
00:02:38,080 --> 00:02:40,210
I can do several things like add

72
00:02:40,210 --> 00:02:42,790
motion effects and so on.

73
00:02:42,790 --> 00:02:44,140
Just like with the
column environment,

74
00:02:44,140 --> 00:02:46,740
click on the edit section
button right here.

75
00:02:46,735 --> 00:02:48,475
You can sit and do things like

76
00:02:48,475 --> 00:02:50,725
edit section and
I can duplicate.

77
00:02:50,724 --> 00:02:53,294
I can even save as a template
which we'll talk about

78
00:02:53,290 --> 00:02:56,470
when we are using Elementor Pro.

79
00:02:56,470 --> 00:02:59,950
Now, let me quickly talk to
you about the concept of

80
00:02:59,950 --> 00:03:02,040
margins and patterns because

81
00:03:02,035 --> 00:03:04,005
this is gonna be very,
very, very important.

82
00:03:04,000 --> 00:03:05,800
Now, I've got a section in

83
00:03:05,800 --> 00:03:07,860
here holding this
text editor writes.

84
00:03:07,855 --> 00:03:10,005
What I'm gonna do
is I'm going to add

85
00:03:10,000 --> 00:03:13,390
an image into another section.

86
00:03:13,390 --> 00:03:17,100
Lambdas quickly choose
an image to walk with.

87
00:03:17,095 --> 00:03:19,085
Let me go to my media library.

88
00:03:19,080 --> 00:03:21,960
Let me choose this
image right here.

89
00:03:22,210 --> 00:03:24,830
Now, take a look at this.

90
00:03:24,830 --> 00:03:30,520
Let me add a background
color to the section here.

91
00:03:30,515 --> 00:03:33,025
Don't worry, I will show
you all this a bit later.

92
00:03:33,020 --> 00:03:35,660
All right. What
exactly are margin's?

93
00:03:35,660 --> 00:03:39,370
Margins are used to add
space between sections.

94
00:03:39,365 --> 00:03:40,705
So right now we've got a section

95
00:03:40,700 --> 00:03:42,050
here holding this
text editor with

96
00:03:42,050 --> 00:03:43,520
the red background would have

97
00:03:43,520 --> 00:03:46,120
another section in here
holding the image.

98
00:03:46,115 --> 00:03:49,655
If I wanted to create plenty
of space between these two,

99
00:03:49,655 --> 00:03:51,355
I could actually use

100
00:03:51,350 --> 00:03:53,960
an element in here
called a spacer element.

101
00:03:53,960 --> 00:03:56,330
You can say conjugate
spacer and then drop it

102
00:03:56,330 --> 00:03:59,230
in-between these two sections.

103
00:03:59,225 --> 00:04:01,585
But another way to do so would

104
00:04:01,580 --> 00:04:04,100
be to go to either one
of these sections.

105
00:04:04,099 --> 00:04:06,549
I'm going to go to the
first section in here.

106
00:04:06,545 --> 00:04:10,865
I'm gonna go to Advanced
and variety of got margin.

107
00:04:10,865 --> 00:04:13,495
Now please note that by default,

108
00:04:13,490 --> 00:04:15,560
you can add margins
and patterns to

109
00:04:15,560 --> 00:04:19,040
all four sides of a
section to the left,

110
00:04:19,040 --> 00:04:21,380
right, top and bottom, right.

111
00:04:21,380 --> 00:04:25,450
Now if I was to add a margin
to either top or bottom,

112
00:04:25,445 --> 00:04:27,565
you can see they are chained,

113
00:04:27,560 --> 00:04:29,570
which means whatever
you add to top,

114
00:04:29,570 --> 00:04:31,690
it will be added to
the bottom as well.

115
00:04:31,685 --> 00:04:34,375
If you wanted to add values for

116
00:04:34,370 --> 00:04:37,070
one specific side, you
want to start from 0.

117
00:04:37,070 --> 00:04:39,310
First of all, Zero.

118
00:04:39,305 --> 00:04:41,215
You come in here and then you

119
00:04:41,210 --> 00:04:43,160
can see you can
unlink the values.

120
00:04:43,160 --> 00:04:46,190
So right now you can simply
add for top are right

121
00:04:46,190 --> 00:04:47,690
and left margins
for elemental are

122
00:04:47,690 --> 00:04:49,250
set to auto by default,

123
00:04:49,250 --> 00:04:51,040
you can't make an
ingenuous in there.

124
00:04:51,035 --> 00:04:53,605
But now notice that if I begin

125
00:04:53,600 --> 00:04:56,620
to add margins to the bottom
of the first section,

126
00:04:56,615 --> 00:04:58,645
notice that it's section holding

127
00:04:58,640 --> 00:05:01,490
the image is not
being pushed down.

128
00:05:01,490 --> 00:05:03,320
That's because I'm
creating space

129
00:05:03,320 --> 00:05:08,200
between this first section
and this second section.

130
00:05:08,195 --> 00:05:11,425
Also, if I wanted to,

131
00:05:11,420 --> 00:05:14,620
I could do the reverse
for the second section.

132
00:05:14,615 --> 00:05:16,915
I can go to Edit section here
near for the second one,

133
00:05:16,910 --> 00:05:19,480
go to Advanced. Unlink develops.

134
00:05:19,475 --> 00:05:22,255
And now instead of an
imagined at the bottom,

135
00:05:22,250 --> 00:05:24,320
I can add at the top.

136
00:05:24,320 --> 00:05:27,410
So now you can see we are
pushing this section holding

137
00:05:27,410 --> 00:05:29,020
the image downwards from

138
00:05:29,015 --> 00:05:31,315
the first section that says
what the margins are useful.

139
00:05:31,310 --> 00:05:34,130
They're useful creating
spacing between sections.

140
00:05:34,130 --> 00:05:36,860
One of patterns, because
they've got patterns.

141
00:05:36,860 --> 00:05:39,950
Patterns are used to
create space between

142
00:05:39,950 --> 00:05:43,940
an element and its
border or its column.

143
00:05:43,940 --> 00:05:47,290
As an example, I'm going to
use the text editor in here.

144
00:05:47,285 --> 00:05:49,255
All right, so I'm
gonna go in there.

145
00:05:49,250 --> 00:05:51,520
I'm gonna go to Advanced.

146
00:05:51,515 --> 00:05:53,465
And now right here,

147
00:05:53,465 --> 00:05:55,905
you can see I've got
the pattern available.

148
00:05:55,909 --> 00:05:57,789
I'm going to unlink the values.

149
00:05:57,785 --> 00:06:01,225
And now if I begin to
add padding right here,

150
00:06:01,220 --> 00:06:03,260
you can see I'm
creating space between

151
00:06:03,260 --> 00:06:05,800
the text editor and

152
00:06:05,795 --> 00:06:08,245
its own section right
here at the top.

153
00:06:08,240 --> 00:06:09,680
I can go to the bottom,

154
00:06:09,680 --> 00:06:11,300
do the exact same thing as well.

155
00:06:11,300 --> 00:06:12,770
So you can see right
now I'm basically

156
00:06:12,770 --> 00:06:14,090
creating space for my texts,

157
00:06:14,090 --> 00:06:16,660
a tool within its own section.

158
00:06:16,655 --> 00:06:19,375
That's what patterns
are used for.

159
00:06:19,370 --> 00:06:22,370
They use to create space for

160
00:06:22,370 --> 00:06:26,180
an elements inside of its
own column or their section.

161
00:06:26,180 --> 00:06:28,400
That's basically what
patterns are useful.

162
00:06:28,400 --> 00:06:29,750
So that's the difference
between margins are patterns.

163
00:06:29,750 --> 00:06:32,540
Margins are used to create
space between sections.

164
00:06:32,540 --> 00:06:36,100
Patterns are used to create
space between a section

165
00:06:36,095 --> 00:06:39,985
and the element
contained inside of it.

166
00:06:39,980 --> 00:06:42,650
Hopefully, you now have

167
00:06:42,650 --> 00:06:46,930
a good understanding of what
our margins and paddings up.

168
00:06:46,925 --> 00:06:48,155
One more quick thin,

169
00:06:48,155 --> 00:06:49,885
you could also rearrange

170
00:06:49,880 --> 00:06:52,760
sections by simply
clicking and dragging.

171
00:06:52,760 --> 00:06:56,210
If I wanted to move the
section holding the margin,

172
00:06:56,210 --> 00:06:57,940
I'm also holding the
image to the top.

173
00:06:57,935 --> 00:07:01,045
I'll simply click and hold
the edit section button.

174
00:07:01,040 --> 00:07:03,140
Now you can see it's
allowing me to move.

175
00:07:03,140 --> 00:07:04,970
I can move it all the
way up your nose.

176
00:07:04,970 --> 00:07:07,660
Wait for the blue dash or
the BlueLine to appear,

177
00:07:07,655 --> 00:07:10,765
and then simply release an
intro of the image light day.

178
00:07:10,760 --> 00:07:12,200
You do have this option in here

179
00:07:12,200 --> 00:07:13,580
with elementwise
what that allows

180
00:07:13,580 --> 00:07:16,130
you to rearrange our sections.

181
00:07:16,130 --> 00:07:18,890
You could also rearrange columns

182
00:07:18,890 --> 00:07:21,740
and I'm just quickly duplicates
this column in here.

183
00:07:21,740 --> 00:07:22,940
Let me change this image real

184
00:07:22,940 --> 00:07:24,260
quick just to give you a very,

185
00:07:24,260 --> 00:07:27,590
very quick demonstration,
let me choose this image.

186
00:07:27,590 --> 00:07:29,090
So I can simply

187
00:07:29,090 --> 00:07:31,360
click where you have
the Edit Column button.

188
00:07:31,355 --> 00:07:32,765
And then we arrange.

189
00:07:32,764 --> 00:07:35,364
They can see where range
back as you can see.

190
00:07:35,360 --> 00:07:37,370
So you do have that option

191
00:07:37,370 --> 00:07:39,980
available with
elemental as well.

192
00:07:39,980 --> 00:07:41,330
So don't worry as we begin to

193
00:07:41,330 --> 00:07:42,650
walk with elements or you begin,

194
00:07:42,650 --> 00:07:44,570
it begins to discover
a lot more features

195
00:07:44,570 --> 00:07:46,640
and functionalities of elements.

196
00:07:46,640 --> 00:07:47,540
And thank you for watching.

197
00:07:47,540 --> 00:07:50,040
I'll see you in the next class.