As an internet marketing virtual assistant who specializes in assisting HubSpot customers I thought it might be helpful to produce a series of video tutorials to help my clients learn how to make simple changes to their HubSpot websites. This is the first in a planned series of "how to" videos.
Transcript:
Hi everyone,
This is Shari Sultana from Modern Marketing Support. Today we're going inside the HubSpot dashboard to learn how to change our website's color scheme.
We've recently changed our logo header and the color scheme we currently have doesn't match our new look. So, we want to change that.
HubSpot has a couple of different website templates available within their content management system. We're using the Brighton template.
As you can see, right now now our website has purple side panels and a green navigation bar. To make our website coordinate with our new header we need to go into the Settings tab. The Settings tab is over here in the right top corner. Click on that.
Inside the Settings tab you'll find the inner sanctum of your HubSpot website. It's divided into sections and we want the section called Content Management System. We're going to click on Template Configuration. You'll see it says "adjust the colors of your website". Let's click on it.
Inside here there are 2 areas. Once is basic and the other is for more advanced customization. Today we'll just look at the Basic customization and in a second tutorial we'll look at Advanced customization.
Now, there's also a logo/color wizard up at the top here but let's ignore that this time. We'll check that out in another tutorial.
You'll notice that we can adjust the Primary, Secondary and Background colors. Let's go ahead and adjust the background color first. When we do that we'll actually be changing the colors of the side panels.
Click on color picker and you'll see this color palette appear. We can change our color one of 2 ways. If we don't know the exact color we want we can move this T around and you'll see the color changing in the box.
Or, if you know the hexadecimal number of the color you want then you can add it in this box here. I know the color I want is DAF1F7 so I'm going to enter it here in the box. You'll see it change to the color I want and then we'll click Save.
See how it says "changes saved. view website"? That's great. Let's go see how it looks. Wow. That looks much better. Now, let's go change the navigation bar.
If we want to change the navigation bar we click on Primary color. We'll add the hexadecimal number BFE5EE and click Save. Now, let's go view our changes and see how it looks.
Much better. Now if we wanted to we could also change the color of the font within the navigation bar and we can also change the hover color as well. But those are advanced options and I'll show you how to do that in the next tutorial.