1
00:00:00,000 --> 00:00:01,380
In the previous video,
we successfully

2
00:00:01,380 --> 00:00:03,900
created our two headers,

3
00:00:03,900 --> 00:00:05,600
one for the homepage

4
00:00:05,595 --> 00:00:07,865
and the other for the
rest of the website.

5
00:00:07,860 --> 00:00:10,530
But now we're going to
create our Global Footer.

6
00:00:10,530 --> 00:00:13,380
And the good news here is that
we only need to create one

7
00:00:13,380 --> 00:00:15,390
of footer and this is

8
00:00:15,390 --> 00:00:17,340
exactly what we're
trying to create.

9
00:00:17,340 --> 00:00:20,040
We're going to have this
image here on the left

10
00:00:20,040 --> 00:00:23,090
and then some contact
information, social media icons.

11
00:00:23,085 --> 00:00:26,225
And then the side copyright

12
00:00:26,220 --> 00:00:28,520
basically down here
at the bottom.

13
00:00:28,515 --> 00:00:30,465
Let's go ahead and
quickly do this.

14
00:00:30,465 --> 00:00:32,045
I'm going to click on Add New.

15
00:00:32,040 --> 00:00:36,200
And we're going to call
this one the global footer.

16
00:00:36,195 --> 00:00:39,035
Select option here
will be Footer

17
00:00:39,030 --> 00:00:42,260
and of course display
because the entire website.

18
00:00:42,260 --> 00:00:45,000
And we'll change the
template to full width.

19
00:00:44,995 --> 00:00:46,335
And there we go.

20
00:00:46,330 --> 00:00:47,680
Let's go ahead Publish.

21
00:00:47,680 --> 00:00:49,700
And now let's edit
with Elementor.

22
00:00:49,704 --> 00:00:52,064
Now, I want you to pay
very close attention

23
00:00:52,060 --> 00:00:54,340
to a massive difference

24
00:00:54,340 --> 00:00:57,130
between the header and

25
00:00:57,130 --> 00:01:00,240
the footer and the header
that we have here.

26
00:01:00,235 --> 00:01:02,775
We basically have
just two columns.

27
00:01:02,770 --> 00:01:04,570
The one on the left
holding the logo,

28
00:01:04,570 --> 00:01:07,240
the one on the right holding
the code, the main menu.

29
00:01:07,240 --> 00:01:09,580
But for the footer, notice

30
00:01:09,580 --> 00:01:11,080
that it is a little
bit different.

31
00:01:11,080 --> 00:01:12,700
Yes, we still have two columns,

32
00:01:12,700 --> 00:01:14,250
one holding this image,

33
00:01:14,245 --> 00:01:16,875
the other one holding
the contact information.

34
00:01:16,870 --> 00:01:18,660
But then down here,

35
00:01:18,655 --> 00:01:22,855
this copyright text is
actually a third column.

36
00:01:22,855 --> 00:01:26,215
It's not under this
first column here.

37
00:01:26,210 --> 00:01:29,920
It's actually a separate
column on its own.

38
00:01:29,915 --> 00:01:34,025
In order to create this kind
of multi column section,

39
00:01:34,025 --> 00:01:35,735
we're going to make use of

40
00:01:35,735 --> 00:01:39,845
a new element called the
e-mail section in the survey.

41
00:01:39,845 --> 00:01:41,905
It's actually the very first
element that you have,

42
00:01:41,900 --> 00:01:43,690
this one right
here in a section.

43
00:01:43,685 --> 00:01:47,425
I'm going to click drag
and then drop it inside.

44
00:01:47,420 --> 00:01:50,290
Okay, so first
things first though,

45
00:01:50,285 --> 00:01:53,335
is I'm gonna go ahead and
edit the very first section.

46
00:01:53,330 --> 00:01:54,560
If you're having trouble trying

47
00:01:54,560 --> 00:01:59,000
to click on the
parents sec section,

48
00:01:59,000 --> 00:02:02,090
basically, you can always use
your navigator right here

