In the previous video, we successfully
created our two headers,
one for the homepage
and the other for the rest of the website.
But now we're going to create our Global Footer.
And the good news here is that we only need to create one
of footer and this is
exactly what we're trying to create.
We're going to have this image here on the left
and then some contact information, social media icons.
And then the side copyright
basically down here at the bottom.
Let's go ahead and quickly do this.
I'm going to click on Add New.
And we're going to call this one the global footer.
Select option here will be Footer
and of course display because the entire website.
And we'll change the template to full width.
And there we go.
Let's go ahead Publish.
And now let's edit with Elementor.
Now, I want you to pay very close attention
to a massive difference
between the header and
the footer and the header that we have here.
We basically have just two columns.
The one on the left holding the logo,
the one on the right holding the code, the main menu.
But for the footer, notice
that it is a little bit different.
Yes, we still have two columns,
one holding this image,
the other one holding the contact information.
But then down here,
this copyright text is actually a third column.
It's not under this first column here.
It's actually a separate column on its own.
In order to create this kind of multi column section,
we're going to make use of
a new element called the e-mail section in the survey.
It's actually the very first element that you have,
this one right here in a section.
I'm going to click drag and then drop it inside.
Okay, so first things first though,
is I'm gonna go ahead and edit the very first section.
If you're having trouble trying
to click on the parents sec section,
basically, you can always use your navigator right here
and you can see right here we have
this section column and then intersection.
So I'm going to click on section right now.
We're going to change the content width
right here to full width.
And then columns gap.
We're gonna choose no gap.
The reason is that if you pay close attention,
you can see right now the way you have the image,
there is no space,
there is no padding margins whatsoever.
The image is directly
right there at the border of the bottom.
That's where we're choosing our node gap here.
We don't want to have any gaps at all.
The same is going to go with the inner section as well.
But before we jump in there,
Let's add a background color.
I'm going to go to Background type.
And of course we're going to choose are black.
So I'm going to have a black background for the footer.
Next up now is going to be the ina sections.
I'm going to click on inner section right here from
the navigate TO again,
we're going to go full width.
And then columns, columns gap here.
We're gonna say no gap as well.
Alright, awesome.
Now let's go ahead and
handle the very first column in here,
which will have our image.
So I'm going to drop the image element in there.
Choose this image right here.
And in case you're wondering this is actually in Peru.
It's a place called Horeca kina or who are Cocina.
I'm not exactly sure how it's finance-based,
basically kind of like a desert area.
You can do soundboard and, and so on.
Pretty awesome place to check out.
And I'm gonna go ahead and switch this one to fool.
But then here's the thinner, right?
We're gonna change the column widths.
We're gonna make the first column in here.
We're going to actually make it a bit wider.
So we're gonna go all the way to 63 pixels,
63% actually, so 63% and then 37% for the second column.
But we're gonna make a change to the image.
The image is way too tall.
So let's go ahead and edit the image.
And then we're going to go over here to
style and are here,
I'm going to choose 450 pixels.
So it's just about tall enough and wide enough.
Okay, that's the image right there.
Now, I'm just closing navigator.
For the second column,
we're going to add a series of different elements.
The very first one here would be the heading element,
and this one will be our contacts.
I'm going to type it all in capital letters. Contact.
It's gonna be an H2.
For the style of wisdom.
We're going to go to the text color
and simply choose primary.
Now we're going to choose another heading.
Again.
I'm going to drop it just underneath
the contact right there.
This one is going to be a telephone.
Again, capital letters to phone.
However, we're gonna make this one an age three.
Actually let's make it an H4.
We're going to make it an H4
and we're going to add some information.
So what I'm gonna do right here is I will
simply right-click and then simply duplicate.
And now we're gonna make this one an age five.
The actual telephone number will be an h5.
So let's change the number right here to
090 space 645, space 3417.
That's going to be the telephone number.
And I'm gonna go back to style and the topography.
Let's actually choose texts.
I prefer this text pattern,
so we're going to choose that one.
Then we're also going to duplicate the telephone.
Again, drag it down here just
underneath the telephone number.
We're also going to duplicate
the telephone number itself.
Okay, and then drag on the NIF telephone.
Now, oops, sorry, that went all the way up there.
Let's bring it back down here.
Okay, now we're gonna edit telephone,
the second telephone right here.
We're gonna change this one to e-mail.
This is basically how to walk smart.
Just simply duplicate whenever you
can and simply make the necessary edits.
Now we're going to edit the telephone telephone number.
We're gonna change the an email.
My email is Alex.
Pass ports will become does not look correct.
Alex at passport travel.com.
Okay. Yep. That is correct.
And then last but not least,
we're going to have an address.
Let's also duplicate the e-mail,
adding one more time.
Let's drag, drop that in here.
Change email too.
Ip address.
Now for the actual address,
we're going to use a text editor as opposed to a hidden,
because there's going to be multiple lines of texts are
going to drop the text editor right there.
I do have a very interested in address right here.
I don't know if this is actually
a real address. I don't remember.
But it's fits in r2, Emile Zola.
Now I'm going to press Shift Enter, not just anti,
because if you press Enter you're going to
have a double-space in,
use Shift key and then enter.
So you have a single line spacing.
And now I'm going to type in 609002,
leon, Shift Enter again.
And then we're going to type in France all k.
And we're gonna go over to style typography.
We're gonna go with texts.
And of course, text color will be primary.
And there you go.
And last but not least,
we're going to have our social media icons.
Very, very, very important.
Social media is going to be down here on the general.
Let's add a social media.
And of course for Facebook, well,
we're gonna change the color
from efficient code to custom.
The primary color here would be white,
the secondary color would be black.
Basically, you will have the white background and then
the actual icon themselves will be black.
If this was a real website you are building,
this is where you would add the link
to your Facebook page.
That's for Facebook.
Lets us do the exact same thing for Twitter as well.
Why it will be the parameter color
black as a secondary color.
The last banal is YouTube or fuchsia color costume.
Primary color is white,
secondary colon is black.
And then the shape here,
we're going to change its shape to circle,
right, and then alignment,
I'm actually going to align it to the left.
We're almost there.
But then notice that there is some spacing,
the actual contact information and then the image.
What you're gonna do right here
is we're going to go right
here to the column
holding all these contact information,
you click in there.
Go over first, Vertical Align,
let's align to the middle.
Then go to advanced,
and then eventually you have padding.
I'm going to unlink
these values together because
the thing about this is by default,
whatever value you add to your padding,
to the top, right, bottom, or left.
It will duplicate a course of the remaining three sides.
So we don't want this,
we only want to add padding to one side.
So I'm going to click this button right here to
unlink the values just in case you don't know,
Pattern basically is a way of creating space
between your content and its border.
We're going to add padding to the left,
as you can see, looking much better already.
And I'm going to go all the way to 40 pixels.
We're almost there.
One of them we're going to add right now is going to
be the copyright texts.
So I'm going to scroll all the way down here.
So right here under your elemental header and footer,
you see copyright texts.
Click drag.
And I'll be very, very careful.
We're not dropping it on
the this first column holding the image.
We're dropping it on a separate clinic considered
blue line appearing, signifying that, okay.
This is gonna be a separate column.
Notice right now that the BlueLine
only is underneath the image,
underneath the column holding the image.
But if I drag my mouse just further
down just a little bit now
you can see the blue line extending across both columns.
So now I'm going to drop the copyright text in there.
And there it is.
Text color in here will obviously be primary typography.
We're going to go with text aligned to the center.
And we're actually going to go over
to typography, a gain.
And let's make this one just a
little bit smaller than usual.
I think 16 pixels is about right.
But we also want to add some padding as well.
So let's go over to advanced.
Again, we're going to unlink the values.
We're going to add padding of 20 pixels
for the top ten pixels for the bottom as well.
We've done quite a lot.
Let's go ahead now and updates.
Let's see what it looks like.
So I'm gonna go over here, refresh the page.
And there you go.
This is our footer right there.
Now I know you can see whitespace down here,
but that's simply because we don't have
any content yet on the homepage.
That's why you have this whitespace.
I already added some contents to the about page.
So this is more like what it will now look like.
You can see there is no more whitespace on
an int because we actually do
have some content on the page, but there it is.
We now have our footer
well-built out with the image from Peru,
copyright texts, as well as some contact information.
Thank you for watching, and of
course I'll see you in the next class.