1
00:00:00,000 --> 00:00:03,350
Now that we've built the
headers and footers,

2
00:00:03,345 --> 00:00:06,275
it is now time for us
to build our homepage.

3
00:00:06,270 --> 00:00:07,740
And the very first
section we're gonna

4
00:00:07,740 --> 00:00:10,890
be building will be
the banner you can see

5
00:00:10,890 --> 00:00:13,110
right here we have
the background image

6
00:00:13,110 --> 00:00:15,680
with the tropical trees,

7
00:00:15,675 --> 00:00:17,405
palm trees and the beach.

8
00:00:17,400 --> 00:00:19,170
And then of course, the texts,

9
00:00:19,165 --> 00:00:21,415
we're traveling with
adventure and then

10
00:00:21,410 --> 00:00:24,770
the button that says our
book, your trip now.

11
00:00:24,770 --> 00:00:27,320
Also, of course, you
would have noticed that

12
00:00:27,320 --> 00:00:31,220
the background basically
blends into the header.

13
00:00:31,220 --> 00:00:32,450
How do we do that?

14
00:00:32,450 --> 00:00:33,920
Well, we're going to go ahead

15
00:00:33,920 --> 00:00:36,040
and go to edit the homepage.

16
00:00:36,035 --> 00:00:38,855
I'm gonna say Edit
with Elementor.

17
00:00:38,855 --> 00:00:40,135
Right here.

18
00:00:40,130 --> 00:00:43,010
You can notice that we have
basically two columns,

19
00:00:43,010 --> 00:00:44,360
one on top, the one that

20
00:00:44,360 --> 00:00:46,240
contains where traveled
means adventure.

21
00:00:46,235 --> 00:00:47,695
And then we'll have
another column

22
00:00:47,690 --> 00:00:49,490
containing the button
book, your trip.

23
00:00:49,490 --> 00:00:53,440
Now, what I'm simply
gonna do here is this.

24
00:00:53,435 --> 00:00:56,965
We do have a heading
text in here,

25
00:00:56,960 --> 00:00:58,700
but just in case you
don't see anything,

26
00:00:58,700 --> 00:01:01,460
just simply drag
the heading element

27
00:01:01,460 --> 00:01:04,160
and drop it inside
your box right here.

28
00:01:04,160 --> 00:01:06,560
And I'm simply going to say

29
00:01:06,560 --> 00:01:15,740
where we're travel
meets adventure.

30
00:01:15,740 --> 00:01:19,010
That is the major
tagline for All website.

31
00:01:19,010 --> 00:01:21,770
And I'm gonna make
this one on one.

32
00:01:21,770 --> 00:01:23,780
But we're going to
make some changes to

33
00:01:23,780 --> 00:01:27,110
the actual topography itself.

34
00:01:27,110 --> 00:01:29,350
So let's go to style.

35
00:01:29,345 --> 00:01:31,985
And for the typography in here,

36
00:01:31,985 --> 00:01:37,505
I am going to change the
transform to uppercase.

37
00:01:37,505 --> 00:01:39,265
And we're also going
to make the weight

38
00:01:39,260 --> 00:01:42,730
900 just to make it
a very, very thick.

39
00:01:42,725 --> 00:01:47,435
And then the style will
make it italic as well.

40
00:01:47,435 --> 00:01:49,775
That's that for
the text for now.

41
00:01:49,775 --> 00:01:51,295
Let's go ahead now and add

42
00:01:51,290 --> 00:01:54,290
the background image
for this section.

43
00:01:54,290 --> 00:01:57,070
So I'm gonna click on the edit
section button right here.

44
00:01:57,065 --> 00:01:59,645
The content width, we're
going to keep this one box,

45
00:01:59,645 --> 00:02:04,925
but then the width here
we'll do 1240 pixels.

46
00:02:05,920 --> 00:02:09,400
And our checklist
advocate for the height,

47
00:02:09,395 --> 00:02:13,355
we're gonna set it to
a minimum height of

48
00:02:13,355 --> 00:02:15,985
a thousand pixels because
we really wanted to

49
00:02:15,980 --> 00:02:18,980
show as much of that
background image as possible.

50
00:02:18,980 --> 00:02:21,860
So let me make this 1 thousand.

51
00:02:21,860 --> 00:02:24,230
And now we're gonna go over to

52
00:02:24,230 --> 00:02:27,280
style, background type classic.

53
00:02:27,275 --> 00:02:29,435
And I'm going to
choose the image.

54
00:02:29,435 --> 00:02:32,095
And it's going to
be, I do apologize.

55
00:02:32,090 --> 00:02:35,170
Actually do have two separate
ones in here for now.

56
00:02:35,165 --> 00:02:37,715
I will delete the woman
are going to use,

57
00:02:37,715 --> 00:02:39,625
we're going to use
the big out version.

58
00:02:39,620 --> 00:02:42,080
This one is just 859
pixels in height,

59
00:02:42,080 --> 00:02:44,330
but this one is 1274.

60
00:02:44,330 --> 00:02:46,160
So we're gonna make
use of this one.

61
00:02:46,160 --> 00:02:47,870
So I'm going to insert that.