49
00:02:02,090 --> 00:02:03,140
and you can see
right here we have

50
00:02:03,140 --> 00:02:05,240
this section column
and then intersection.

51
00:02:05,240 --> 00:02:06,980
So I'm going to click
on section right now.

52
00:02:06,975 --> 00:02:08,655
We're going to change
the content width

53
00:02:08,650 --> 00:02:10,770
right here to full width.

54
00:02:10,765 --> 00:02:12,925
And then columns gap.

55
00:02:12,925 --> 00:02:15,265
We're gonna choose no gap.

56
00:02:15,265 --> 00:02:18,105
The reason is that if
you pay close attention,

57
00:02:18,100 --> 00:02:20,800
you can see right now the
way you have the image,

58
00:02:20,800 --> 00:02:22,180
there is no space,

59
00:02:22,180 --> 00:02:24,700
there is no padding
margins whatsoever.

60
00:02:24,700 --> 00:02:26,530
The image is directly

61
00:02:26,530 --> 00:02:28,590
right there at the
border of the bottom.

62
00:02:28,585 --> 00:02:30,745
That's where we're choosing
our node gap here.

63
00:02:30,745 --> 00:02:33,085
We don't want to have
any gaps at all.

64
00:02:33,085 --> 00:02:36,495
The same is going to go with
the inner section as well.

65
00:02:36,490 --> 00:02:37,890
But before we jump in there,

66
00:02:37,885 --> 00:02:40,735
Let's add a background color.

67
00:02:40,735 --> 00:02:42,595
I'm going to go to
Background type.

68
00:02:42,595 --> 00:02:45,205
And of course we're going
to choose are black.

69
00:02:45,205 --> 00:02:48,725
So I'm going to have a black
background for the footer.

70
00:02:48,720 --> 00:02:52,550
Next up now is going to
be the ina sections.

71
00:02:52,550 --> 00:02:54,260
I'm going to click on inner
section right here from

72
00:02:54,260 --> 00:02:56,000
the navigate TO again,

73
00:02:56,000 --> 00:02:57,490
we're going to go full width.

74
00:02:57,485 --> 00:02:59,165
And then columns,
columns gap here.

75
00:02:59,165 --> 00:03:01,885
We're gonna say no gap as well.

76
00:03:01,880 --> 00:03:03,350
Alright, awesome.

77
00:03:03,350 --> 00:03:05,420
Now let's go ahead and

78
00:03:05,420 --> 00:03:07,850
handle the very first
column in here,

79
00:03:07,850 --> 00:03:09,470
which will have our image.

80
00:03:09,470 --> 00:03:11,980
So I'm going to drop the
image element in there.

81
00:03:11,975 --> 00:03:15,025
Choose this image right here.

82
00:03:15,020 --> 00:03:18,380
And in case you're wondering
this is actually in Peru.

83
00:03:18,380 --> 00:03:21,800
It's a place called Horeca
kina or who are Cocina.

84
00:03:21,800 --> 00:03:24,140
I'm not exactly sure
how it's finance-based,

85
00:03:24,140 --> 00:03:26,510
basically kind of
like a desert area.

86
00:03:26,510 --> 00:03:28,000
You can do soundboard
and, and so on.

87
00:03:27,995 --> 00:03:29,615
Pretty awesome
place to check out.

88
00:03:29,615 --> 00:03:33,565
And I'm gonna go ahead and
switch this one to fool.

89
00:03:33,560 --> 00:03:36,700
But then here's the
thinner, right?

90
00:03:36,695 --> 00:03:39,425
We're gonna change
the column widths.

91
00:03:39,425 --> 00:03:41,905
We're gonna make the
first column in here.

92
00:03:41,900 --> 00:03:44,860
We're going to actually
make it a bit wider.

93
00:03:44,855 --> 00:03:51,625
So we're gonna go all
the way to 63 pixels,

94
00:03:51,620 --> 00:03:57,760
63% actually, so 63% and then
37% for the second column.

95
00:03:57,755 --> 00:04:01,285
But we're gonna make a
change to the image.

