How to Customize Your Website Colors in Zibster
Overview
Your global website colors establish the default color scheme used throughout your Zibster website. These settings control colors for text, buttons, backgrounds, icons, and accents, although the exact elements affected can vary by template. Custom colors applied within an individual block override the corresponding global settings for that block. This guide explains how to update your global colors, what each color group controls, and how to review your changes.
STEP ONE
Log in to your Zibster account and click WEBSITE in the left-side menu.
STEP TWO
Click DESIGN at the top of your Website control panel.
STEP THREE
Click EDIT DESIGN SETTINGS in the upper-right area of the Design screen.
STEP FOUR
Click COLORS in the design settings menu.
This opens your global Color Picker. Your settings are organized into Accent Colors, Button Colors, Background Colors, Icon Colors, and Text Colors.
STEP FIVE
Find the color group containing the setting you want to update. Scroll down in the COLORS panel to view additional settings.
See Understanding Your Global Color Settings below for an explanation of each group.
STEP SIX
Click the color square next to the setting you want to update to open its color selection options.
If you already know your brand color’s HEX code, you can enter it directly in the field beside the color square. A HEX code identifies a specific color, helping you match your existing branding.
STEP SEVEN
Choose your new color in the color picker. Use the vertical color slider and large color selection area, enter a specific color code in the HEX field, or enter your color’s HSL or RGB values.
You can also select a color under YOUR ACCENT COLORS or RECENTLY USED.
Click OK to confirm your selection. You can continue adjusting additional color settings before clicking SAVE CHANGES in the design settings panel.
FINAL STEP
Scroll to the bottom of the COLORS panel and click SAVE CHANGES.
Your saved colors take effect on your website. Click the X in the upper-right corner to close the design settings panel, then click VIEW SITE at the top of the Website Builder.
Review several pages on desktop and mobile, including your text, links, buttons, menus, forms, and footer.
If a specific block does not change, open that block and review its COLORS settings. A custom color applied within a block overrides the corresponding global setting for that block.
Understanding Your Global Color Settings
The descriptions below explain how each global color is generally used. The exact elements affected can vary depending on your selected website template.
Accent Colors
Accent Colors control many of the prominent colors used throughout your website, including design highlights, interactive elements, links, titles, hover effects, and featured areas.
- Accent Color #1: Controls prominent areas such as hover effects, highlighted text, page titles, and other key design elements.
- Accent Color #2: Controls areas such as item titles, caption titles, and some last item link backgrounds.
- Accent Color #3: Controls areas such as site links, social media sections, store checkout areas, and some menu block backgrounds.
A single Accent Color may appear in several places. After changing one, review multiple pages to make sure it works well wherever your template uses it.
Button Colors
Button Colors control the default appearance of buttons on your website, including:
- Button background color
- Button text color
Choose colors that make button labels easy to read and help buttons stand out from the surrounding background. This helps visitors identify actions such as contacting you, booking an appointment, viewing details, or completing checkout.
Background Colors
Background Colors control the main background areas of your website, including:
- Main site background
- Content background
- Footer background
- Form field background
Background colors should support your design while keeping your content easy to read.
To change the overall footer background, look for its setting in this group. To customize one block’s background, follow How to Change a Block Background in Zibster.
Icon Colors
Icon Colors control the default appearance of icons and their backgrounds. These settings can affect:
- Social media icons
- Icon backgrounds
- Content icons
- External link icons
- Gift card icons
- Video play icons
Available options can vary depending on your template and graphics settings.
Text Colors
Text Colors control the default colors used for written content across your website.
- Menu Text: Controls your website menu text.
- Site Text: Controls text in areas such as Text Editor Blocks, form labels, item descriptions, and other standard content.
- Contrast Text: Controls text used in designated contrasting areas, such as last item links and image gallery controls.
- Footer Content Text: Controls text displayed in your website footer.
Choose text colors with strong contrast against the background directly behind them. When adjusting footer colors, review both the footer background and footer text settings.
FINAL STEP
Once you’ve finished making your changes, scroll to the bottom and click SAVE CHANGES.
Your updated colors will now appear on your live website!
When to Use Global Colors
Use global colors when you want to update the overall color scheme of your website.
Global colors are best for:
- Setting your main brand colors
- Updating default text and button colors
- Changing template-controlled accents
- Keeping your design consistent across multiple pages
When to Use Block-Level Colors
Use an individual block’s color settings when you want to customize one specific section of a page. Available options vary by block and layout.
Block-level colors are useful for:
- Making one section stand out
- Customizing a promotion or call to action
- Improving readability within a single block
- Creating visual separation between page sections
A custom color overrides the corresponding global setting for that block. Other elements in the block may continue using your global colors.
For example, if your global button background is black but you customize one Button Block’s button background to gold, that button will display gold. Changing your global button background later will not replace the custom gold setting.
For a consistent design, update your global colors first. Then customize individual blocks where a section needs a different appearance.
Helpful Notes
Record your current colors. Before making a major change, consider saving your current HEX codes so you can recreate the original colors later.
Review colors after changing templates. A new template may apply default colors or use your existing colors differently. Review your global settings and website after switching templates.
Check smaller details. Review small text, button labels, links, and hover effects as well as large headings. Make sure text remains easy to distinguish from its background.
Check footer blocks individually. Custom colors within a footer block can override the corresponding global footer settings.
Frequently Asked Questions
Why did more than one area of my website change?
Global colors can be used in several places across your website. For example, changing an Accent Color may update links, titles, hover effects, or other template-controlled elements. Review the color group you edited and adjust it as needed.
Why did one section not change after I updated my global colors?
That section may have custom colors applied within the block. Open the block and click COLORS to review its settings. A custom color overrides the corresponding global setting for that block, while other elements may continue using your global colors.
Why do my colors look different after changing templates?
Each template can use global colors differently. Your website may apply the new template’s default colors or use your existing colors in different areas. Review your Color Picker settings and website after changing templates.
Why is some text hard to read after changing colors?
The text and background colors may not have enough contrast. Adjust either color to improve readability. If the issue affects only one block, review that block’s settings before changing a global color used throughout your website.
Can I customize colors for one specific page section?
Yes. Open the block you want to customize and click COLORS. Changes made there apply to that block instead of changing the corresponding global colors used elsewhere.
Related Guides
For color settings used in specific website features, follow these guides:
- How to Customize Your Scheduler Colors in Zibster
- How to Add a Color Overlay to Images in Images Blocks
- Blog Post Color Settings
For the separate accent color managed under BRANDING, see How to Change Your Branding Accent Color.
NEED HELP?
Have questions or need a hand? Contact our Support Team for help with your Zibster website and account.
Phone: 844.353.3412
Support Channels: Phone, Live Chat, Support Ticket
