Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed WordPress Basics!
You have completed WordPress Basics!
Preview
Customize your website’s global design settings, including colors, fonts, and branding elements. You’ll also set up your site’s header and footer to create a consistent layout across pages.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Before we start building the content
of our website, we're going to take
0:00
just a few minutes to set up
the overall design styles for our site.
0:03
This includes things like colors,
0:08
fonts, and basic layout elements
like the header and footer.
0:10
Now, this isn't mandatory,
0:14
and if you're not following along with me
directly, this is up to you.
0:15
Setting these styles
0:19
globally means they automatically apply
across your entire website.
0:20
It allows you to control your site's
overall design from one location.
0:24
For example,
if you change a global color later,
0:28
it can automatically update everywhere
that color is used across your site.
0:31
This makes your site easier to maintain
and helps keep your design consistent.
0:36
This is also
how many real client projects begin.
0:41
Designers or clients
usually provide brand colors and fonts,
0:44
and developers
apply those styles before building pages.
0:47
Let's start by opening our global site
settings.
0:52
From the WordPress dashboard, click Pages
and open the home page.
0:55
Then click Edit with Elementor.
0:59
In the top left corner of Elementor, click
1:05
the menu icon
which looks like three horizontal lines.
1:08
Then click Site Settings.
1:11
Here we have a lot of options to set
global styles.
1:13
Let's begin by setting our global colors.
1:16
In the text file
provided in the downloadable
1:19
files are the color
hex codes I'll be using.
1:22
Again, please feel free to play around
with these things to your liking.
1:24
I have that file open off screen and
I'm going to copy the primary hex code.
1:28
I'll click the primary color here
and paste it in this text box here.
1:33
Perfect!
1:38
I'll repeat this
for the others too.
1:39
Now that those are done,
1:55
I'm actually going to add a new color
with this button in the sidebar.
1:56
I'll click it here
2:04
and paste in the Accent 2 color.
2:05
Now back in the sidebar, I'll click
on the name and rename it to Accent 2.
2:08
Then I'll do the same
for the background color.
2:13
Now let's
2:26
click fonts up
top here and select this primary one.
2:26
Primary fonts are typically used
2:29
for headings and large titles
across the website.
2:31
In the sidebar, I'll change the font
family and search for Quiksand,
2:34
provided by Google fonts.
2:38
Then I'll click on the text option
2:44
and change this one to Open Sans.
2:46
You could go further
and adjust more options
2:50
like the size and spacing, but
I'm not going to worry about that for now.
2:52
Finally, don't forget to save changes.
2:55
Okay, now let's set
2:59
our logo before we jump into the header
and footer.
3:00
From the site settings
menu, select Site Identity.
3:03
Here we can adjust the site
3:10
name, description, logo, and favicon.
3:12
The favicon is the little image
your browser tab shows.
3:15
Let's click to choose
an image for the logo.
3:19
I'll choose the logo image we uploaded.
3:22
And I'll do the same for the favicon.
3:28
Then save changes
3:35
Okay, now let's go into Hello Theme
Header. The theme's header and footer
3:38
are automatically applied to all pages.
So we just edit them in one place here
3:42
and the changes will take effect
throughout. Here we can toggle our logo,
3:46
tagline, and menu.
3:51
I'll actually remove the tagline
from the header.
3:54
This will switch the layout.
3:57
You can have it stretch
4:03
horizontally across the entire screen
if you like and add a little side margin.
4:04
I'll leave mine as boxed.
4:08
Here we can change the background,
4:10
like a solid color or gradient,
or you can use an image.
4:12
I'll click this globe icon next to
the color and select my background color.
4:16
Let's expand Site Logo.
4:23
At this point,
I actually hit a bit of a hiccup.
4:25
I selected the type to be logo
and wasn't seeing the change take effect.
4:28
I saved my changes
and went back to WordPress, then
4:32
reopened Elementor and things were updated
just fine.
4:35
So if you're experiencing this as well,
maybe try
4:39
backing out and getting back in again.
4:42
So make sure if you're following along
4:45
that the type is set to logo
and it should bring our logo image in.
4:47
Okay nice, let's adjust the width
to let's say 80 pixels.
4:52
Let's expand the menu.
4:56
If we built
5:03
multiple menus back in WordPress,
you'd be able to select them from here.
5:03
Let's leave this as horizontal
and here we have the breakpoint.
5:07
This tells the site when it should change
from this horizontal menu
5:12
into a mobile hamburger style
drop down menu.
5:16
Let's just leave this as tablet.
5:19
Let's adjust the
5:22
font color
and I select the secondary color
5:23
Finally, I'll change the typography
to our global text setting.
5:27
Awesome, let's save again to be safe
5:31
and adjust our footer.
5:34
I'll use the tagline instead of the logo
5:42
this time around, and I'm going to adjust
the background color
5:44
again.
5:47
Let's adjust the tagline, text
5:51
color, text, typography, text.
5:53
Okay, down to menu.
6:00
Color, secondary,
6:06
typography, text,
and lastly the copyright.
6:11
I'll leave the content as is
and just do our text color to text
6:16
and typography to text.
6:21
And save changes.
6:25
Alright, lastly, let's go to background.
6:28
Classic type.
6:34
Global color.
6:36
Background.
6:37
Save.
6:40
Awesome.
6:42
Feel free to keep exploring
through these settings.
6:43
You may find more things that you'd like
to adjust in your projects.
6:46
I know that
this probably feels like a lot of setup,
6:49
but we've gotten all of the not fun stuff
out of the way.
6:52
Now that our colors, font, header,
and footer are set, every page
6:56
we build moving forward
will automatically follow these styles.
7:00
This helps keep our website
consistent and professional
7:04
and will save us a ton of time
copying and pasting
7:06
color values, and trying to remember
what font we're using.
7:09
So in the next video, we'll begin
designing the content of our homepage
7:13
by building
a hero section using Elementor.
7:16
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up