96
00:04:01,280 --> 00:04:02,920
The image is way too tall.

97
00:04:02,915 --> 00:04:05,015
So let's go ahead
and edit the image.

98
00:04:05,015 --> 00:04:06,055
And then we're going
to go over here to

99
00:04:06,050 --> 00:04:07,960
style and are here,

100
00:04:07,955 --> 00:04:12,085
I'm going to choose 450 pixels.

101
00:04:12,080 --> 00:04:16,720
So it's just about tall
enough and wide enough.

102
00:04:16,715 --> 00:04:19,625
Okay, that's the
image right there.

103
00:04:19,625 --> 00:04:22,325
Now, I'm just closing navigator.

104
00:04:22,325 --> 00:04:24,055
For the second column,

105
00:04:24,050 --> 00:04:26,690
we're going to add a series
of different elements.

106
00:04:26,690 --> 00:04:30,110
The very first one here would
be the heading element,

107
00:04:30,110 --> 00:04:33,280
and this one will
be our contacts.

108
00:04:33,275 --> 00:04:36,695
I'm going to type it all in
capital letters. Contact.

109
00:04:36,695 --> 00:04:38,915
It's gonna be an H2.

110
00:04:38,915 --> 00:04:40,555
For the style of wisdom.

111
00:04:40,550 --> 00:04:42,410
We're going to go
to the text color

112
00:04:42,410 --> 00:04:44,740
and simply choose primary.

113
00:04:44,735 --> 00:04:48,555
Now we're going to
choose another heading.

114
00:04:48,559 --> 00:04:49,579
Again.

115
00:04:49,580 --> 00:04:51,500
I'm going to drop
it just underneath

116
00:04:51,500 --> 00:04:53,480
the contact right there.

117
00:04:53,480 --> 00:04:58,020
This one is going
to be a telephone.

118
00:04:58,690 --> 00:05:04,160
Again, capital letters to phone.

119
00:05:04,160 --> 00:05:08,590
However, we're gonna make
this one an age three.

120
00:05:08,585 --> 00:05:11,425
Actually let's make it an H4.

121
00:05:11,420 --> 00:05:13,570
We're going to make it an H4

122
00:05:13,565 --> 00:05:16,465
and we're going to
add some information.

123
00:05:16,460 --> 00:05:18,080
So what I'm gonna do
right here is I will

124
00:05:18,080 --> 00:05:21,550
simply right-click and
then simply duplicate.

125
00:05:21,545 --> 00:05:25,675
And now we're gonna make
this one an age five.

126
00:05:25,670 --> 00:05:29,060
The actual telephone
number will be an h5.

127
00:05:29,060 --> 00:05:31,520
So let's change the
number right here to

128
00:05:31,520 --> 00:05:39,260
090 space 645, space 3417.

129
00:05:39,260 --> 00:05:41,090
That's going to be
the telephone number.

130
00:05:41,090 --> 00:05:44,420
And I'm gonna go back to
style and the topography.

131
00:05:44,420 --> 00:05:46,530
Let's actually choose texts.

132
00:05:46,534 --> 00:05:48,564
I prefer this text pattern,

133
00:05:48,560 --> 00:05:51,010
so we're going to
choose that one.

134
00:05:51,005 --> 00:05:54,805
Then we're also going to
duplicate the telephone.

135
00:05:54,800 --> 00:05:57,320
Again, drag it down here just

136
00:05:57,320 --> 00:05:59,800
underneath the telephone number.

137
00:05:59,795 --> 00:06:01,255
We're also going to duplicate

138
00:06:01,250 --> 00:06:03,130
the telephone number itself.

139
00:06:03,125 --> 00:06:06,025
Okay, and then drag
on the NIF telephone.

140
00:06:06,020 --> 00:06:10,400
Now, oops, sorry, that
went all the way up there.

141
00:06:10,400 --> 00:06:12,200
Let's bring it back down here.

142
00:06:12,200 --> 00:06:15,240
Okay, now we're gonna
edit telephone,

