Unknown: Styling your site with globalstyles. Learning Outcome, change global
styles to reflect your own brand. Changetypography, colors layout, using the
font library feature, how to apply acolor palette change to an accent color,
change the global style of blocksexample of quote block. A couple of
resources to think about beforehand isfont pairing. A good design principle is
to pick a one style of font for yourheading and a different font style for
your text. Here's an article from GoogleFonts. Another resource is the font pair
website FONTPAIR. Within their pairingstab, they've paired together fonts that
work well. Color Palettes is anotherthing to think about before designing.
Here are two resources that have freeaccess Coolors has a trending color
palette, which will give you the hexcode number, which is always good to jot
down so that you have those colors.Canva also has a color palette that's
free. We're gonna go to our dashboardnow. And we'll look at our site toolbar
on the left, and go down to Appearanceand over to editor and click on that.
We'll go in under design, and go tostyles. Click on that. And within the
style Styles menu, you will see an iconwhich is the style book and we'll talk
about that in a later lesson. And thepencil icon which when I hover over says
Edit style. So we'll click on that.We're going to look at browse styles now.
I opened up my right menu at the upperright hand corner is a halfmoon. And I
hover over in that that says styles. SoI'm going to go down to browse styles.
The 2024 theme comes with eightvariations. The variations include
different color and font combinations.When I click on one of the variations, I
can see instantly how the differentblocks will look on my site. I'm going
to stick with the default theme. Andwe'll look at maybe changing a couple of
the colors to better represent my colorpalette. Then go back out to the Style
section. Typography. So we're going tolook at our typography section. This
section manages the settings for fontfamilies size appearance, from text to
links to buttons. A good rule of designis to have, like I said before one font
family for headings and a different plugcompatible font family for the text. A
new feature is our presets, we can lookat the different font combinations. And
if we wanted to change those, eventhough I'm in the default theme, I can
still change the fonts, how I wouldlike. The fonts that come with the theme
are listed here. And you see that I havedifferent combinations variants. So that
means I have to wear variations of thisone and two variations of this one. A
new feature is to manage your fonts. Andif you hover over this icon, I'm going
to open up the font library. So thetheme fonts are listed. Like I said, I
also have the option to upload orinstall fonts. So let's look at install
fonts first, and we're going to connectto Google fonts. So we need to allow
access to our to the Google fonts and wecan scroll through and there are 390
pages as of this recording, so there's alot to choose from. So I had done a
little bit of research. And so I knowthat I like this one particular, Open
Sans. So I'm gonna click on that. Nowthe Open Sans, I'm gonna use for my main
text. So I don't need follow these. Andso I'm planning ahead that I need a, at
least a normal, and I like it a littlebit darker than the 300 normal. So I'm
going to pick the 400, I'd like to beable to make some words a little bit
bold. So I'm going to pick the 700. I'malso going to pick an italic, again, the
400 and a bold with that, so I have fourof those. So I'm going to hit click
Install button at the bottom. And if Iscroll back up, it says that it was
successful. So when I go back to thelibrary tab, I see that install fonts, I
have my font there, and I have the fourvariants active. The other way to upload
is to upload. So I'm going to click onUpload. And just to remember that upload
fonts appear and can be used, it needsto be support, you need to use a
supportive format of a TTF, OTF, WOFF ora WOFF two format. So in the middle is
the word upload font, I'm going to clickon that. And I already have a folder of
a font that I like, I'm going to openthat font. And again, I don't need all
of them. But this is going to be thefont for my headings. So I definitely
want to have a regular and I don't needany light. I'm definitely would like a
bold, because my headings I'd like tomake bold. So I think I'm going to just
stick with that because I don't want todo any italic headings and stuff like
that. So, again, I'm planning ahead oftime, but is that beneficial for these
steps. So the font was successful, I'mgoing to go back to my library, and I
see that that font is available now. SoI can close this up. And if I look over
on my right menu, I see that I havethose two options available for me too.
The other section down here is theelements. So I can go in and on a global
level, change all of my text. So nowthat I've added these two new fonts, I'm
going to go into text. And I want tochange it to the Open Sans. Okay. And
then I want to keep it regular. Okay. Sowe're good with that, we're going to
click Save. And it's going to save that,and I'm going to click back out and go
into my headings. And so now theheadings have different so I could do
all of my headings, the same fontfamily, okay. But remember that we have
one h one per page, and then we have todo our structural formatting, then the
next one would be an h two. And then wewould go into h threes, and so on. So
you see that there are different sizesof the font. So I probably want to kind
of go through and style each of thefont, double check the sizing of that is
the default sizing isn't what I wouldlike if I would like maybe the H threes
to be a little bit bigger font, I can dothat here. So let's look at this. We
want to change our font family toBellota and I want to make it the bold
Okay, and I'm gonna go a little bitbigger than extra large because the font
family is on the smaller sites. I'mgoing to click on this we're using rems
Rem is just an easier to when you whenit goes down to mobile, that it sizes a
little bit better. So let's go to a 4.5.So you can see the difference up in this
little window at the top. I'm not seeingany change over here. It might be just a
little bug within there, so I'm going toclick on that and save it and save
again. And then I can go to, like Isaid, the h two is okay.
And we can go to the all? And I need tomake sure that well, no, yeah, no, yeah,
let's just see, you can always changeyour design in the middle, right? The h
two, I'm going to keep in the Bellota.And then like that side, so I'm gonna
say that, let me go back. Because Idon't want all the font to be, can I
just realize that I wouldn't want the Hthrees to be the fancier font. So the H
threes, we're going to just make as theOpen Sans. But I do want to make it a
little bit bigger. Okay, so I'm gonna dothat. And let's just look at our front
end to see what happens there. So we'vechanged that to the bold that too, and
that is staying. So things to play withon that. So I'm going to click back out
of typography.
The next section is colors. So our colorsection takes care of kind of fine
tuning our color palettes that wepicked. Remember that I picked the
default, and the default palette has 10colors. Now if I've gotten this far, and
I might want to change to one of theother ones, or just at least see how it
is. I do have access to it right above.So if I click on the 10 colors of the
color palette, we have the palette, wehave our solid and we have our gradient,
my focus just more on the solid rightnow. And like I said, there was one
color this orange that I probably willnot use, but I did want to kind of
change that. So I can go into themes andthe three dots over here. Click and it
says Show Details. Okay. So the close upis going to show after I've changed the
color. So the reset colors will appearin that, as of right now where I'm at on
here, it just shows the show details. SoI'm going to click on Show Details. And
what's nice is that it shows the namesof the different colors. And so I want
to focus in on accent number three. Soif I click on that, I can go ahead and
change the color. I'm gonna change it tomore of a bright red, a deeper red.
Okay, so I found that I'm happy withthat it's changed. And then I have to
make sure I hit done. And then hit save.Okay, so on doing the color setting,
it's nice to kind of just double checkto make sure what you have changed. So
don't just keep looking. Alright, so Ican also add a custom color if I wanted
to add more colors within here. So nowthat we go back out to from our palette,
we go back to our colors menu.
The section down below is our colors.Okay, so we have. We can pick our basic
text background heading, we could alsodo the H ones and stuff too. Okay. So
what we want to do is the button. So I'dlike to change that one up and have it
as a universal color. So if I click onthe button colors, I have the option for
the text in the background andgradients. So let's look at the text. So
right now it's white, and I know thatwe're going to kind of keep that so then
look at our background and we're gonnachange that to red. Okay, so now we're
good with that. So then we make sure wehit save up here and that will change
the global styles of the button and thecolor setting. So then whenever I add a
button, it will be that those two colorsright we're gonna go back out.
Our next section is layout. Alright, sowe go down to layout. And the layout
section styles the main content area,and gives the content and the wide in
pixels. Okay, so that is from your leftto all the way to your right. These are
the default settings. So you see thatthere is some padding already part of
it. And if you take a look up here inthe heading, and I moved this, you can
see how that changes. Okay, we also havea block spacing, default, that's already
set there, too. So I click back out of layout.
Blocks is our next section. We will godown here to blocks and this menu opens
up all of our blocks that are withinthis theme. And we can go in and we can
customize the appearance of specificblocks and for the whole site. So that
means that if you want all your headingblocks to have a certain background
color, you could do that. Okay, youdon't want to get too involved with
doing each of these separately, becauseremember, we have our initial global
styles up here that we've alreadychanged. And if you start changing every
little block, then it gets reallyconfusing when you need to do change
something, you don't know where youchanged it. So it's always good to start
in the global styles. And then ifthere's a particular block that you
really want to kind of change, and youcould do that. So I'm gonna just give an
example of the quote block becausethat's kind of like a specialty block
that you might want to do a differentkind of font. So let's scroll down here
to my example. So we have the quoteblock. I've added a group and the quote
block has a paragraph within it. Andthen it has an area for citation which
is the author's name. So if I want tochange the font of this, okay, I can go
to typography and go down to font. Andremember that I have my Open Sans as my
overall font. And I can either do it asregular or I can do it as italic. Things
like that. And I can always change thesize of it to if I just want it small,
large, I can click on Save for that. Sothat would be an example.
I just touched on the basics of how tostyle your site with global styles. Go
explore on your site and check out morelessons.