Effective color management is crucial for creating a visually appealing website. Here's how to modify colors across your site:

Site-Wide Color Changes

1. Access the color palette:

• Open "Site Styles" panel
• Click > next to "Colors"
• Select "Edit Palette"

2. Choose from three palette options:

• Presets: Pre-defined color combinations
• From Image: Generate palette from uploaded image
• From Color: Create palette based on primary color

Note: All palettes include black and white for text elements.

Changing Section Colors

To modify individual section colors:

1. Open "Pages" panel
2. Select page and click Edit
3. Click Edit Section or pencil icon
4. Select desired theme in Colors tab
5. Save changes

Theme Types:

• Type 1 (Lighter 1, Light 1, Dark 1, Darker 1): Black/white text with colored backgrounds
• Type 2 (Lighter 2, Light 2, Dark 2, Darker 2): Colored text with varied backgrounds
• Bright: Color applies to text (Bright 1) or background (Bright 2)

Special Areas:

• Notification Bar: Matches header theme
• Mobile Menu: Follows header colors
• Embedded Pages: Uses template's default theme

Customizing Colors

To edit specific theme elements:

1. Open Site Styles > Colors
2. Select theme to edit
3. Choose element to modify
4. Pick new color using:
   • Palette tab
   • Color picker
   • Custom values (HEX, RGB, HSL)
5. Adjust opacity if needed

Background Colors for Blocks

Available for:

• Accordion Blocks
• Form Blocks
• Newsletter Blocks
• Quote Blocks
• Summary Blocks

Enable backgrounds through the block's Design tab.

Version 7.0 Differences

For sites using version 7.0:

1. Open Design panel
2. Access Site Styles
3. Manually adjust colors
4. Preview changes on selected page
5. Save modifications

Accessibility Tips:

• Ensure sufficient contrast between text and background
• Test color combinations for readability
• Consider color-blind users when selecting palettes

Remember to maintain consistent branding while making color adjustments across your site.

Related Articles

Previous Articles