Previous Lesson

Customizing Your Website with Inspiring Colors

I must admit, the little design trick I’m going to share with you in this lesson really tickles my fancy!

We’re about to choose THE COLOR(S) of your wellness business! And like with so many other things in life, I like to find inspiration in Mama Nature.

If you’re here, I’m pretty sure you’ve benefitted in countless ways from the inspiring beauty that exists all around us. But have you ever considered actually basing the colors you choose for the visual identity of your business in nature itself?

In this lesson, we’re going to find you a marvelous color you feel excited about and use it to customize your website!

Finding Your HEX Color Code

An hexadecimal color code is, in most cases, a six-digit code preceded by a number sign (#) used to represent a color. For example, the color white is represented by the code #FFFFFF and the color black is represented by the code #000000.

As you might have noticed, we use a type of green color called Forest Green here at the Wellness Business School. Forest Green not only colors our logo, but also buttons, sections and other elements throughout our website, resources and even social media posts. It gives us a consistent brand identity which is an important (and often overlooked) aspect of building a successful business.

Alright so without further ado, let me hook you up with a few fantastic color resources so that you, too, can find a color that resonates with you and your wellness practice:

Step #1: Find a picture you like.

Go to Design Seeds (a beautiful blog about color), search for nature-inspired color palettes on Pinterest (or click here to get started), or look for Nature Color Palettes on Google Images (a Google Search counts as a resource… Right? Right?).

You can also head over to Unsplash (my favorite free source of beautiful images) and pick a picture you like. Don’t worry, we’ll find its color codes on the next step.

Important Tip: Make sure you choose an accent color that is dark enough to serve as background for white colored text (and that can be easily read in white background).

For my website example, I associate mindfulness with the calmness of the ocean and so I went to Unsplash and found a picture of a calm-looking ocean:

Step #2: Find your HEX Color Code.

Some of the resources above share the codes for each color. So if you already have your code (e.g. #65JH3D) then you can skip this step. If, in turn, you want to explore an image like I’m doing with the one above, head over to the HTML Colors from Image website, upload the picture you chose, and find your HEX Color Code. 

As you can see in my example, I chose a turquoise color from the depths of the ocean. My new color code is #0E869C!

Step #3: Save Your Color Code

Copy your new HEX code and keep it somewhere safe and accessible. You’re going to be using it quite a lot to customize your website, social media posts, etc. So make sure you keep it in a place where you can easily fetch it.

Customizing Your Website with Your New Accent Color

Attention: The changes we’re going to make in this lesson will apply to almost all elements of the website, but not all of them. You will still see traces of 

Now it’s time to replace the default Dark Blue color you see throughout your website with your new accent color. There are a few places we must change it in order for it to take effect across the board, but the most important one’s are in the Theme Customizer so let’s start with that.

Step #1: Theme Customizer

Copy your new HEX Color Code and paste it in the following Theme Customizer sections:

  1. General Settings > Layout Settings > Theme Accent Color
  2. General Settings > Typography > Body Link Color
  3. Buttons > Buttons Style > Background Color & Border Color
  4. Buttons > Buttons Hover Style > Background Color
  5. LearnDash Design Upgrade > Buttons > Primary Button & Hover: Primary Button
  6. LearnDash Design Upgrade > Buttons > Standard Button & Hover: Standard Button

The following video will show you how to apply all of the changes above. Don’t forget to hit Publish and refresh the page afterwards to see the changes take place. 

Step #2: LearnDash Settings

Go back to your WordPress Dashboard, head over to LeadDash LMS > Settings, and replace:

  1. Accent Color
  2. Progress Color

The following video will show you how to apply all of the changes above. Don’t forget to hit the Save button and don’t worry about the logo just yet, we’ll come back for it later. 

Step #3: Active Link Color in the Menu

Finally, we just need to quickly edit our Header Section. We’re going to cover the Header and Footer sections a few lessons from now and finish customizing them. Right now, you can notice how the active link in the menu is still set to the default Dark Blue. Let’s change it:

  1. Go to Divi > Theme Builder > Global Header and click the little pencil icon on its left.
  2. Let the menu and the logo load. Select the module and press the wheel icon to access the Menu Settings.
  3. Head over to the design tab and choose menu text.
  4. Change the Active Link Color to your new accent color.
  5. Click the purple “…” button to open the Visual Builder menu.
  6. Click the Save button on the right to save changes.

The following video will show you how to apply all of the instructions above. Again, don’t worry about the logo just yet, we’ll come back for it later.

Aaand that’s it! By now you should see almost all of the elements of your website painted with the special new color you found in this lesson. Great job, Picasso! ?