Customizing the color scheme of your website is a great way to reflect your brand’s personality and create a visually cohesive experience for your visitors. With OzSpeed’s Website Builder, you can easily update the colors for backgrounds, text, buttons, and other elements across your site. Here’s a step-by-step guide on how to change and personalize your website’s colors.
Step 1: Access the Website Editor #
To begin updating your website colors, open the page editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Click on Website Settings in the top toolbar to access the Design Settings panel.
Tip: #
- Have your brand color palette ready, including your primary color, secondary colors, and any accent colors you plan to use.
Step 2: Open the Color Settings Panel #
The Color Settings panel allows you to customize the colors for different elements on your website.
How to Access Color Settings: #
- Click on Design Settings > Colors in the left-hand menu.
- You’ll see options for Primary Color, Secondary Colors, Accent Colors, and Text Colors.
Tip: #
- Use colors consistently across your website to create a unified brand experience.
Step 3: Change the Primary Color #
The Primary Color is the main color of your website, often used for headers, buttons, and key accents.
How to Update the Primary Color: #
- Click on the Primary Color option.
- Choose a new color from the color picker or enter the hex code (e.g., #FF5733).
- Click Apply to save the changes.
Tip: #
- Choose a color that aligns with your brand and stands out without being overwhelming.
Step 4: Update the Background Color #
You can change the background color of your entire website or specific sections.
How to Change Background Color: #
- Click on the Background Settings tab in the Design Settings panel.
- Select a Solid Color, Gradient, or Image Background.
- Use the color picker to choose a new color or gradient combination.
- Click Apply.
Tip: #
- Opt for a light or neutral background color to keep your text readable.
Step 5: Customize Text and Link Colors #
Ensure your text is easy to read and your links are easily distinguishable.
How to Change Text and Link Colors: #
- Go to Text Settings in the Design Settings panel.
- Choose a color for Body Text, Headings, and Links.
- Adjust the hover color for links to make them interactive.
- Click Apply.
Tip: #
- Use a dark color for text on light backgrounds and a light color for text on dark backgrounds for better contrast.
Step 6: Update Button Colors #
Your call-to-action (CTA) buttons should stand out to attract clicks.
How to Customize Button Colors: #
- Click on any Button Element to open the Design Settings.
- Change the Button Background Color, Text Color, and Border Color.
- Adjust the hover color for a dynamic effect when users interact with the button.
- Click Save.
Tip: #
- Use a bold, contrasting color for buttons to draw attention and encourage user action.
Step 7: Preview Your Color Changes #
Before finalizing, preview your website to see how the new color scheme looks across different pages and devices.
How to Preview: #
- Click Preview in the top toolbar.
- Navigate through your site’s pages to check the color consistency.
- Switch between desktop, tablet, and mobile views.
Tip: #
- Use an incognito window or clear your browser cache to see the changes as a new visitor would.
Step 8: Publish Your Changes #
Once you’re satisfied with the color updates, publish your website to make the changes live.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm your changes to go live.
Tip: #
- Announce your new color scheme on social media or in your newsletter if it’s part of a broader brand refresh.
Troubleshooting Tips #
- Colors Not Updating Properly:
- Ensure you’ve clicked Apply and Save after making each change.
- Clear your website cache in hPanel and your browser cache.
- Poor Contrast Issues:
- Test the readability of your text against the background color using tools like Contrast Checker.
- Adjust colors to ensure they meet accessibility standards for better user experience.
- Inconsistent Colors Across Pages:
- Use the Global Color Settings to apply your changes consistently across the entire website.
Additional Tips: #
- Stick to Your Brand Colors: Use your brand’s official color palette for a professional and cohesive look.
- Use Color Psychology: Different colors evoke different emotions. Choose colors that align with the mood and message of your website (e.g., blue for trust, red for urgency).
- Test Your Design: Gather feedback from colleagues or users to see if the new color scheme is visually appealing and effective.