62
00:02:47,870 --> 00:02:49,610
And there you go.

63
00:02:49,610 --> 00:02:51,500
Now, let me show you
some tricks regarding

64
00:02:51,500 --> 00:02:54,730
positioning your
background image.

65
00:02:54,725 --> 00:02:56,425
You've got different kinds of

66
00:02:56,420 --> 00:02:58,460
positions in center, center,

67
00:02:58,460 --> 00:03:02,420
center left, center,
right, and so on.

68
00:03:02,420 --> 00:03:04,690
So it's really up
to you to choose

69
00:03:04,685 --> 00:03:09,635
the ideal angles of position
for your background image.

70
00:03:09,635 --> 00:03:13,475
Mine here that I've chosen is
going to be bottom center.

71
00:03:13,475 --> 00:03:16,285
Here you get to actually
see the palm trees,

72
00:03:16,280 --> 00:03:18,200
the beach as well.

73
00:03:18,200 --> 00:03:20,440
So it's familiar is
the best position.

74
00:03:20,435 --> 00:03:22,045
And then for the size,

75
00:03:22,040 --> 00:03:23,510
you do have several options in

76
00:03:23,510 --> 00:03:25,400
here I'm gonna go with cava.

77
00:03:25,400 --> 00:03:28,100
The difference between
Kovach and contain is

78
00:03:28,100 --> 00:03:31,730
the containable show
the entire image.

79
00:03:31,730 --> 00:03:34,070
Content isn't always
the best option

80
00:03:34,070 --> 00:03:37,130
because when you show
the entire image,

81
00:03:37,130 --> 00:03:40,810
if the image isn't big enough
for the entire screen,

82
00:03:40,805 --> 00:03:42,265
it will start to repeated study.

83
00:03:42,260 --> 00:03:44,150
You can see in the
background here you kind

84
00:03:44,150 --> 00:03:46,280
of have the image repeating
itself all over again.

85
00:03:46,280 --> 00:03:48,400
But with COVID, you basically,

86
00:03:48,395 --> 00:03:49,765
you're basically saying, Hey,

87
00:03:49,760 --> 00:03:51,800
try to ensure that the image

88
00:03:51,800 --> 00:03:53,820
will cover the entire screen.

89
00:03:53,820 --> 00:03:56,770
That's why I've chosen
are covered here,

90
00:03:56,765 --> 00:03:59,375
but also going to

91
00:03:59,375 --> 00:04:03,475
add a background overlay.
So check this out again.

92
00:04:03,470 --> 00:04:05,090
I'm going to go back on

93
00:04:05,090 --> 00:04:07,580
overlay. I'm going
to click in there.

94
00:04:07,580 --> 00:04:09,110
I want, I'm gonna do
is I'm gonna go to

95
00:04:09,110 --> 00:04:10,840
the background type as usual,

96
00:04:10,835 --> 00:04:13,885
we're gonna choose
a black overlay.

97
00:04:13,880 --> 00:04:15,680
And then the opacity in here,

98
00:04:15,680 --> 00:04:19,790
I've actually gone
with the 0.23.

99
00:04:19,785 --> 00:04:22,245
Of course you can change this

100
00:04:22,240 --> 00:04:24,340
if you don't want
to use Zope and 23.

101
00:04:24,340 --> 00:04:26,920
But now we're gonna go
back to the actual texts.

102
00:04:26,920 --> 00:04:28,060
Let's go back in here.

103
00:04:28,060 --> 00:04:29,620
And of course, the text color,

104
00:04:29,620 --> 00:04:32,520
we're going to make
this one white.

105
00:04:32,515 --> 00:04:35,275
And there it is, okay.

106
00:04:35,275 --> 00:04:39,885
We'll also going to
change the size as well.

107
00:04:39,880 --> 00:04:45,920
So I'm going to go all
the way to a 120 pixels.

108
00:04:46,170 --> 00:04:49,600
And again, this is an
entirely subjective.

109
00:04:49,600 --> 00:04:51,390
You can make yours a
little bit bigger,

110
00:04:51,385 --> 00:04:52,645
a little bit smaller.

111
00:04:52,645 --> 00:04:56,245
But we're also going to
change the alignment as well.

112
00:04:56,245 --> 00:04:58,005
Let's go to the content.
We are going to

113
00:04:58,000 --> 00:04:59,430
align it to the center.

114
00:04:59,425 --> 00:05:01,825
And there it is, we're
traveling meets eventual.

115
00:05:01,829 --> 00:05:03,679
And then what we're
gonna do right now would

116
00:05:03,680 --> 00:05:05,630
be to add our button.

117
00:05:05,630 --> 00:05:07,640
I'm going to drag the
button right here,

118
00:05:07,640 --> 00:05:10,580
Element and I will jump it
just beneath the headline.

119
00:05:10,580 --> 00:05:13,390
Of course right here,
we're going to say,

120
00:05:13,385 --> 00:05:20,315
book your trip. Now.

121
00:05:22,210 --> 00:05:24,440
Of course, this is
where you would add

122
00:05:24,440 --> 00:05:26,150
the link to maybe a page or

