Welcome back.
Let's continue with building the homepage.
And as you can see, I've switched back to
the traditional background image.
But like I said, if you want to
use the video, that's fine.
The next section we're going to build out will be
the two columns section that will have
some texts on the left, an image on the right.
And then the third section in here is very, very similar.
It's just the columns reversed.
In the third section, we have the image on the left
and then the text on the right.
So how exactly are we going to achieve this?
This is very, very, very straightforward.
We're gonna go to a homepage.
Let's edit.
And you can see right now it's
basically two columns, 5050.
So very easily we're gonna come down here,
create a new section with two columns, 5050.
I'm going to edit the section,
makes sure it goes full width.
And then the columns GAAP are going to say no gap.
All right, so the first section in here,
it's going to have some texts.
Let me draw the text editor in here.
Lambda squiggly copy the Lorem Ipsum dummy text
I have over here.
Let me just go ahead and paste that.
And then we also have the header.
Let me drop that by dare. It's an h2.
Here.
I didn't actually create
any actual header, any real title.
So let me just type in.
We'd love to travel.
Just something. That's that.
And then for the second column in here,
we're going to add the image,
and I'm going to add this image I took in Istanbul.
This were a group of our college students.
I was walking around and I said, Hey,
would you like me to take a picture of this idea?
So I took the picture.
So make sure you set this image to fool.
Because again, we want the image to occupy
the full width and height of its column.
But then we also need to add the Learn More button.
So what I'm gonna do of course,
is to go back in here,
drag button, drop it in here.
And then I'm going to say learn, learn more.
Then this link can go to maybe the about page.
So I'll just simply say forward slash about.
And there it is.
I'm going to align to the center.
Let's make some changes.
Style typography.
I'm going to say transform to uppercase.
The declaration on non within what an integration.
And then the text color.
I'm going to switch that to black.
Now for the actual button itself are gonna go with
a background color of white.
Background typing here is going to be color white.
But then we will set a border of
solid so we can actually see the button.
And if you wanted, you could
add some border videos as well.
But I'm not going to do that.
One final thing to do would be
to align our content in the middle.
So I'm going to click on the Edit Column button,
comments, Vertical Align, sets middle.
And then one more thing we
doing to have some space on the left
and right is against right now the text isn't
exactly right off the edge of the column,
so we need to add some spacing.
So I'm gonna go back in here.
What we're gonna do is very, very simply,
we are going to go to advanced
for the same column. Right here.
We're going to unlink the values for the pattern.
And then I'm going to give 50 pixels
by 50 pixels on the left.
And there it is.
We have built out our second section very easily,
since the third section is very,
very similar in design,
what we can do is to simply right-click on
the edit section protein and then duplicate.
And now what I'll simply do
is I'm going to drag this first column in here,
drag it all the way in here, switch the columns.
And now very simply,
let's go ahead and edit this image.
I'm going to choose this one which I took in Argentina.
Mount fits in L, color fatty.
And then of course, for the texts in here,
did I add anything traveled to
the best places as the header, okay,
so let me just switch that header in here and
say travel to the best places.
There you go. All right, let's go ahead now updates.
Let's say what the page looks like.
Come on, let's go.
Do bear with me. Unfortunately, these are
the occupational hazards of an instructor, a teacher.
Sometimes you incident begins
to mess up and finally it's updated.
Okay, thank you. Now, let's view the page.
Let's scroll down and there it is.
Okay, one more thing.
Just as a bonus,
we could add some animation
so that the images maybe like,
you know, this slide in from the left and right.
So what we can do is to simply go
back and check this allegory for the first image,
the one with the students in here,
I'm going to edit the image.
Go to Advanced lighter,
you have motion effects.
I'm going to say entrance animation.
Let's slide in from the lights.
Okay, so slightly in from the right,
so slicing from the right.
And then for this image was simply do
the opposite slide in from the left.
Motion effects.
Slowed, informs or loved.
Okay, that was kind of weird.
I'm not sure exactly what they did.
Let me just do that again.
Okay.
For some reason the image window
over to the second column.
I don't know why that happened,
but alright, I'll just go ahead and update.
There we go.
Let's view the page. Let's scroll down.
It makes sliding from left,
misled and delight, and there it is.
And just like that, our homepage
is beginning to take effect.
So join me in the next video where we'll now
take a look at how we're going to
build out the next section,
which would be the unique travel design.