How to Configure the Color Scheme and Fonts of the Website using the Style Editor

The Style Editor in DecoNetwork allows you to control the overall look and feel of your website, including colors, fonts, headers, buttons, and layout styling. By configuring these settings early, you can ensure a consistent design across your entire site and avoid having to manually adjust individual elements later.

In This Article

• Prerequisites
• Why Configure the Style Editor First
• Step 1: Access the Style Editor
• Step 2: Configure Header Styles
• Step 3: Configure Body Text and Links
• Step 4: Configure Heading Styles
• Step 5: Configure Button Styles
• Step 6: Configure Designer Color Schemes
• Best Practice Tips
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why Configure the Style Editor First

The Style Editor defines the default design rules for your entire website. Setting this up early helps you:

• Maintain a consistent visual identity across all pages
• Reduce the need for manual overrides later
• Ensure headers, buttons, and text styles behave predictably
• Save time when building and editing pages

Step 1: Access the Style Editor

1. Go to Admin → Websites
2. Click Manage on your website
3. Select Edit Website → Website Pages
4. Navigate to Design → Style Editor

Step 2: Configure Header Styles

The header controls the appearance of your website’s top navigation area.

1. In the Style Editor, locate the Header section
2. Adjust:
   • Background color
   • Navigation color scheme
   • Hover and active link colors
3. Scroll down to configure:
   • Dropdown menu styles
   • Mobile menu appearance

Step 3: Configure Body Text and Links

These settings define how standard text and links appear across your website.

1. Locate the Body or Text section
2. Configure:
   • Default font family
   • Font size and spacing
   • Link colors and styles

These styles apply automatically when using the Text widget.

Step 4: Configure Heading Styles

Headings (H1–H5) are used throughout your website and control the structure of your content.

1. Locate the Headings section
2. Adjust styles for:
   • H1 (largest)
   • H2
   • H3
   • H4
   • H5 (smallest)

Step 5: Configure Button Styles

Buttons are used throughout your website for calls to action such as “Buy Now” or “Learn More.”

1. Locate the Buttons section
2. Select and configure button styles
3. Adjust:
   • Background colors
   • Text colors
   • Hover effects

These styles apply automatically when using the Button widget.

Step 6: Configure Designer Color Schemes

The Designer tool uses its own color scheme, which is controlled in the Style Editor.

1. Scroll to the bottom of the Style Editor
2. Locate the Designer section
3. Adjust:
   • Background colors
   • Text colors

These settings affect how the product designer interface appears to customers.

Best Practice Tips

• Set your fonts and color scheme first before building pages
• Avoid unnecessary overrides on individual elements
• Use consistent heading levels for better structure
• Test your design on both desktop and mobile views

Troubleshooting

Changes not applying?
The element may have been manually overridden. You will need to edit that element directly.

Header not updating?
Header styling is controlled globally and may require CSS for advanced customization.

FAQs

Can I change styles for individual pages?
Yes. However, these overrides will disconnect the element from the global Style Editor settings.

When should I configure the Style Editor?
Immediately after selecting your website theme.

Do Style Editor changes affect existing content?
Only if the content has not been manually overridden.

Additional Resources

• Style Editor