How to Change Website Colors: A Complete Guide to Color Customization

How to Change Website Colors: A Complete Guide to Color Customization

By Michael Turner

December 9, 2024 at 10:37 PM

Open the Site Styles panel to change your website's colors through the color palette or individual section themes.

For site-wide colors:

  1. Navigate to Site Styles > Colors
  2. Click "Edit Palette" to select from:
    • Preset palettes
    • Image-based palettes
    • Custom color-based palettes

Color palette with yellow arrow

Color palette with yellow arrow

For section-specific colors:

  1. Open Pages panel
  2. Select your page and click Edit
  3. Click Edit Section
  4. Choose a theme from the Colors tab
  5. Save changes

Two buttons with text

Two buttons with text

Available theme types:

  • Lightest/Light/Dark/Darkest 1: Black/white text with colored backgrounds
  • Very light/Light/Dark/Very dark 2: Left palette color for text
  • Bright: Left color for text (Bright 1) or background (Bright 2)

Color picker for text

Color picker for text

Customize colors further:

  1. Open Site Styles > Colors
  2. Select theme to edit
  3. Choose element to modify
  4. Pick color using:
    • Palette presets
    • Custom color picker
    • Color values (HEX, RGB, HSL)
    • Opacity slider

Color spectrum with yellow arrow

Color spectrum with yellow arrow

Dropdown color palette menu

Dropdown color palette menu

Special features:

  • Block background colors available for accordion, form, newsletter, quote, and summary blocks
  • Frame border colors for images
  • Default color themes for integrated pages
  • Version 7.0 has different color settings accessed through Design > Site Styles

Dropdown navigation menu

Dropdown navigation menu

Remember to save all changes before exiting the editor.

Related Articles

Previous Articles