143
00:06:15,244 --> 00:06:16,614
the second telephone right here.

144
00:06:16,610 --> 00:06:19,040
We're gonna change
this one to e-mail.

145
00:06:19,040 --> 00:06:21,430
This is basically
how to walk smart.

146
00:06:21,425 --> 00:06:22,945
Just simply duplicate
whenever you

147
00:06:22,940 --> 00:06:26,070
can and simply make
the necessary edits.

148
00:06:26,065 --> 00:06:31,705
Now we're going to edit the
telephone telephone number.

149
00:06:31,705 --> 00:06:33,745
We're gonna change the an email.

150
00:06:33,745 --> 00:06:36,805
My email is Alex.

151
00:06:38,310 --> 00:06:47,590
Pass ports will become
does not look correct.

152
00:06:47,590 --> 00:06:49,450
Alex at passport travel.com.

153
00:06:49,449 --> 00:06:51,189
Okay. Yep. That is correct.

154
00:06:51,190 --> 00:06:53,800
And then last but not least,

155
00:06:53,800 --> 00:06:55,850
we're going to have an address.

156
00:06:55,854 --> 00:06:58,214
Let's also duplicate the e-mail,

157
00:06:58,210 --> 00:06:59,860
adding one more time.

158
00:06:59,860 --> 00:07:02,710
Let's drag, drop that in here.

159
00:07:02,710 --> 00:07:05,360
Change email too.

160
00:07:05,355 --> 00:07:07,105
Ip address.

161
00:07:07,100 --> 00:07:08,720
Now for the actual address,

162
00:07:08,720 --> 00:07:11,570
we're going to use a text
editor as opposed to a hidden,

163
00:07:11,570 --> 00:07:14,000
because there's going to be
multiple lines of texts are

164
00:07:14,000 --> 00:07:17,000
going to drop the text
editor right there.

165
00:07:17,000 --> 00:07:20,420
I do have a very interested
in address right here.

166
00:07:20,420 --> 00:07:21,710
I don't know if this is actually

167
00:07:21,710 --> 00:07:24,390
a real address. I
don't remember.

168
00:07:25,150 --> 00:07:30,780
But it's fits in r2, Emile Zola.

169
00:07:30,850 --> 00:07:35,600
Now I'm going to press
Shift Enter, not just anti,

170
00:07:35,600 --> 00:07:36,710
because if you press
Enter you're going to

171
00:07:36,710 --> 00:07:38,570
have a double-space in,

172
00:07:38,570 --> 00:07:40,790
use Shift key and then enter.

173
00:07:40,790 --> 00:07:42,580
So you have a single
line spacing.

174
00:07:42,575 --> 00:07:48,095
And now I'm going
to type in 609002,

175
00:07:48,095 --> 00:07:52,075
leon, Shift Enter again.

176
00:07:52,070 --> 00:07:56,660
And then we're going to
type in France all k.

177
00:07:56,660 --> 00:08:00,230
And we're gonna go over
to style typography.

178
00:08:00,230 --> 00:08:01,700
We're gonna go with texts.

179
00:08:01,699 --> 00:08:04,879
And of course, text
color will be primary.

180
00:08:04,880 --> 00:08:06,190
And there you go.

181
00:08:06,185 --> 00:08:08,095
And last but not least,

182
00:08:08,090 --> 00:08:11,350
we're going to have our
social media icons.

183
00:08:11,345 --> 00:08:13,385
Very, very, very important.

184
00:08:13,385 --> 00:08:18,025
Social media is going to be
down here on the general.

185
00:08:18,020 --> 00:08:20,170
Let's add a social media.

186
00:08:20,165 --> 00:08:22,425
And of course for
Facebook, well,

187
00:08:22,429 --> 00:08:24,109
we're gonna change the color

188
00:08:24,110 --> 00:08:25,790
from efficient code to custom.

189
00:08:25,789 --> 00:08:28,039
The primary color
here would be white,

190
00:08:28,039 --> 00:08:30,429
the secondary color
would be black.

