How to customize your website branding?
This article will teach you how to customize the branding of your course website.
Customizing your website with a logo, brand colors, and other aspects to best suit your company is key to establishing a strong brand and making sure it stands out from the competition.
In this tutorial, I show you how to customize your website branding on OnlineCourseHost.com.
You’ll learn how to:
- Setup brand colors
- Override the site font
- Upload favicon
- Setup footer color
- Edit page title
All the brand customization happens in the Settings screen.
1. Go to Admin => Settings and locate the General tab.
Setup Brand Colors
I advise selecting two brand colors (the major color and the accent color) for your online course business based on the feelings you want to convey to your students.
I also advise browsing through these colors and searching for the feelings you want people to associate with your brand:
- Red: Power, Passion, Energy, Fearlessness, Strength, Excitement
- Orange: Courage, Confidence, Warmth, Innovation, Friendliness, Energy
- Yellow: Optimism, Warmth, Happiness, Creativity, Intellect, Extraversion
- Green: Health, Hope, Freshness, Nature, Growth, Prosperity
- Blue: Trust, Loyalty, Dependability, Logic, Serenity, Security
- Purple: Wisdom, Luxury, Wealth, Spirituality, Imaginative, Sophistication
- Pink: Imaginative, Passion, Transformation, Creative, Innovation, Balance
- Brown: Seriousness, Warmth, Earthiness, Reliability, Support, Authenticity
- Black: Sophistication, Security, Power, Elegance, Authority, Substance
- Grey: Timelessness, Neutrality, Reliability, Balance, Intelligence, Strength
- White: Cleanness, Clarity, Purity, Simplicity, Sophistication, Freshness
If you want to make your brand look more premium and of higher value, go for darker primary colors and pastel secondary colors.
To learn more about branding and colors, read this post: Create a Powerful Brand for Your Online Courses (In 5 Steps)
1. Scroll down the General tab, and locate Brand Colors
Choose both of your:
Primary Color: This is the color most key features use inside your course (and on your sales page and course website). It’s what your audience will come to know well during their experience.
For example, the top header menu of your website uses this color, so it will be visible everywhere.
See the image below for more clarity.
This page uses the Primary color #0F284B.
Accent Color: this is the secondary color that many buttons and other elements will use on your pages. The goal of this secondary color is to call attention to a particular element of the page, so the color should be very different from the primary color.
See the image below for more clarity.
This page uses the Accent color #EB3B3B.
2. To choose your brand colors you can either type in the color codes if you have them:
Note: The color codes you see at first glance are the default colors, which you can always change by deleting and typing in yours.
You can also find the perfect tone using the color picker:
Want to know more about color codes, read this post from December.com: Hex color codes
3. Click on Apply Brand to apply your color combination throughout your website.
Override Site Font
You can also override the website font, by providing a publicly reachable url for the font that you want to use.
For example, let's say that you want your website to use the Roboto font, instead of the default Inter font.
You would start by setting the Url of the font, that would look like this: https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono:300&cache-busting=599510" rel="stylesheet
Then you would need to set the font name to Roboto:
Then click on Apply Brand, and refresh the website to see your new font.
A favicon is a graphic image (icon) that is associated with your website. It acts as a visual reminder of a website identify in the address bar or in tabs. Most businesses use a smaller version of a logo as a favicon to increase brand awareness and visibility.
Here is an example of OnlineCourseHost.com favicon:
1. Under the Admin => Settings => General, locate Edit School Details section.
2. Scroll down, before Language Settings, and you will find Upload Favicon.
3. Click on the arrow pointing upward.
NOTE: This step requires that you have your favicon ready. The best way to create a favicon is to use a favicon generator like the one from Realfavicongenerator.
Course creators can upload an icon that they have in an image, and get a favicon package generated for them.
3. Once you have your favicon, go ahead and upload it.
4. Click Save when done.
Setup Footer Color
1. Under the Admin => Settings => General, locate Customize Website Footer section.
2. Scroll down to Choose Footer Color
To choose your footer color you can either type in the color code if you have it.
Note: the color code you see at first glance is the default color, which you can always change by deleting and typing in yours.
The default footer code is: #474e50
or find the perfect tone using the color picker:
4. Click Save to apply the footer color to your website.
Edit Page Title
1. Under the Admin => Settings => General, locate Edit School Details section
2. Under Type Here Your School Name, enter your new page title
NOTE: This should have a minimum of 10 characters.
3. Click Save when done.