1
00:00:00,000 --> 00:00:00,750
Welcome back.

2
00:00:00,750 --> 00:00:02,010
So now that I've shown you

3
00:00:02,010 --> 00:00:05,480
a brief introduction to the
user interface of Elementor.

4
00:00:05,475 --> 00:00:08,915
Let's take a look at the global
variables and how you can

5
00:00:08,910 --> 00:00:12,690
set the kinds of font
families you want to use,

6
00:00:12,689 --> 00:00:14,759
the colors and so on.

7
00:00:14,760 --> 00:00:18,050
Now, on the same UI
interface right here,

8
00:00:18,045 --> 00:00:21,815
you're going to go to
the Menu button up here,

9
00:00:21,810 --> 00:00:25,620
and then now go over
to your site settings.

10
00:00:25,620 --> 00:00:27,680
Right? Now Here's the thin.

11
00:00:27,675 --> 00:00:29,825
We could set global colors,

12
00:00:29,820 --> 00:00:31,410
colors that can be used all

13
00:00:31,410 --> 00:00:33,360
across our website to do that,

14
00:00:33,360 --> 00:00:34,960
click on global colors.

15
00:00:34,960 --> 00:00:37,280
Now this would be the
default clause that you

16
00:00:37,280 --> 00:00:39,770
would have a blue,

17
00:00:39,770 --> 00:00:44,270
darkish gray, light
gray, and then lime.

18
00:00:44,269 --> 00:00:46,209
So this would be
for your primary

19
00:00:46,205 --> 00:00:48,605
our head does your
secondary headers,

20
00:00:48,605 --> 00:00:50,815
your texts, this would be
a regular body takes on

21
00:00:50,810 --> 00:00:54,020
an accent is usually for
like links or buttons.

22
00:00:54,020 --> 00:00:56,330
Now, what I'm gonna do is
I'm actually going to change

23
00:00:56,330 --> 00:00:59,300
these to some clothes
I have over here.

24
00:00:59,300 --> 00:01:01,970
Now to change them, I'm
going to click inside.

25
00:01:01,970 --> 00:01:04,280
And if a primary, I'm
gonna go with white.

26
00:01:04,280 --> 00:01:06,610
Okay, So why it is
going to be fff,

27
00:01:06,605 --> 00:01:11,405
FFF six Fs is basically for
White Album my primary.

28
00:01:11,405 --> 00:01:13,205
And then for secondary,

29
00:01:13,205 --> 00:01:15,845
we're actually going
to keep this as it is.

30
00:01:15,845 --> 00:01:18,565
But then for texts, we're
gonna go with black.

31
00:01:18,560 --> 00:01:21,530
Black is going to be six zeros.

32
00:01:21,530 --> 00:01:26,660
So 123456, these are what we
call the hexadecimal values.

33
00:01:26,660 --> 00:01:28,070
Okay, so six zeros for black,

34
00:01:28,070 --> 00:01:29,590
six F's for white.

35
00:01:29,585 --> 00:01:32,065
And then lastly for the accents,

36
00:01:32,060 --> 00:01:33,430
which would be for the links.

37
00:01:33,425 --> 00:01:35,845
I do have my color in here.

38
00:01:35,840 --> 00:01:39,200
Let me just quickly grab the
color for my other screen.

39
00:01:39,200 --> 00:01:41,780
Come right here and paste that.

40
00:01:41,780 --> 00:01:42,800
So it's a shade of orange,

41
00:01:42,800 --> 00:01:47,570
It's basically a DECA 570.

42
00:01:47,570 --> 00:01:49,040
Now, you could decide to

43
00:01:49,040 --> 00:01:50,600
add your own custom
colors as well.

44
00:01:50,600 --> 00:01:53,530
It can come in here,
click on Add color.

45
00:01:53,525 --> 00:01:55,175
You can name this one like

46
00:01:55,175 --> 00:01:57,005
anything could give
a like or let's say

47
00:01:57,005 --> 00:02:02,975
the special special color.

48
00:02:03,490 --> 00:02:06,290
I'll show you how this
works a bit later.

49
00:02:06,290 --> 00:02:08,110
Let us call this
one special colo.

50
00:02:08,105 --> 00:02:10,265
And in here I'm gonna
click on the box.

51
00:02:10,265 --> 00:02:13,145
And let's just choose
something reddish.

52
00:02:13,145 --> 00:02:16,885
So I have my own custom
color called special column.

53
00:02:16,880 --> 00:02:20,260
I'm going to go ahead
now and simply updates.

54
00:02:20,255 --> 00:02:22,285
We've set our global
clause, which,

55
00:02:22,280 --> 00:02:24,190
which we can use
throughout the site.

56
00:02:24,185 --> 00:02:27,625
But then we also have
access to global fonts.

57
00:02:27,620 --> 00:02:29,480
Font families are very,
very, very important.

58
00:02:29,480 --> 00:02:30,680
So check this item.

59
00:02:30,680 --> 00:02:32,260
I'm gonna go down global fonts.

60
00:02:32,255 --> 00:02:34,525
The first one here is
going to be primary.

61
00:02:34,520 --> 00:02:36,020
This would be for
your primary headers.

62
00:02:36,020 --> 00:02:38,210
Now let's just take a look
at my other screen in here,

63
00:02:38,210 --> 00:02:39,440
because I have chosen to

64
00:02:39,440 --> 00:02:43,750
go for the font family of
citizens go with Oswald.

65
00:02:43,745 --> 00:02:46,555
Oswald is a particular
Google font that I like.

66
00:02:46,550 --> 00:02:49,600
I'm gonna choose Oswald
for the font-family.

67
00:02:49,595 --> 00:02:52,255
The weight here is
going to be 700s,

68
00:02:52,250 --> 00:02:54,140
there's gonna be a
little bit heavier.

69
00:02:54,140 --> 00:02:57,400
Then I'm going to transform
these two uppercase.

70
00:02:57,395 --> 00:02:58,765
And then I'll leave
the other ones

71
00:02:58,760 --> 00:03:00,230
line-height, letter spacing,

72
00:03:00,230 --> 00:03:03,190
what spacing, and so on the
slip those as they are up.

73
00:03:03,185 --> 00:03:05,795
Next is going to
be the secondary.

74
00:03:05,795 --> 00:03:08,045
And then secondary again,

75
00:03:08,045 --> 00:03:11,165
I'm going to go with Oswald.

76
00:03:11,470 --> 00:03:13,850
Also all for secondary.

77
00:03:13,850 --> 00:03:15,320
And then the size here,

78
00:03:15,320 --> 00:03:17,870
I'm actually going to
go with our 20 pixels

79
00:03:17,870 --> 00:03:20,690
because there's gonna be a
little bit smaller pixels.

80
00:03:20,690 --> 00:03:23,420
And then the weights
here would be our 600.

81
00:03:23,420 --> 00:03:25,450
And there you go.

82
00:03:25,445 --> 00:03:27,115
That's for the secondary.

83
00:03:27,110 --> 00:03:29,810
And then text, this will
be our regular text.

84
00:03:29,810 --> 00:03:31,640
I'm actually going to
switch from families of

85
00:03:31,640 --> 00:03:35,740
our two new D2 sands.

86
00:03:35,735 --> 00:03:41,975
So let's search for new door.

87
00:03:41,975 --> 00:03:45,065
I said, I'm sorry,
isn't new veto Nieto.

88
00:03:45,065 --> 00:03:46,025
I'm sorry.

89
00:03:46,025 --> 00:03:48,805
Even wear my glasses. I
still can't see properly.

90
00:03:48,800 --> 00:03:51,970
Millions of sensors is
gonna be full text.

91
00:03:51,965 --> 00:03:54,475
And then the size here would be

92
00:03:54,470 --> 00:03:59,390
18 pixels and the width
is going to be 500.

93
00:03:59,390 --> 00:04:02,180
And that is that
last but not least,

94
00:04:02,180 --> 00:04:04,070
we do have the accents.

95
00:04:04,070 --> 00:04:06,110
Accents is going to be Roboto.

96
00:04:06,110 --> 00:04:07,310
Let's stick with Roboto for that

97
00:04:07,310 --> 00:04:09,450
one and then wait
till will be 500.

98
00:04:09,445 --> 00:04:11,405
So we're not changing
anything in here.

99
00:04:11,405 --> 00:04:13,855
I'm going to go ahead
now and update.

100
00:04:13,850 --> 00:04:16,040
The point here is
that we can actually

101
00:04:16,040 --> 00:04:18,230
use this font families,

102
00:04:18,230 --> 00:04:21,620
this font colors
anywhere on our site.

103
00:04:21,620 --> 00:04:23,120
As an example.

104
00:04:23,120 --> 00:04:25,220
Let me close this

