Welcome back.
So now that I've shown you
a brief introduction to the user interface of Elementor.
Let's take a look at the global variables and how you can
set the kinds of font families you want to use,
the colors and so on.
Now, on the same UI interface right here,
you're going to go to the Menu button up here,
and then now go over to your site settings.
Right? Now Here's the thin.
We could set global colors,
colors that can be used all
across our website to do that,
click on global colors.
Now this would be the default clause that you
would have a blue,
darkish gray, light gray, and then lime.
So this would be for your primary
our head does your secondary headers,
your texts, this would be a regular body takes on
an accent is usually for like links or buttons.
Now, what I'm gonna do is I'm actually going to change
these to some clothes I have over here.
Now to change them, I'm going to click inside.
And if a primary, I'm gonna go with white.
Okay, So why it is going to be fff,
FFF six Fs is basically for White Album my primary.
And then for secondary,
we're actually going to keep this as it is.
But then for texts, we're gonna go with black.
Black is going to be six zeros.
So 123456, these are what we call the hexadecimal values.
Okay, so six zeros for black,
six F's for white.
And then lastly for the accents,
which would be for the links.
I do have my color in here.
Let me just quickly grab the color for my other screen.
Come right here and paste that.
So it's a shade of orange,
It's basically a DECA 570.
Now, you could decide to
add your own custom colors as well.
It can come in here, click on Add color.
You can name this one like
anything could give a like or let's say
the special special color.
I'll show you how this works a bit later.
Let us call this one special colo.
And in here I'm gonna click on the box.
And let's just choose something reddish.
So I have my own custom color called special column.
I'm going to go ahead now and simply updates.
We've set our global clause, which,
which we can use throughout the site.
But then we also have access to global fonts.
Font families are very, very, very important.
So check this item.
I'm gonna go down global fonts.
The first one here is going to be primary.
This would be for your primary headers.
Now let's just take a look at my other screen in here,
because I have chosen to
go for the font family of citizens go with Oswald.
Oswald is a particular Google font that I like.
I'm gonna choose Oswald for the font-family.
The weight here is going to be 700s,
there's gonna be a little bit heavier.
Then I'm going to transform these two uppercase.
And then I'll leave the other ones
line-height, letter spacing,
what spacing, and so on the slip those as they are up.
Next is going to be the secondary.
And then secondary again,
I'm going to go with Oswald.
Also all for secondary.
And then the size here,
I'm actually going to go with our 20 pixels
because there's gonna be a little bit smaller pixels.
And then the weights here would be our 600.
And there you go.
That's for the secondary.
And then text, this will be our regular text.
I'm actually going to switch from families of
our two new D2 sands.
So let's search for new door.
I said, I'm sorry, isn't new veto Nieto.
I'm sorry.
Even wear my glasses. I still can't see properly.
Millions of sensors is gonna be full text.
And then the size here would be
18 pixels and the width is going to be 500.
And that is that last but not least,
we do have the accents.
Accents is going to be Roboto.
Let's stick with Roboto for that
one and then wait till will be 500.
So we're not changing anything in here.
I'm going to go ahead now and update.
The point here is that we can actually
use this font families,
this font colors anywhere on our site.
As an example.
Let me close this
and let me go ahead now and add a heading.
So I'm going to click drag,
drop the head and elements in here.
Now take a look at this.
If I was to go to Style, alright,
right here you can see we have the typography option to
choose what kind of topography wanted to
work with all the text color.
Now take a look at these. If I click
on this icon right here,
this global looking icon, I click in there.
Now see we can choose from the five options,
primary, secondary texts, accent,
and even the special color that we added.
That's how you can make use
of the global caused octave just
set same goals with the typographic clicking here again.
And now I can choose either to go with the primary texts,
secondary texts, regular texts, or the accent.
That's how these would work.
But let me show you something even more interesting.
If I go back to the site settings,
just underneath the design system,
you have your theme style.
If I click on typography in here,
this is where we can now set
specific font families, colors,
sizes for our H1 or H2 tag,
h3 and so on.
But in order for us to be able to make
use of this particular system,
we're going to need to disable
the default colors and fonts from the settings page.
Remember, let me just quickly go ahead update this.
I will show what I'm talking about.
If we go back to the backend,
let me come right here,
go to Exit to Dashboard.
If you go back to your elemental sets
in Elementor settings,
right here,
we're going to have to disable the default colors and
fonts in order to make use of
this new theme style editor.
So I'm gonna check this two boxes.
Save those changes.
And now let me close this.
Let me refresh this page again.
Now take a look at this.
If I go back in here, go to
Site Settings and accompany on native topography.
Now I am able to set a specific text color for the body,
tech size, for the links, and so on.
Also, if I go back,
if I go back to the regular lab back-end and then just
close this and then added my heading again in here.
If I go to style,
right, you haven't go to text color.
I still have access to the colors upset Alia.
And then also for the typography,
I still have access to
the secondary texts. Basically the same options.
I said ls, you'll have access to them.
So basic litigious.
Go back to the set
that one more time and then I just wanted to treat it.
I still have access to those options.
Let's go back to the theme style typography.
I do have my options in here that I've already set.
So what I'm gonna do here is this.
Okay, Let's first of all choose
the typography for our body.
So right here for body,
I'm going to go over here to text column.
We're gonna choose our black that'll be for the text.
For the typography.
I'm simply gonna go with texts.
Remember we said texts to be Newtonian to sands,
size of 18 pixels and then the weight of 500.
That's going to be for the body.
Good.
Now for the link.
And just check what I have in here for the link.
I'm gonna go with color,
the accent color typography.
I'm going to go with accent as well.
Now for the age warns, okay,
this is gonna be a little bit different for the F1's.
What I've done right here is for
the family upset that I want to default.
But the size here is going to be 100 pixels.
Very, very, very, very, very massive.
And then the weight here is going to be 600.
We're hardly going to use H ones on our site,
so don't worry about the huge size.
I'm going to keep that one at 100.
Now let's go over to the H2.
For H2, I do have the size here.
I'm going to click on typography.
The size here, I've set it up to 32 pixels.
32 pixels, and then I do have the weight here to be 700.
Basically, this is the main header
we're gonna be working with.
Actually, my apologies, I said it to 36,
sorry, six-by-six pixels for H2.
Then for the age three, Check this out.
For age three,
the color here is going to be
the accent color, the orange color.
Then the size here is going to be 22 pixels.
Then the family here is going to be primary,
which would be also old limit also said
the primary font family here
to be our Oswald I will be for the H12.
So basically h twos,
we'd be 36 size and pixel,
the family of Oswald.
There'll be uppercase and then 708 and waits.
And then finally, I've also said for the H4,
same color would be the axon color.
And then the size here is going to be our 18 pixels.
Okay, so let's choose Oswald again.
Then the size here would be our 18 pixels,
the same size as our body texts.
And then one more.
The very, very last one will be the age five,
which I don't really think
we're going to walk with that multiple
legislated up H5 and then topography would be the
same secondary or primary if you want.
And then the size here would be 16 pixels.
There you go.
So I'm gonna go ahead now and simply update this.
And that's it now, I know this was a very,
very long video with me just
talking about car loans and stuff.
But it points here is that on our site,
if wherever add an H2 automatically,
it's going to inherit the values from here.
So our H2 is right now,
would have the font family of Oswald,
size of 36 pixels and then a weight of 700.
And then the same goes with the age threes,
fours and so on.
Mou basically set up the global values fall
or I hit us as well as our body texts.
But also, we have said that global colors,
which we can use over and over again.
We've said five of them primary,
secondary texts accent,
especially when I don't use special ecologist In,
wanted to show you how you can audio on
additional custom colors if you wanted to.
But as basically are setting up
our global font families, colors and sizes.
Germany, very next video where we'll
now begin to build out
the header full of website.