1
00:00:00,000 --> 00:00:01,730
All right, so with
all the boring stuff

2
00:00:01,725 --> 00:00:02,885
out of the way, lemon,

3
00:00:02,880 --> 00:00:05,640
I'll show you the UI for

4
00:00:05,640 --> 00:00:07,320
elemental of the
user interface and

5
00:00:07,320 --> 00:00:09,570
how elements are actually works.

6
00:00:09,570 --> 00:00:12,440
Now I'm on my pages right
here and what I'm gonna do

7
00:00:12,435 --> 00:00:16,175
is I'm gonna go ahead
and edit the homepage.

8
00:00:16,170 --> 00:00:19,110
What you're gonna do is what
you will see light up here.

9
00:00:19,110 --> 00:00:21,710
You will see Edit
with Elementor.

10
00:00:21,705 --> 00:00:23,495
It's gonna be this big
blue button right here.

11
00:00:23,490 --> 00:00:25,590
So let's go ahead
and click on that.

12
00:00:25,590 --> 00:00:27,780
And what will happen here
is that elemental will be

13
00:00:27,780 --> 00:00:31,470
launched to walk on
this particular page.

14
00:00:31,470 --> 00:00:33,390
Okay, this is the homepage.

15
00:00:33,385 --> 00:00:35,155
Now on the left,
obviously you can

16
00:00:35,150 --> 00:00:39,310
see the box for
elemental, the UI.

17
00:00:39,305 --> 00:00:41,525
The very first I want
to show you here

18
00:00:41,525 --> 00:00:43,795
is the three buttons right here,

19
00:00:43,790 --> 00:00:47,100
the menu basically,
you click in there.

20
00:00:47,320 --> 00:00:50,720
You will have access to things
like the site settings,

21
00:00:50,719 --> 00:00:52,879
FIM buildup, which we'll
talk about a bit later.

22
00:00:52,880 --> 00:00:54,890
But very quickly,
Let's come down

23
00:00:54,890 --> 00:00:57,040
here to use up references.

24
00:00:57,035 --> 00:00:59,215
And I don't know about you.

25
00:00:59,210 --> 00:01:01,090
Maybe you like the light theme.

26
00:01:01,085 --> 00:01:02,395
I do like the dark theme.

27
00:01:02,390 --> 00:01:04,580
So what I'm gonna do here
is for the UI theme,

28
00:01:04,580 --> 00:01:07,190
I'm gonna switch
form, auto detect.

29
00:01:07,190 --> 00:01:08,300
Too dark.

30
00:01:08,300 --> 00:01:10,520
I prefer just a black background

31
00:01:10,520 --> 00:01:12,350
and white text is
just so much cooler.

32
00:01:12,350 --> 00:01:13,810
In my opinion, again,

33
00:01:13,805 --> 00:01:15,555
this is entirely subjective,

34
00:01:15,559 --> 00:01:17,349
but I'm gonna keep it that dark.

35
00:01:17,345 --> 00:01:18,985
Let's go back.

36
00:01:18,980 --> 00:01:21,730
In here. You can find

37
00:01:21,725 --> 00:01:23,885
something within
element to anywhere.

38
00:01:23,885 --> 00:01:25,705
Anyway, elements if you want to,

39
00:01:25,700 --> 00:01:27,350
you can view the page,

40
00:01:27,350 --> 00:01:29,630
then you can exit
to the dashboard.

41
00:01:29,630 --> 00:01:31,940
But let's go back.

42
00:01:31,940 --> 00:01:33,010
Now.

43
00:01:33,005 --> 00:01:37,385
Right here, you have elements
and then you have global.

44
00:01:37,385 --> 00:01:40,075
Global only works with the
paid version of element.

45
00:01:40,070 --> 00:01:41,270
And that's when if
you want to save

46
00:01:41,270 --> 00:01:43,400
your particular block
of content and use

47
00:01:43,400 --> 00:01:47,830
that same block on another
page anywhere on your website.

48
00:01:47,825 --> 00:01:50,005
That's what global
basically refers to.

49
00:01:50,000 --> 00:01:52,520
But don't worry, we'll
talk about on a bit later.

