×

Step-by Step-Guide to Choosing Your Style Guide Colors

Created by Faye BSG, Modified on Thu, 30 Nov 2023 at 01:28 PM by Education Team

This article shows how to add custom colors to your Style Guide inside your ClickFunnels 2.0 account. This will allow you to personalize your pages and make them look more uniform. 


Step by Step Walk Through:

There are two ways to reach your Style Guide Settings. Let's check the first one.

  1. Click on Site and Funnels.
    2022-12-07_11-15-16.png
  2. From the Site Overview, click the three-dots menu and select Edit Style guide.customizestyleguide.png
  3. Now you can start editing your Style guide. 

Now, let's review the second way to access your Style Guide Settings.

  1. Click on Settings.
    Settings.png
  2. Click on Styles.
    Styles.png
  3. Identify the Style you want to edit, and click on the color pallet icon.
    existingstyles.png
  4. Now that you opened your Style Guide Settings, click on Colors.
    colors.png
  5. You will see the color range selected by default for your Style guides.
    rangecolors.png
  6. More colors can be added to that section using a free tool. Visit https://color.adobe.com
  7. You can play with the color roulette to get the desired color skims.colorroulete.png
  8. Also, you can click on Trends to explore more color skims options.
    trends.png
  9. Click on the color skim of your choice. You will see that each color has their own code.
  10. Copy the code and go back to ClickFunnels.
    colorcodes.png
  11. Click on any color of your color range to replace the colors.
    replacecodes.png
  12. Repeat the process for the rest of the colors.
  13. You will still have three remaining colors. For these, is suggested to use white, light gray and a dark color, but basically, you can add any color of your choice.
  14. Once you have selected your colors, click on Autogenerate to assign a color for each section of your page.
    autogenerate.png
  15. You can always change the color of a section. You only need to click on the section and manually adjust the changes.
    editcolors.png
  16. Congratulations! Now you know how to add colors to your Style Guide.

You might find these links helpful:

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article