Now that we've built the headers and footers,
it is now time for us to build our homepage.
And the very first section we're gonna
be building will be the banner you can see
right here we have the background image
with the tropical trees,
palm trees and the beach.
And then of course, the texts,
we're traveling with adventure and then
the button that says our book, your trip now.
Also, of course, you would have noticed that
the background basically blends into the header.
How do we do that?
Well, we're going to go ahead
and go to edit the homepage.
I'm gonna say Edit with Elementor.
Right here.
You can notice that we have basically two columns,
one on top, the one that
contains where traveled means adventure.
And then we'll have another column
containing the button book, your trip.
Now, what I'm simply gonna do here is this.
We do have a heading text in here,
but just in case you don't see anything,
just simply drag the heading element
and drop it inside your box right here.
And I'm simply going to say
where we're travel meets adventure.
That is the major tagline for All website.
And I'm gonna make this one on one.
But we're going to make some changes to
the actual topography itself.
So let's go to style.
And for the typography in here,
I am going to change the transform to uppercase.
And we're also going to make the weight
900 just to make it a very, very thick.
And then the style will make it italic as well.
That's that for the text for now.
Let's go ahead now and add
the background image for this section.
So I'm gonna click on the edit section button right here.
The content width, we're going to keep this one box,
but then the width here we'll do 1240 pixels.
And our checklist advocate for the height,
we're gonna set it to a minimum height of
a thousand pixels because we really wanted to
show as much of that background image as possible.
So let me make this 1 thousand.
And now we're gonna go over to
style, background type classic.
And I'm going to choose the image.
And it's going to be, I do apologize.
Actually do have two separate ones in here for now.
I will delete the woman are going to use,
we're going to use the big out version.
This one is just 859 pixels in height,
but this one is 1274.
So we're gonna make use of this one.
So I'm going to insert that.
And there you go.
Now, let me show you some tricks regarding
positioning your background image.
You've got different kinds of
positions in center, center,
center left, center, right, and so on.
So it's really up to you to choose
the ideal angles of position for your background image.
Mine here that I've chosen is going to be bottom center.
Here you get to actually see the palm trees,
the beach as well.
So it's familiar is the best position.
And then for the size,
you do have several options in
here I'm gonna go with cava.
The difference between Kovach and contain is
the containable show the entire image.
Content isn't always the best option
because when you show the entire image,
if the image isn't big enough for the entire screen,
it will start to repeated study.
You can see in the background here you kind
of have the image repeating itself all over again.
But with COVID, you basically,
you're basically saying, Hey,
try to ensure that the image
will cover the entire screen.
That's why I've chosen are covered here,
but also going to
add a background overlay. So check this out again.
I'm going to go back on
overlay. I'm going to click in there.
I want, I'm gonna do is I'm gonna go to
the background type as usual,
we're gonna choose a black overlay.
And then the opacity in here,
I've actually gone with the 0.23.
Of course you can change this
if you don't want to use Zope and 23.
But now we're gonna go back to the actual texts.
Let's go back in here.
And of course, the text color,
we're going to make this one white.
And there it is, okay.
We'll also going to change the size as well.
So I'm going to go all the way to a 120 pixels.
And again, this is an entirely subjective.
You can make yours a little bit bigger,
a little bit smaller.
But we're also going to change the alignment as well.
Let's go to the content. We are going to
align it to the center.
And there it is, we're traveling meets eventual.
And then what we're gonna do right now would
be to add our button.
I'm going to drag the button right here,
Element and I will jump it just beneath the headline.
Of course right here, we're going to say,
book your trip. Now.
Of course, this is where you would add
the link to maybe a page or
an XNOR website like a golden or Booking.com.
If I went seven, do that and we could just say
book kin dot com.
Let's just do that. We can.com just for the fun of it.
And of course we're going to align it to the center.
Size here will be medium.
Let's add an icon as well.
Okay, so I'm gonna choose the icon library in here.
Let's search for plane.
I'm going to choose plenty, my bear insert.
You do have the option to change
the icon position to after or before the text.
We want to keep that on before.
And then the icon spacing.
You could also add some spacing between
the icon and the image.
So I'm gonna go with aids
just to give it a little bit off some spacing.
Now we're going to go over to style.
This is where we're gonna make some major changes.
So the first one we're gonna make in
here would be the topography,
the weights of the texts.
There's going to be 600 and then transform to upper case.
Now because this is a link,
you would notice that there is the underlining idea,
but we don't want that one.
So I'm gonna go to Style, I'm going,
I'm gonna go to declaration and then choose none.
We don't want any of the texts in
any of the underlying texts in there.
All right, typography, color, text, color right here.
We're gonna go with the white.
Alright?
Then for the button itself right here,
you will have the background type
and let's click in there.
And we're going to go with
classic color here would be orange.
Now we're going to set a border as well as solid.
Then what we're gonna
do for the border is we're gonna change
the border color to the orange color as well.
And then we'll add a border radius
just to make the circles,
the edges just a little bit circular.
We're going to go with ten,
I'm sorry, we're gonna go with 12 pixels right here.
And that is it.
I'm going to go ahead now and updates.
And let's see what it looks like.
Let's exit to the dashboard.
Let's click in here, go to the homepage,
and there it is.
So by traveled in its eventual then
of course we have the button
right here that would link to our booking.com.
But then how do we achieve this?
Where you have the background basically
blending into the head up Germany.
Very next video where I'll show you how to do that.