50
00:01:52,520 --> 00:01:54,590
But these are your elements.

51
00:01:54,590 --> 00:01:57,830
You've got basic elements
like your intersection.

52
00:01:57,830 --> 00:02:00,350
You'll head in
image text editor.

53
00:02:00,350 --> 00:02:02,020
So say for example,

54
00:02:02,015 --> 00:02:05,105
you wanted to add an
image to your page.

55
00:02:05,105 --> 00:02:07,765
You would simply click on
the image element and then

56
00:02:07,760 --> 00:02:11,080
simply drop it inside
the box right there.

57
00:02:11,075 --> 00:02:12,775
And then from here, you can

58
00:02:12,770 --> 00:02:14,810
choose the image that
you want to work with.

59
00:02:14,810 --> 00:02:16,460
So just as an example,

60
00:02:16,460 --> 00:02:18,890
let me choose the
image of this girl

61
00:02:18,890 --> 00:02:22,030
right here holding
the Brazilian flag.

62
00:02:22,025 --> 00:02:23,785
And there it is.

63
00:02:23,780 --> 00:02:26,510
The thing is most of the
elements it will welcome with

64
00:02:26,510 --> 00:02:29,510
typically 3.5 main compartments.

65
00:02:29,510 --> 00:02:30,770
If I concluded outweigh,

66
00:02:30,770 --> 00:02:33,320
you will have the content area.

67
00:02:33,320 --> 00:02:37,360
In this case, this is where
you can add either texts,

68
00:02:37,355 --> 00:02:41,705
image, video files,
audio and so on.

69
00:02:41,705 --> 00:02:44,065
Then you will have style where

70
00:02:44,060 --> 00:02:46,240
you can do things like
maybe changed the coal law,

71
00:02:46,235 --> 00:02:48,155
change the size, add

72
00:02:48,155 --> 00:02:50,765
a background image since
the height and so on.

73
00:02:50,765 --> 00:02:53,835
And then you will have
the Advanced tab.

74
00:02:53,839 --> 00:02:55,279
But you can do things like add

75
00:02:55,280 --> 00:02:57,450
margins, patterns, no spacing.

76
00:02:57,454 --> 00:02:59,614
You could also add
some motion effects,

77
00:02:59,615 --> 00:03:01,345
are some borders and so on.

78
00:03:01,340 --> 00:03:02,980
So you usually,

79
00:03:02,975 --> 00:03:04,975
most of the elements
you've been working with

80
00:03:04,970 --> 00:03:08,890
will have these three different
tabs or compartments.

81
00:03:08,885 --> 00:03:10,435
So going back in

82
00:03:10,430 --> 00:03:11,780
here and you click on
the button up here,

83
00:03:11,780 --> 00:03:13,670
this will give you access
to all the elements.

84
00:03:13,670 --> 00:03:16,580
So you can see we've got
the basic elements in here,

85
00:03:16,580 --> 00:03:18,620
Video button, spacer, and so on.

86
00:03:18,620 --> 00:03:21,460
Now, you can see the ones on

87
00:03:21,455 --> 00:03:24,145
parole under the paid version of

88
00:03:24,140 --> 00:03:27,280
elemental posts
portfolio gallery.

89
00:03:27,275 --> 00:03:28,675
So many of them.

90
00:03:28,670 --> 00:03:30,110
So you can see right
now, because we're not

91
00:03:30,110 --> 00:03:32,120
using the paid
version of elemental,

92
00:03:32,120 --> 00:03:34,820
we don't have access
to all these elements.

93
00:03:34,820 --> 00:03:36,400
But thankfully,

94
00:03:36,395 --> 00:03:38,995
because we are working

95
00:03:38,990 --> 00:03:41,870
with the essential
add-ons plug-in,

96
00:03:41,870 --> 00:03:43,600
we do have access to

97
00:03:43,595 --> 00:03:47,725
quite many additional
elements for free.

98
00:03:47,720 --> 00:03:50,590
You can see right here
on the essential atoms.

99
00:03:50,585 --> 00:03:53,285
You've got things like
the advanced accordion,