123
00:05:26,150 --> 00:05:29,360
an XNOR website like a
golden or Booking.com.

124
00:05:29,360 --> 00:05:30,860
If I went seven, do that
and we could just say

125
00:05:30,860 --> 00:05:33,490
book kin dot com.

126
00:05:33,485 --> 00:05:36,565
Let's just do that. We can.com
just for the fun of it.

127
00:05:36,560 --> 00:05:39,250
And of course we're going
to align it to the center.

128
00:05:39,245 --> 00:05:41,915
Size here will be medium.

129
00:05:41,914 --> 00:05:44,364
Let's add an icon as well.

130
00:05:44,360 --> 00:05:46,840
Okay, so I'm gonna choose
the icon library in here.

131
00:05:46,835 --> 00:05:50,975
Let's search for plane.

132
00:05:51,310 --> 00:05:55,160
I'm going to choose
plenty, my bear insert.

133
00:05:55,160 --> 00:05:56,570
You do have the option to change

134
00:05:56,570 --> 00:05:59,800
the icon position to
after or before the text.

135
00:05:59,795 --> 00:06:01,925
We want to keep that on before.

136
00:06:01,925 --> 00:06:04,675
And then the icon spacing.

137
00:06:04,670 --> 00:06:06,500
You could also add
some spacing between

138
00:06:06,500 --> 00:06:08,930
the icon and the image.

139
00:06:08,930 --> 00:06:11,000
So I'm gonna go with aids

140
00:06:11,000 --> 00:06:13,970
just to give it a little
bit off some spacing.

141
00:06:13,970 --> 00:06:16,820
Now we're going to
go over to style.

142
00:06:16,820 --> 00:06:20,370
This is where we're gonna
make some major changes.

143
00:06:20,374 --> 00:06:21,864
So the first one
we're gonna make in

144
00:06:21,860 --> 00:06:23,840
here would be the topography,

145
00:06:23,840 --> 00:06:25,640
the weights of the texts.

146
00:06:25,640 --> 00:06:31,780
There's going to be 600 and
then transform to upper case.

147
00:06:31,775 --> 00:06:33,175
Now because this is a link,

148
00:06:33,170 --> 00:06:36,140
you would notice that there
is the underlining idea,

149
00:06:36,140 --> 00:06:37,280
but we don't want that one.

150
00:06:37,280 --> 00:06:39,080
So I'm gonna go to
Style, I'm going,

151
00:06:39,080 --> 00:06:42,350
I'm gonna go to declaration
and then choose none.

152
00:06:42,350 --> 00:06:44,720
We don't want any
of the texts in

153
00:06:44,720 --> 00:06:47,200
any of the underlying
texts in there.

154
00:06:47,195 --> 00:06:51,115
All right, typography, color,
text, color right here.

155
00:06:51,110 --> 00:06:53,720
We're gonna go with the white.

156
00:06:53,720 --> 00:06:54,920
Alright?

157
00:06:54,920 --> 00:06:58,010
Then for the button
itself right here,

158
00:06:58,010 --> 00:06:59,420
you will have the
background type

159
00:06:59,420 --> 00:07:00,880
and let's click in there.

160
00:07:00,875 --> 00:07:02,365
And we're going to go with

161
00:07:02,360 --> 00:07:05,800
classic color here
would be orange.

162
00:07:05,795 --> 00:07:10,745
Now we're going to set a
border as well as solid.

163
00:07:10,745 --> 00:07:12,725
Then what we're gonna

164
00:07:12,725 --> 00:07:13,885
do for the border is
we're gonna change

165
00:07:13,880 --> 00:07:17,350
the border color to the
orange color as well.

166
00:07:17,345 --> 00:07:20,225
And then we'll add
a border radius

167
00:07:20,225 --> 00:07:22,855
just to make the circles,

168
00:07:22,850 --> 00:07:25,010
the edges just a
little bit circular.

169
00:07:25,010 --> 00:07:27,590
We're going to go with ten,

170
00:07:27,590 --> 00:07:30,800
I'm sorry, we're gonna go
with 12 pixels right here.

171
00:07:30,800 --> 00:07:33,050
And that is it.

172
00:07:33,050 --> 00:07:35,990
I'm going to go ahead
now and updates.

173
00:07:35,990 --> 00:07:39,050
And let's see what
it looks like.

174
00:07:39,050 --> 00:07:42,250
Let's exit to the dashboard.

175
00:07:42,245 --> 00:07:46,655
Let's click in here,
go to the homepage,

176
00:07:46,655 --> 00:07:48,865
and there it is.

177
00:07:48,860 --> 00:07:50,750
So by traveled in
its eventual then

178
00:07:50,750 --> 00:07:52,760
of course we have the button

179
00:07:52,760 --> 00:07:56,930
right here that would
link to our booking.com.

180
00:07:56,930 --> 00:07:59,710
But then how do we achieve this?

181
00:07:59,705 --> 00:08:02,935
Where you have the
background basically

182
00:08:02,930 --> 00:08:06,650
blending into the
head up Germany.

183
00:08:06,650 --> 00:08:10,260
Very next video where I'll
show you how to do that.