191
00:08:30,425 --> 00:08:32,515
Basically, you will have the
white background and then

192
00:08:32,510 --> 00:08:34,850
the actual icon
themselves will be black.

193
00:08:34,850 --> 00:08:36,830
If this was a real
website you are building,

194
00:08:36,830 --> 00:08:38,300
this is where you
would add the link

195
00:08:38,300 --> 00:08:39,700
to your Facebook page.

196
00:08:39,695 --> 00:08:40,905
That's for Facebook.

197
00:08:40,909 --> 00:08:43,639
Lets us do the exact same
thing for Twitter as well.

198
00:08:43,640 --> 00:08:45,140
Why it will be the
parameter color

199
00:08:45,140 --> 00:08:46,690
black as a secondary color.

200
00:08:46,685 --> 00:08:49,315
The last banal is YouTube
or fuchsia color costume.

201
00:08:49,310 --> 00:08:50,890
Primary color is white,

202
00:08:50,885 --> 00:08:53,095
secondary colon is black.

203
00:08:53,090 --> 00:08:54,590
And then the shape here,

204
00:08:54,590 --> 00:08:57,130
we're going to change
its shape to circle,

205
00:08:57,125 --> 00:08:59,245
right, and then alignment,

206
00:08:59,240 --> 00:09:02,060
I'm actually going to
align it to the left.

207
00:09:02,060 --> 00:09:03,820
We're almost there.

208
00:09:03,815 --> 00:09:07,085
But then notice that
there is some spacing,

209
00:09:07,085 --> 00:09:10,435
the actual contact information
and then the image.

210
00:09:10,430 --> 00:09:11,950
What you're gonna do right here

211
00:09:11,945 --> 00:09:13,345
is we're going to go right

212
00:09:13,340 --> 00:09:15,920
here to the column

213
00:09:15,920 --> 00:09:17,720
holding all these
contact information,

214
00:09:17,720 --> 00:09:18,920
you click in there.

215
00:09:18,920 --> 00:09:22,130
Go over first, Vertical Align,

216
00:09:22,130 --> 00:09:23,920
let's align to the middle.

217
00:09:23,915 --> 00:09:27,035
Then go to advanced,

218
00:09:27,035 --> 00:09:28,805
and then eventually
you have padding.

219
00:09:28,805 --> 00:09:31,025
I'm going to unlink

220
00:09:31,025 --> 00:09:32,575
these values together because

221
00:09:32,570 --> 00:09:34,420
the thing about
this is by default,

222
00:09:34,415 --> 00:09:36,745
whatever value you
add to your padding,

223
00:09:36,740 --> 00:09:39,320
to the top, right,
bottom, or left.

224
00:09:39,320 --> 00:09:42,260
It will duplicate a course of
the remaining three sides.

225
00:09:42,260 --> 00:09:43,850
So we don't want this,

226
00:09:43,850 --> 00:09:45,980
we only want to add
padding to one side.

227
00:09:45,980 --> 00:09:48,410
So I'm going to click
this button right here to

228
00:09:48,410 --> 00:09:51,830
unlink the values just
in case you don't know,

229
00:09:51,830 --> 00:09:53,660
Pattern basically is a
way of creating space

230
00:09:53,660 --> 00:09:56,720
between your content
and its border.

231
00:09:56,720 --> 00:09:58,990
We're going to add
padding to the left,

232
00:09:58,985 --> 00:10:02,345
as you can see, looking
much better already.

233
00:10:02,345 --> 00:10:06,005
And I'm going to go all
the way to 40 pixels.

234
00:10:06,005 --> 00:10:08,165
We're almost there.

235
00:10:08,165 --> 00:10:10,255
One of them we're going to
add right now is going to

236
00:10:10,250 --> 00:10:12,470
be the copyright texts.

237
00:10:12,470 --> 00:10:15,970
So I'm going to scroll
all the way down here.

238
00:10:15,965 --> 00:10:18,745
So right here under your
elemental header and footer,

