Changing Colors

In this tutorial, you’ll learn how to change your color scheme on your site!

Everyone’s logo and branding should match to build credibility and brand recognition. Typically you’ll want to select a color scheme that mirrors your logo. If you want to read more on selecting a good color scheme, check out our Learn More section for tips and resources. There are several reasons why changing your color scheme will help you succeed with Carrot. A few of those are:

  • Doing so helps to differentiate your site.
  • Doing so makes your site look more professional and trustworthy.

We will cover both how to change colors on the sitewide level, as well as how to change colors for a specific page on your website – Let’s get started!


Part 1 (of 2) Changing Colors Sitewide

Step 1: Navigate to Dashboard > Design > Colors:

Step 2: Select Your Desired/Chosen Colors:

  1. Play around with this tool to get a feel for the color slider!
  1. You can change the color of Links, Buttons, Navigation Bar, Site Title, and overlay Background Color for your Hero Banner.
  1. Using the two available sliders, you can change the color and the saturation of the color. You can click the “default” button to revert back to the original colors that were used when you first launched the site.

    Finally, there is a field where you can insert a hex value, if this is necessary for you!

*It’s a good idea to have your button color contrast with your Primary Color so your call to action is clear. This will subconsciously influence the people who view your site to fill out your form! If you have a 2 toned logo, It’d be beneficial to have 1 color be your Primary, and the other be the Button if they contrast enough!


Step 3: Save Edits by Clicking “Publish”!

*Keep in mind you won’t be able to see the changes take effect on your Live page until you hit the publish button

That’s it! Your colors have just been changed!


Part 2 (of 2) Changing Colors within a Page

Step 1: Navigate to Dashboard > Content > Pages:

  1. Once there, hover over the specific page that you would like to be making changes to.
  2. Next, click “edit” from the options that will appear below the page’s title.

Step 2: Change the Colors of Your Blocks!

  1. First, click on the Block/Element that you would like to change the color of. Note: Not all blocks offer this! Some blocks that do: Text Blocks such as Paragraphs and Headings, the Cover Block, and Button Blocks!
  2. Next, look through the tool panel on the right-hand side of the screen. There will be a “Color” drop-down menu available. Click this to open it up!
  3. Finally, choose your desired color from the presented options! These given options are based overall color scheme that you are using on the broader site.

Conclusion:

In this tutorial, you learned how to change the colors on your site and why this is valuable!


Learn More: