Video Transcript – Introduction
You just created your website using Edify Hub’s missionary website builder, and now you want to change the colors that are used in different places in your website.
On today’s video tip, we’ll show you how to use the customizer to change the color palette for your website.
On last week’s video tip, we showed you how to change the background image for your website using the customizer. We’ll begin the same way this week. Log in to the customizer, and then we’ll use that to change the colors.
So if we either click “Customize Your Site” or under the Appearance, choose the Customize menu. Again it opens up the customizer, where you can see what your website looks like on the right, and then options to change things on the left.
Using Your Palette – Text Colors
Let’s start by looking at Text Colors. We have here three different options for the links, for the main text, and then one for the header. And this is the headers up here – this and these different areas. And when we look at what options are available, here’s a color picker. We can change the intensity, and then across the bottom here, you see a palette of colors that you can choose from, as the basis for other colors.
The idea of a color palette comes from graphic design, where you choose the handful of colors that will be consistent across everything that you do. And that’s what happens here. Those colors are consistent across many different areas of the website. And then you can use them and make variants of those colors in your palette to use for different areas.
Changing Your Palette
So let’s take a look at how you can change the color palette. Up here in the customizer is the area for the color palette, and it lists a variety of colors. There’s the foreground color, which is the basis for text. A background color, a primary color which – primary and accent colors are a graphic design concept and you can see the primary color here. The accent color is what’s used as the basis for our links. A handful of other colors that are used in other kinds of scenarios.
And let me just show you one of the other areas where this color palette is used. I’m going to switch over and look at the home page itself. I’m on another tab. This is the website. If I click the About and go to About Uganda, there is a chart showing the different religions. And here you can see this same set of colors that are used. Again, being consistent across the website, using the same set of colors.
So if I go back to my customizer, I could actually look at this and say, “You know, this cranberry color doesn’t really fit with the rest of the theme. Let me pick the red that comes from the Uganda flag as my primary color instead.”
So let me edit the primary color. If I hit “Select Color,” I now have a color picker tool that I can use. I could move this around and try to guess at – find that right color of red by adjusting the intensity, the color, the lightness, or the darkness, and the intensity of it.
What I’ve done is, I’ve used a tool called ColorZilla. It’s a plugin for Google Chrome that let me just find the exact color. And let me just paste that in. Now this is the actual red from the Uganda flag, and you can see that it’s been updated here.
For my accent color, let’s suppose I want to choose that sky blue. I’ve done the same thing using ColorZilla to find the exact color, which I can paste here. Your graphic designer, if you have one, might also give you the “web color.” So I’ll paste in the accent color. And you can see that has changed.
Let’s suppose that my error color – let’s say that I want to make sure that it is exactly the orange from this shirt over here. I can copy in and use exactly that color. Now it’s almost the same color.
Let’s say my warning color – I want it to be exactly the yellow from the Uganda flag. And now it is that color.
And let’s suppose my info color – I actually want it to be the color of the shirt in this picture. So we can just make sure that our color palette is consistent across the entire web application.
And then my success color – I’m going to try the green that comes from the trees in the background. And I may need to make some adjustments to that to make it look right.
We’ll say that works.
Seeing Your Palette In Action
So I’ve made the changes to my color palette. I can Save and Publish those changes. And now if I the Uganda page, you can see that the new color palette has been reflected in my chart.
So using the customizer, you can choose virtually any color you want for each of those slots in the color palette, and Edify Hub’s website builder will make sure that your colors stay consistent across your entire website.