239
00:10:18,740 --> 00:10:20,110
you see copyright texts.

240
00:10:20,105 --> 00:10:21,085
Click drag.

241
00:10:21,080 --> 00:10:23,690
And I'll be very, very careful.

242
00:10:23,690 --> 00:10:26,240
We're not dropping it on

243
00:10:26,240 --> 00:10:29,230
the this first column
holding the image.

244
00:10:29,225 --> 00:10:32,005
We're dropping it on a
separate clinic considered

245
00:10:32,000 --> 00:10:34,730
blue line appearing,
signifying that, okay.

246
00:10:34,730 --> 00:10:37,570
This is gonna be a
separate column.

247
00:10:37,565 --> 00:10:39,575
Notice right now
that the BlueLine

248
00:10:39,575 --> 00:10:42,395
only is underneath the image,

249
00:10:42,395 --> 00:10:44,395
underneath the column
holding the image.

250
00:10:44,390 --> 00:10:46,040
But if I drag my
mouse just further

251
00:10:46,040 --> 00:10:47,690
down just a little bit now

252
00:10:47,690 --> 00:10:51,020
you can see the blue line
extending across both columns.

253
00:10:51,020 --> 00:10:53,450
So now I'm going to drop the
copyright text in there.

254
00:10:53,450 --> 00:10:54,670
And there it is.

255
00:10:54,665 --> 00:10:59,515
Text color in here will
obviously be primary typography.

256
00:10:59,510 --> 00:11:04,040
We're going to go with text
aligned to the center.

257
00:11:04,040 --> 00:11:05,660
And we're actually
going to go over

258
00:11:05,660 --> 00:11:07,390
to typography, a gain.

259
00:11:07,385 --> 00:11:08,635
And let's make this one just a

260
00:11:08,630 --> 00:11:11,060
little bit smaller than usual.

261
00:11:11,060 --> 00:11:14,020
I think 16 pixels
is about right.

262
00:11:14,015 --> 00:11:17,825
But we also want to add
some padding as well.

263
00:11:17,825 --> 00:11:20,335
So let's go over to advanced.

264
00:11:20,330 --> 00:11:23,030
Again, we're going to
unlink the values.

265
00:11:23,030 --> 00:11:26,750
We're going to add
padding of 20 pixels

266
00:11:26,750 --> 00:11:31,070
for the top ten pixels
for the bottom as well.

267
00:11:31,070 --> 00:11:32,480
We've done quite a lot.

268
00:11:32,480 --> 00:11:35,480
Let's go ahead now and updates.

269
00:11:35,480 --> 00:11:37,220
Let's see what it looks like.

270
00:11:37,220 --> 00:11:40,430
So I'm gonna go over
here, refresh the page.

271
00:11:40,429 --> 00:11:42,939
And there you go.

272
00:11:42,935 --> 00:11:45,785
This is our footer right there.

273
00:11:45,785 --> 00:11:48,775
Now I know you can see
whitespace down here,

274
00:11:48,770 --> 00:11:50,090
but that's simply
because we don't have

275
00:11:50,090 --> 00:11:53,140
any content yet on the homepage.

276
00:11:53,135 --> 00:11:54,625
That's why you have
this whitespace.

277
00:11:54,620 --> 00:11:56,930
I already added some
contents to the about page.

278
00:11:56,930 --> 00:12:00,200
So this is more like what
it will now look like.

279
00:12:00,200 --> 00:12:01,910
You can see there is
no more whitespace on

280
00:12:01,910 --> 00:12:04,010
an int because we actually do

281
00:12:04,010 --> 00:12:07,880
have some content on the
page, but there it is.

282
00:12:07,880 --> 00:12:09,910
We now have our footer

283
00:12:09,905 --> 00:12:12,955
well-built out with
the image from Peru,

284
00:12:12,950 --> 00:12:16,220
copyright texts, as well as
some contact information.

285
00:12:16,220 --> 00:12:17,420
Thank you for watching, and of

286
00:12:17,420 --> 00:12:20,130
course I'll see you
in the next class.