100
00:03:53,285 --> 00:03:56,755
call to action, bottom
creative button, and so on.

101
00:03:56,750 --> 00:03:58,400
So we're going to
walk in with quite

102
00:03:58,400 --> 00:04:00,260
a few of these elements.

103
00:04:00,260 --> 00:04:03,740
But going back to elements
or under general,

104
00:04:03,740 --> 00:04:06,350
we do have access to
more blocks as well.

105
00:04:06,350 --> 00:04:08,330
I'm just close this coordinate.

106
00:04:08,330 --> 00:04:09,710
So the general with

107
00:04:09,710 --> 00:04:11,720
the free version of elements
that we have access to,

108
00:04:11,720 --> 00:04:13,850
more elements like the icon box,

109
00:04:13,850 --> 00:04:16,720
testimonial, social
icons and so on.

110
00:04:16,715 --> 00:04:18,415
Let me close this one.

111
00:04:18,410 --> 00:04:19,670
And then you've got site.

112
00:04:19,670 --> 00:04:22,550
Unfortunately these elements are

113
00:04:22,550 --> 00:04:25,150
only available with the
paid version of elemental.

114
00:04:25,145 --> 00:04:26,945
You've got WooCommerce, again,

115
00:04:26,945 --> 00:04:29,915
only available with the
paid version of elemental.

116
00:04:29,915 --> 00:04:31,685
We've talked about
the essential atoms.

117
00:04:31,685 --> 00:04:34,015
So this is the other plug-in.

118
00:04:34,010 --> 00:04:35,890
We installed the
header and footer.

119
00:04:35,885 --> 00:04:37,765
This plugin will
allow us to build

120
00:04:37,760 --> 00:04:39,890
a custom header and
the Custom Footer

121
00:04:39,890 --> 00:04:42,050
for our website
will have access to

122
00:04:42,050 --> 00:04:44,830
elements like the
Navigation Menu elements,

123
00:04:44,825 --> 00:04:47,825
page title, site title,

124
00:04:47,825 --> 00:04:49,795
site logo, and so on.

125
00:04:49,790 --> 00:04:51,560
And then last but not least,

126
00:04:51,560 --> 00:04:52,850
we do have access to

127
00:04:52,850 --> 00:04:56,570
the WordPress widgets
like your pages,

128
00:04:56,570 --> 00:05:00,820
Callender audio made
our search, and so on.

129
00:05:00,815 --> 00:05:03,765
Okay, that's that
for the elements.

130
00:05:03,769 --> 00:05:09,219
Now, down here, you have
access to a few more settings.

131
00:05:09,215 --> 00:05:11,375
It may sound kind of
overwhelming, but don't worry,

132
00:05:11,375 --> 00:05:12,805
once you begin welcome
with elemental,

133
00:05:12,800 --> 00:05:14,230
It's actually not
as overwhelming.

134
00:05:14,225 --> 00:05:16,315
It's actually very,
very easy to work with.

135
00:05:16,310 --> 00:05:18,130
Here under settings.

136
00:05:18,125 --> 00:05:20,065
In here, you can do things

137
00:05:20,060 --> 00:05:22,310
like change the
title of the page,

138
00:05:22,310 --> 00:05:25,370
change the status from
published to Penn and review,

139
00:05:25,370 --> 00:05:27,440
you can add your featured image.

140
00:05:27,440 --> 00:05:29,690
You can also choose
to hide the title,

141
00:05:29,690 --> 00:05:31,720
which in fact, let's do that.

142
00:05:31,715 --> 00:05:32,845
Okay, I'm gonna hide the title.

143
00:05:32,840 --> 00:05:35,240
I mean, how many times do you
go on a website and then on

144
00:05:35,240 --> 00:05:38,510
the homepage it says
home trivalent do that.

145
00:05:38,510 --> 00:05:39,970
So let's just go ahead and hide

146
00:05:39,965 --> 00:05:42,905
the title and then
the page layout.

147
00:05:42,905 --> 00:05:44,845
I'll explain this
one a bit later

148
00:05:44,840 --> 00:05:47,300
as we progress in the course.

149
00:05:47,300 --> 00:05:50,090
Then you have the alarm,

