Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Changing colors

Whether you prefer a black-and-white theme or daring color combinations, you can use the Style Editor to adjust the colors for your site’s text, lines, and background areas.

This guide provides an overview of how to adjust colors for the different elements on your site.

Note: Cover Pages have their own style options.

Before you begin

  • Color changes apply site-wide, so changing the color for one element of a page, such as the Body Text, will change it on all pages.
  • To change the color of a specific section of text, like one individual word in a sentence, use a Markdown Block.
  • Each color tweak must be adjusted individually.
  • Color changes don’t transfer when you switch templates. They reappear if you switch back to the template.
  • There isn’t a way within the Style Editor to adjust colors for an individual page or block. If you have coding experience, you could try making the change with CSS. Please note that we don't provide support for advanced modifications like this.

Step 1 - Select a page

First, navigate to a page where you’d like to see changes. From the Home Menu, click Pages. Then click a page whose colors you want to adjust.

There are two reasons for opening a page first:

  1. Some tweaks only display when you’re on a page they affect. For example, your Blog Page may have title-specific tweaks, which only appear in the Style Editor when you’re previewing a Blog Page.
  2. Even if your changes will apply site-wide, you can preview your style edits on the selected page as you make them.

After selecting the correct page in the Pages panel, return to the Home Menu. From there, click Design, and then click Style Editor.

Step 2 - Find a color tweak

The specific style tweaks depend on your template. Scroll down within the Style Editor to see all tweaks available on the page you’re viewing.

Every color tweak has a circle next to its label. This circle shows the current color for that element.

Note: The circle won’t show if the color is transparent, or if it's the same gray as the Style Editor background.

To find tweaks specific to an element on the page, click it. The Style Editor will display only the style tweaks for that element and hide the rest. This shortcut is available in most templates and for most areas on your site.

Click Show All to display all the tweaks for the page again.

Once you’ve found the tweak, click it to open the color picker.

Step 3 - Pick a color

Use the color picker that opens to find the color you want. Click the slider to choose the color, and adjust the shade (light/dark) by clicking the square in the middle.

color_picker.gif

Alternatively, if you know the value for the color you want, you can enter it in the value field. The value field accepts any of these formats:

  • HEX - Example: #FFFFFF
  • RGB or RGBa - Example: rgba(255, 0, 149, 1)
  • HSL/HSLA - Example: hsla(325, 100%, 50%, 1)
  • HTML - Example: White

For help finding a specific color value, you can visit external sites like color-hex.com or imagecolorpicker.com.

Tip: The value field populates automatically when you use the color slider to find a color. You can copy and paste this code to add the same color to other tweaks in the Style Editor.

Step 4 - Change the transparency

To adjust a color’s transparency, use the opacity slider by dragging the circle below the color picker. The left side is completely transparent, while the right side is completely solid.

Note: Some color tweaks don't include an opacity slider.

The opacity slider is particularly useful for overlay colors, which display over images.

overlay_opacity_slider.gif

If you have one color or image that overlays another, making the top layer transparent keeps the bottom layer visible.

opacity_slider_on_title.gif

Step 5 - Finish and save

Click anywhere outside the color window to close the color picker.
 
To undo any changes before saving, click the undo icon at the top of the panel, or click the dot next to a specific tweak. See Making style changes for more information.  

undo_and_dot_icons.jpg

Once you’re finished making changes, click Save.

click_save.jpg

Was this article helpful?
20 out of 45 found this helpful