One of the simplest ways to personalize a Showit website template is to change your Showit website’s color palette. It’s an easy change that can result in a dramatic difference, and it allows you to take a template and turn it into a totally custom-looking website. Below I’m covering a variety of ways you can edit the colors on your Showit website—whether you want to change the entire website’s color palette, the background color of just one section, link colors, and more.

How to Change Your Showit Website’s Color Palette

Before you start changing colors for individual pages, sections, or elements, you should change your Showit website’s color palette in its entirety. To do so:

Note: Finalizing your color palette before going through these steps will help ensure your customized website template looks professional and cohesive. You’ll need the HEX code for each color, which consists of # followed by 6 alpha-numeric characters (i.e. #F2F2F2).

1. Click ‘Design Settings.’
2. Under the ‘Site Style’ tab, find your color palette. All Blissful templates follow Showit’s Designer guidelines, which require color palettes to be in dark to light order. 1 is typically black for text, while 8 is white for plain backgrounds.
3. Click the color you want to change. Type in your color’s HEX code (i.e. #F2F2F2) in the box. Click OK.
4. Complete step 3 for all of the colors you want to change.
5. When you’re done, click Save.

How to Change the Background Color of a Canvas

Showit calls a section of your website a “canvas.” To change the background color of one canvas:

Note: Whenever you’re changing colors on your Showit website, you’ll see a value next to a color box (typically 100%). That’s the opacity, or how transparent the color will show up. 0% equals totally transparent, while 100% is full color.

1. Click the canvas you want to change the background color of.
2. In the right panel, click ‘Canvas Background.’
3. Set the ‘Type’ drop-down to ‘Color.’
4. Click the color square, and you’ll see your color palette pop up.
5. Select the color you’d like for your canvas background, or type in the color’s HEX code.
6. Be sure to change your mobile website as well. Click the ‘Mobile’ tab and repeat these steps.

How to Change the Background Color of an Entire Page

If you want to change the background color of an entire page of your website—for example, taking a white background template and changing it to a black background—follow these steps:

Note: Canvas backgrounds will override a page background. If the steps below don’t work, you may need to click each canvas, go to ‘Canvas Background,’ and set ‘Type’ to ‘None.’ This will make it much quicker to change the background color of an entire page in the future.

1. From the ‘Site’ tab in the left panel, click the page you want to change the background color of.
2. In the right panel, click ‘Page Background.’
3. Set the ‘Type’ drop-down to ‘Color.’
4. Click the color square, and you’ll see your color palette pop up.
5. Select the color you’d like for your page background, or type in the color’s HEX code.
6. Be sure to change your mobile website as well. Click the ‘Mobile’ tab and repeat these steps.

How to Change the Color of One Element

The beauty of Showit is that you can change the color of any element you want. For example, you may want to have little text accents be a different color than the rest of your website’s text. On other website platforms, you’ll need to use code or design software to do this. With Showit, you can select any element throughout your website and change the color as needed.

1. Select the element you want to change the color of.
2. In the right panel, click ‘Text Style’ (or ‘Shape Style’ if you’re changing a shape).
3. Click the color square, and you’ll see your color palette pop up.
4. Select the color you’d like for your element, or type in the color’s HEX code.
5. Be sure to change your mobile website as well. Click the ‘Mobile’ tab and repeat these steps.

How to Change the Color of Links

There are a few ways to change the color of your text links. The quickest way is below:

1. Go to ‘Design Settings.’
2. Under the ‘Site Style’ tab, find ‘Type Styles.’
3. Click the 3 dots next to each type style for both mobile and desktop to expand all of your type settings.
4. Once you expand a type style, you’ll see ‘Link’ with color and format options.
5. Click the color square, and you’ll see your color palette pop up.
6. Select the color you’d like for your links, or type in the color’s HEX code.
7. If you’d like to change the color of your link when you hover over it, you can repeat steps 5-6 under ‘Hover Color.’
8. If you’d like your links to be underlined normally or on hover, you can select ‘Underline’ under ‘Format’ or ‘Hover Format.’
9. Make sure you repeat these steps as needed for all type styles under ‘Mobile’ and ‘Desktop.’

If you’ve completed the steps above but you’re not seeing the correct settings for a particular link within a block of text, complete these steps:

Note: If you see ‘Paragraph+’ or ‘Heading+’ (etc.), that means that block of text is a paragraph or heading but has edited design settings that are only affecting that block of text.

1. Select the block of text that contains a link with incorrect settings. The quickest way to reset this text to your site’s Design Settings is to find ‘Text Style’ in the right panel, go to ‘Style,’ and select the appropriate text style for that block of text.
2. If this particular block of text is one you’ve made design changes to so it’s different than other blocks of text (for example, you’ve made one paragraph italicized and a smaller font size than the rest of your paragraphs), you won’t want to complete step 1. Instead, under ‘Text Style,’ find ‘Inline Links’ and edit the link color for that specific text block only.

Questions?

If you run into any issues along the way or have questions, submit them in the comments below. The Showit support team is also phenomenal. Start a conversation with them by hitting the question mark chat icon in the bottom right-hand corner of your Showit editor.

To get more familiar with the Showit platform, try our free demo, browse the Showit learning center, or read more of our Showit tutorials.