105
00:04:25,219 --> 00:04:28,509
and let me go ahead
now and add a heading.

106
00:04:28,505 --> 00:04:29,935
So I'm going to click drag,

107
00:04:29,930 --> 00:04:32,350
drop the head and
elements in here.

108
00:04:32,345 --> 00:04:34,105
Now take a look at this.

109
00:04:34,100 --> 00:04:37,310
If I was to go to
Style, alright,

110
00:04:37,310 --> 00:04:41,270
right here you can see we
have the typography option to

111
00:04:41,270 --> 00:04:43,340
choose what kind of
topography wanted to

112
00:04:43,340 --> 00:04:45,860
work with all the text color.

113
00:04:45,860 --> 00:04:47,120
Now take a look at
these. If I click

114
00:04:47,120 --> 00:04:48,440
on this icon right here,

115
00:04:48,440 --> 00:04:51,050
this global looking
icon, I click in there.

116
00:04:51,050 --> 00:04:54,670
Now see we can choose
from the five options,

117
00:04:54,665 --> 00:04:56,755
primary, secondary
texts, accent,

118
00:04:56,750 --> 00:04:59,240
and even the special
color that we added.

119
00:04:59,240 --> 00:05:00,700
That's how you can make use

120
00:05:00,695 --> 00:05:02,395
of the global caused octave just

121
00:05:02,390 --> 00:05:06,670
set same goals with the
typographic clicking here again.

122
00:05:06,665 --> 00:05:10,085
And now I can choose either
to go with the primary texts,

123
00:05:10,085 --> 00:05:13,835
secondary texts, regular
texts, or the accent.

124
00:05:13,835 --> 00:05:16,885
That's how these would work.

125
00:05:16,880 --> 00:05:20,490
But let me show you something
even more interesting.

126
00:05:20,494 --> 00:05:24,024
If I go back to
the site settings,

127
00:05:24,020 --> 00:05:26,300
just underneath
the design system,

128
00:05:26,300 --> 00:05:28,730
you have your theme style.

129
00:05:28,730 --> 00:05:32,320
If I click on
typography in here,

130
00:05:32,315 --> 00:05:34,105
this is where we can now set

131
00:05:34,100 --> 00:05:36,440
specific font families, colors,

132
00:05:36,440 --> 00:05:40,300
sizes for our H1 or H2 tag,

133
00:05:40,295 --> 00:05:41,935
h3 and so on.

134
00:05:41,930 --> 00:05:43,900
But in order for us
to be able to make

135
00:05:43,895 --> 00:05:46,775
use of this particular system,

136
00:05:46,775 --> 00:05:49,145
we're going to need to disable

137
00:05:49,145 --> 00:05:54,275
the default colors and fonts
from the settings page.

138
00:05:54,275 --> 00:05:57,265
Remember, let me just quickly
go ahead update this.

139
00:05:57,260 --> 00:05:58,490
I will show what
I'm talking about.

140
00:05:58,490 --> 00:06:03,110
If we go back to the backend,

141
00:06:03,110 --> 00:06:04,960
let me come right here,

142
00:06:04,955 --> 00:06:07,615
go to Exit to Dashboard.

143
00:06:07,610 --> 00:06:10,970
If you go back to
your elemental sets

144
00:06:10,970 --> 00:06:13,540
in Elementor settings,

145
00:06:13,535 --> 00:06:15,295
right here,

146
00:06:15,290 --> 00:06:17,750
we're going to have to disable
the default colors and

147
00:06:17,750 --> 00:06:19,640
fonts in order to make use of

148
00:06:19,640 --> 00:06:21,710
this new theme style editor.

149
00:06:21,710 --> 00:06:23,630
So I'm gonna check
this two boxes.

150
00:06:23,630 --> 00:06:25,720
Save those changes.

151
00:06:25,715 --> 00:06:28,015
And now let me close this.

152
00:06:28,010 --> 00:06:31,110
Let me refresh this page again.

153
00:06:31,150 --> 00:06:33,080
Now take a look at this.

154
00:06:33,080 --> 00:06:34,610
If I go back in here, go to

155
00:06:34,610 --> 00:06:37,780
Site Settings and accompany
on native topography.

156
00:06:37,775 --> 00:06:41,725
Now I am able to set a specific
text color for the body,

157
00:06:41,720 --> 00:06:45,220
tech size, for the
links, and so on.

158
00:06:45,215 --> 00:06:48,275
Also, if I go back,