150
00:05:50,090 --> 00:05:53,320
Sorry, you do have the
reading progress bar.

151
00:05:53,315 --> 00:05:56,815
This is provided by the
essential add-ons plug-in.

152
00:05:56,810 --> 00:05:59,870
Basically, the point here is
that you may have seen in

153
00:05:59,870 --> 00:06:01,130
some episodes before where

154
00:06:01,130 --> 00:06:02,960
as it begins to
scroll down the page,

155
00:06:02,960 --> 00:06:04,930
you'll see like a bar IDA

156
00:06:04,925 --> 00:06:07,585
moving horizontally
or vertically

157
00:06:07,580 --> 00:06:09,620
indicating how much of

158
00:06:09,620 --> 00:06:11,030
the quantity of
actually read and how

159
00:06:11,030 --> 00:06:12,470
much more content you
still have to eat.

160
00:06:12,470 --> 00:06:14,300
So you do have that
future inhale.

161
00:06:14,300 --> 00:06:16,330
We'll take a look at
that a bit later.

162
00:06:16,325 --> 00:06:18,475
And then Table of
Contents go to top.

163
00:06:18,470 --> 00:06:21,540
Don't worry, we'll talk
about those later.

164
00:06:21,544 --> 00:06:25,774
And then under style right here,

165
00:06:25,775 --> 00:06:27,625
you can change the body type.

166
00:06:27,620 --> 00:06:30,310
You can add a background
color if you want to.

167
00:06:30,305 --> 00:06:31,495
You come in here right now,

168
00:06:31,490 --> 00:06:34,880
choose like the primary
color of blue and so on.

169
00:06:34,880 --> 00:06:36,820
But for now I'm just going to

170
00:06:36,815 --> 00:06:39,215
go ahead and uncheck down one.

171
00:06:39,215 --> 00:06:41,395
And then finally, you've got the

172
00:06:41,390 --> 00:06:42,830
advanced where you can add

173
00:06:42,830 --> 00:06:44,930
your own costume,
our JavaScript code,

174
00:06:44,930 --> 00:06:47,900
or some custom CSS code,

175
00:06:47,900 --> 00:06:49,430
which unfortunately is
only available with

176
00:06:49,430 --> 00:06:52,170
the paid version of elemental.

177
00:06:52,174 --> 00:06:53,614
Okay, let's move on.

178
00:06:53,615 --> 00:06:54,625
Next to sentence.

179
00:06:54,620 --> 00:06:56,650
You, you've got the Navigator.

180
00:06:56,645 --> 00:06:59,605
Now the thing about navigate
TO is that once you begin to

181
00:06:59,600 --> 00:07:02,870
add elements and
content onto your page,

182
00:07:02,869 --> 00:07:06,589
the navigator bottom will
allow you to see basically

183
00:07:06,590 --> 00:07:08,840
the entire structure in

184
00:07:08,840 --> 00:07:11,750
a hierarchical format
of your entire page.

185
00:07:11,750 --> 00:07:14,120
So it can be very, very easy
for us to quickly look for

186
00:07:14,120 --> 00:07:16,850
a particular element or book
that you want to work with.

187
00:07:16,850 --> 00:07:19,430
That's what the navigation
or navigate important is.

188
00:07:19,430 --> 00:07:21,860
Therefore, Next is the history.

189
00:07:21,860 --> 00:07:24,440
So if you make things like

190
00:07:24,440 --> 00:07:27,610
change the color or basically
if you do anything at all,

191
00:07:27,605 --> 00:07:29,125
it will be in the History tab

192
00:07:29,120 --> 00:07:30,310
and you can see it right here,

193
00:07:30,305 --> 00:07:33,205
right from the very beginning
when we started editing,

194
00:07:33,200 --> 00:07:35,060
if we changed the
user preference

195
00:07:35,060 --> 00:07:36,380
for the UI theme from light,

196
00:07:36,380 --> 00:07:38,120
from our auto, too dark,

197
00:07:38,120 --> 00:07:39,710
you can see it's right there.

198
00:07:39,710 --> 00:07:41,090
We added an image,