159
00:06:48,275 --> 00:06:52,195
if I go back to the regular
lab back-end and then just

160
00:06:52,190 --> 00:06:55,990
close this and then added
my heading again in here.

161
00:06:55,985 --> 00:06:57,835
If I go to style,

162
00:06:57,830 --> 00:07:00,100
right, you haven't
go to text color.

163
00:07:00,095 --> 00:07:03,275
I still have access to
the colors upset Alia.

164
00:07:03,275 --> 00:07:06,925
And then also for
the typography,

165
00:07:06,920 --> 00:07:08,240
I still have access to

166
00:07:08,240 --> 00:07:12,740
the secondary texts.
Basically the same options.

167
00:07:12,740 --> 00:07:14,690
I said ls, you'll
have access to them.

168
00:07:14,690 --> 00:07:15,980
So basic litigious.

169
00:07:15,980 --> 00:07:17,930
Go back to the set

170
00:07:17,930 --> 00:07:19,730
that one more time and then
I just wanted to treat it.

171
00:07:19,730 --> 00:07:21,110
I still have access
to those options.

172
00:07:21,110 --> 00:07:23,510
Let's go back to the
theme style typography.

173
00:07:23,510 --> 00:07:27,290
I do have my options in
here that I've already set.

174
00:07:27,290 --> 00:07:28,790
So what I'm gonna
do here is this.

175
00:07:28,790 --> 00:07:30,670
Okay, Let's first of all choose

176
00:07:30,665 --> 00:07:33,085
the typography for our body.

177
00:07:33,080 --> 00:07:35,230
So right here for body,

178
00:07:35,225 --> 00:07:37,775
I'm going to go over
here to text column.

179
00:07:37,775 --> 00:07:40,925
We're gonna choose our black
that'll be for the text.

180
00:07:40,925 --> 00:07:42,275
For the typography.

181
00:07:42,275 --> 00:07:44,605
I'm simply gonna go with texts.

182
00:07:44,600 --> 00:07:47,950
Remember we said texts to
be Newtonian to sands,

183
00:07:47,945 --> 00:07:52,085
size of 18 pixels and
then the weight of 500.

184
00:07:52,085 --> 00:07:54,305
That's going to be for the body.

185
00:07:54,305 --> 00:07:55,295
Good.

186
00:07:55,294 --> 00:07:57,004
Now for the link.

187
00:07:57,005 --> 00:08:00,385
And just check what I have
in here for the link.

188
00:08:00,380 --> 00:08:02,050
I'm gonna go with color,

189
00:08:02,045 --> 00:08:05,245
the accent color typography.

190
00:08:05,240 --> 00:08:07,180
I'm going to go with
accent as well.

191
00:08:07,175 --> 00:08:10,075
Now for the age warns, okay,

192
00:08:10,070 --> 00:08:14,680
this is gonna be a little
bit different for the F1's.

193
00:08:14,675 --> 00:08:16,195
What I've done right here is for

194
00:08:16,190 --> 00:08:18,170
the family upset that
I want to default.

195
00:08:18,170 --> 00:08:23,670
But the size here is
going to be 100 pixels.

196
00:08:23,800 --> 00:08:26,940
Very, very, very,
very, very massive.

197
00:08:26,944 --> 00:08:30,274
And then the weight here
is going to be 600.

198
00:08:30,275 --> 00:08:33,565
We're hardly going to
use H ones on our site,

199
00:08:33,560 --> 00:08:36,670
so don't worry about
the huge size.

200
00:08:36,665 --> 00:08:39,535
I'm going to keep
that one at 100.

201
00:08:39,530 --> 00:08:43,970
Now let's go over to the H2.

202
00:08:43,970 --> 00:08:47,870
For H2, I do have the size here.

203
00:08:47,870 --> 00:08:49,730
I'm going to click
on typography.

204
00:08:49,730 --> 00:08:53,830
The size here, I've set
it up to 32 pixels.

205
00:08:53,825 --> 00:09:00,625
32 pixels, and then I do have
the weight here to be 700.

206
00:09:00,620 --> 00:09:03,020
Basically, this is
the main header

207
00:09:03,020 --> 00:09:04,790
we're gonna be working with.

208
00:09:04,790 --> 00:09:07,040
Actually, my apologies,
I said it to 36,

209
00:09:07,040 --> 00:09:10,670
sorry, six-by-six pixels for H2.