199
00:07:41,090 --> 00:07:42,170
we hit the page title

200
00:07:42,170 --> 00:07:43,340
so you can easily
come in here right

201
00:07:43,340 --> 00:07:46,530
now and reverse any
one of these actions.

202
00:07:46,534 --> 00:07:47,604
And then you've got revisions.

203
00:07:47,600 --> 00:07:49,520
Revisions is a bit more,

204
00:07:49,520 --> 00:07:51,740
What's it now? A
bit more robust.

205
00:07:51,740 --> 00:07:53,560
Typically on the
revisions, this is where

206
00:07:53,555 --> 00:07:56,065
once you've updated and
you've saved your page,

207
00:07:56,060 --> 00:07:59,780
you will see those changes
on your vision stops.

208
00:07:59,780 --> 00:08:02,240
So he's a bit more
robust and actions.

209
00:08:02,240 --> 00:08:03,380
So that's the fat.

210
00:08:03,380 --> 00:08:04,720
And then in here,

211
00:08:04,715 --> 00:08:06,925
you've got the responsive mode.

212
00:08:06,920 --> 00:08:08,570
You click in here.

213
00:08:08,570 --> 00:08:12,490
Now you can choose
either desktop view,

214
00:08:12,485 --> 00:08:15,925
Tablet view, or the mobile view.

215
00:08:15,920 --> 00:08:18,620
And the thin is you can
even become very, very,

216
00:08:18,620 --> 00:08:22,330
very specific with the
width of your screen.

217
00:08:22,325 --> 00:08:24,355
So say for example, if
I chose table it right

218
00:08:24,350 --> 00:08:26,270
here you see these
handles left and right.

219
00:08:26,270 --> 00:08:31,370
You can actually move
to a certain dimension.

220
00:08:31,370 --> 00:08:32,750
And of course OPIA,
you will have

221
00:08:32,750 --> 00:08:34,490
the width and the height.

222
00:08:34,490 --> 00:08:37,100
If you have a specific kind
of device that you want

223
00:08:37,100 --> 00:08:39,380
to see how you

224
00:08:39,380 --> 00:08:41,300
have set will look like
on the particular device.

225
00:08:41,300 --> 00:08:42,670
We very specifically dimensions.

226
00:08:42,665 --> 00:08:44,005
You can come in here and change

227
00:08:44,000 --> 00:08:45,200
the dimensions for the width

228
00:08:45,200 --> 00:08:48,290
as well as the height as well.

229
00:08:48,290 --> 00:08:50,950
But I'm gonna go back, switch to

230
00:08:50,945 --> 00:08:54,335
the desktop and
then divide here.

231
00:08:54,335 --> 00:08:58,105
You can preview your changes
once you've made them.

232
00:08:58,100 --> 00:08:59,980
And then finally, you can update

233
00:08:59,975 --> 00:09:01,615
all light you under
Save Options.

234
00:09:01,610 --> 00:09:02,900
You can save as a draft

235
00:09:02,900 --> 00:09:05,390
or you can save as
a template strand.

236
00:09:05,390 --> 00:09:07,250
As a template means
that you can reuse

237
00:09:07,250 --> 00:09:10,910
the exact same content
on another page.

238
00:09:10,910 --> 00:09:13,990
So this is basically
like a breakdown

239
00:09:13,985 --> 00:09:18,655
of how elemental walks
behind the scenes,

240
00:09:18,650 --> 00:09:20,710
the user interface,
how to add elements.

241
00:09:20,705 --> 00:09:22,135
Again, don't worry
if it seems very,

242
00:09:22,130 --> 00:09:25,510
very overwhelming, Azure
begins to walk with elemental.

243
00:09:25,505 --> 00:09:28,595
It'll become very easy
for you to work with.

244
00:09:28,595 --> 00:09:30,515
That was basically
a crash course

245
00:09:30,515 --> 00:09:33,155
on the elemental user
interface. Thanks for watching.

246
00:09:33,155 --> 00:09:34,345
Join me in the next class,

247
00:09:34,340 --> 00:09:35,620
we will now begin to set

248
00:09:35,615 --> 00:09:39,065
our global variables.
I'll see you then.