210
00:09:10,670 --> 00:09:15,670
Then for the age
three, Check this out.

211
00:09:15,665 --> 00:09:17,615
For age three,

212
00:09:17,615 --> 00:09:19,165
the color here is going to be

213
00:09:19,160 --> 00:09:21,430
the accent color,
the orange color.

214
00:09:21,425 --> 00:09:28,955
Then the size here is
going to be 22 pixels.

215
00:09:30,220 --> 00:09:36,440
Then the family here is
going to be primary,

216
00:09:36,440 --> 00:09:39,320
which would be also
old limit also said

217
00:09:39,320 --> 00:09:41,390
the primary font family here

218
00:09:41,390 --> 00:09:43,460
to be our Oswald I
will be for the H12.

219
00:09:43,460 --> 00:09:45,170
So basically h twos,

220
00:09:45,170 --> 00:09:47,230
we'd be 36 size and pixel,

221
00:09:47,225 --> 00:09:48,965
the family of Oswald.

222
00:09:48,964 --> 00:09:52,644
There'll be uppercase
and then 708 and waits.

223
00:09:52,640 --> 00:09:56,620
And then finally, I've
also said for the H4,

224
00:09:56,615 --> 00:10:00,265
same color would
be the axon color.

225
00:10:00,260 --> 00:10:04,220
And then the size here is
going to be our 18 pixels.

226
00:10:04,220 --> 00:10:08,990
Okay, so let's
choose Oswald again.

227
00:10:08,990 --> 00:10:13,370
Then the size here
would be our 18 pixels,

228
00:10:13,370 --> 00:10:15,940
the same size as our body texts.

229
00:10:15,935 --> 00:10:17,815
And then one more.

230
00:10:17,810 --> 00:10:20,420
The very, very last one
will be the age five,

231
00:10:20,420 --> 00:10:22,070
which I don't really think

232
00:10:22,070 --> 00:10:23,810
we're going to walk
with that multiple

233
00:10:23,810 --> 00:10:26,450
legislated up H5 and then
topography would be the

234
00:10:26,450 --> 00:10:29,690
same secondary or
primary if you want.

235
00:10:29,690 --> 00:10:34,340
And then the size here
would be 16 pixels.

236
00:10:34,340 --> 00:10:36,320
There you go.

237
00:10:36,315 --> 00:10:39,235
So I'm gonna go ahead now
and simply update this.

238
00:10:39,230 --> 00:10:40,910
And that's it now, I
know this was a very,

239
00:10:40,910 --> 00:10:42,200
very long video with me just

240
00:10:42,200 --> 00:10:44,180
talking about car
loans and stuff.

241
00:10:44,180 --> 00:10:48,020
But it points here
is that on our site,

242
00:10:48,020 --> 00:10:51,590
if wherever add an
H2 automatically,

243
00:10:51,590 --> 00:10:53,630
it's going to inherit
the values from here.

244
00:10:53,630 --> 00:10:55,460
So our H2 is right now,

245
00:10:55,460 --> 00:10:57,920
would have the font
family of Oswald,

246
00:10:57,920 --> 00:11:01,270
size of 36 pixels and
then a weight of 700.

247
00:11:01,265 --> 00:11:03,295
And then the same goes
with the age threes,

248
00:11:03,290 --> 00:11:04,610
fours and so on.

249
00:11:04,610 --> 00:11:07,990
Mou basically set up
the global values fall

250
00:11:07,985 --> 00:11:11,665
or I hit us as well
as our body texts.

251
00:11:11,660 --> 00:11:14,060
But also, we have said
that global colors,

252
00:11:14,060 --> 00:11:16,100
which we can use
over and over again.

253
00:11:16,100 --> 00:11:17,690
We've said five of them primary,

254
00:11:17,690 --> 00:11:19,030
secondary texts accent,

255
00:11:19,025 --> 00:11:21,455
especially when I don't
use special ecologist In,

256
00:11:21,455 --> 00:11:23,455
wanted to show you
how you can audio on

257
00:11:23,450 --> 00:11:27,190
additional custom colors
if you wanted to.

258
00:11:27,185 --> 00:11:29,435
But as basically are setting up

259
00:11:29,435 --> 00:11:32,645
our global font families,
colors and sizes.

260
00:11:32,644 --> 00:11:34,134
Germany, very next
video where we'll

261
00:11:34,130 --> 00:11:35,560
now begin to build out

262
00:11:35,555 --> 00:11:39,635
the header full of website.