How To Customize Website Colors

How To Customize Your Website Design Colors

This video tutorial walks you through how easily you can customize the color scheme on your PhotoBiz website.

How to Customize Your Website Colors in PhotoBiz

Overview

PhotoBiz makes it easy to customize your website colors so your site matches your brand, photography style, and overall design preferences. Your website includes global color settings that help control the main color scheme used by your selected template.

Each block in the PhotoBiz Website Builder also has its own color settings. Block-level color settings override the global Color Picker for that specific block, giving you more control over individual sections of your website.

This guide walks you through how to update your global website colors, how global colors work with block-level colors, and how to save your changes. By the end, you will know where to adjust your main website color scheme and when to edit colors inside a specific block.

STEP ONE

This opens your Website Builder, where you can manage your website pages, design settings, and content blocks.

STEP TWO

Click DESIGN at the top of your Website control panel.

This opens the design area for your website. From here, you can manage global design settings that affect the overall look and style of your site.

STEP THREE

Click EDIT DESIGN SETTINGS in the upper right area of the Design screen.

This opens the design settings panel where you can adjust your template settings, fonts, colors, and other global design options.

Please Note: If you change your website template, your colors may also change to the default color settings for the new template. You may need to review and update your colors again after changing templates.

STEP FOUR

Click COLORS in the design settings menu.

This opens the global Color Picker for your website. Your colors are organized into groups so you can control the main color scheme used by your website template.

Your available global color groups include:

Accent Colors
Button Colors
Background Colors
Icon Colors
Text Colors

The exact areas affected by each global color may vary depending on the website template you are using. Some templates use certain global colors more heavily than others.

STEP FIVE

Choose the color group you want to edit.

Each global color group controls a different part of your website design. Before making changes, it is helpful to understand what each group usually affects.

Accent Colors

Accent Colors control many of the prominent colors used throughout your website. These colors are often used for design highlights, interactive elements, links, titles, hover effects, and featured areas.

Your Accent Colors may include:

Accent Color #1: Controls prominent areas of your website, 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.

Accent Colors can affect your website in different ways depending on your selected template. After changing an Accent Color, review multiple pages on your website to make sure the color works well in all areas where it appears.

Button Colors

Button Colors control the default appearance of buttons on your website.

These settings usually include:

Button background color
Button text color

Use button colors that are easy to read and clearly stand out from the surrounding background. This helps visitors quickly identify important actions such as contacting you, booking a session, viewing details, or completing checkout.

Background Colors

Background Colors control the main background areas of your website.

These settings may affect areas such as:

Main site background
Content background
Footer background
Form field background

Background colors should support your design without making your text difficult to read. Subtle background colors usually work best because they allow your images, text, buttons, and accent colors to stand out.

Icon Colors

Icon Colors control the default appearance of icons used throughout your website.

These settings may affect areas such as:

Social media icons
Icon backgrounds
Content icons
External link icons
Gift card icons
Video play icons

The available Icon Color options may vary depending on the graphics settings and template options applied to your website.

Text Colors

Text Colors control the default colors used for written content across your website.

These settings may include:

Menu Text: Controls the color of your website menu text.
Site Text: Controls text in areas such as Text Editor Blocks, form labels, item descriptions, and other standard content areas.
Contrast Text: Controls text used on certain high-contrast 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 behind them. This helps visitors read your content clearly on desktop and mobile devices.

STEP SIX

Click the color square next to the color setting you want to update.

The Color Picker will open. You can choose your color using the color wheel, enter your color details manually, select from your Accent Colors, or choose a recently used color.

If you know your brand color’s HEX code, you can enter it directly to match your existing branding.

STEP SEVEN

After selecting your new color, click OK to apply it to the Color Picker.

This confirms the selected color inside the design settings panel. You can continue adjusting additional color settings before saving your final changes.

FINAL STEP

Click SAVE CHANGES at the bottom of the design settings panel.

Your updates are automatically applied to your website after you save. Open your website and review several pages to confirm that your global colors look correct across your content, buttons, menus, forms, footer, and other design areas.

Understanding Global Colors and Block-Level Colors

Your website uses both global color settings and block-level color settings.

Global colors are managed under Website → Design → Edit Design Settings → Colors. These settings help control the main color scheme for your overall website and template.

Block-level colors are managed inside individual blocks on your website pages. Each block in the PhotoBiz Website Builder has its own color settings, which allow you to customize that specific section without changing the entire website.

Block-level color settings override the global Color Picker for that specific block. This means if you update a global color and a specific section does not change, that block may have its own color settings applied.

For example, if your global Button Background color is black, but a Button Block has its own button background set to gold, the button in that block will display gold. The block-level color takes priority.

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 colors
Adjusting default button colors
Changing template-controlled accents
Keeping your website design consistent across multiple pages

When to Use Block-Level Colors

Use block-level color settings when you want to customize one specific section of a page.

Block-level colors are best for:

Changing the background color of one block
Making one section stand out from the rest of the page
Customizing colors for a specific promotion or call-to-action
Adjusting readability within a single block
Creating visual separation between sections on a page

If you want your whole site to follow one consistent color scheme, update your global colors first. Then use block-level colors only where a specific section needs a custom design.

Additional Options or Helpful Notes

Your global website colors can affect multiple areas of your site at the same time. For example, changing an Accent Color may update links, titles, hover effects, buttons, store checkout areas, or other template-controlled design elements.

Before choosing new colors, it is helpful to keep these best practices in mind:

Use colors that match your brand and photography style.
Keep background colors subtle so they do not compete with your images.
Make sure text is easy to read against the background color behind it.
Use accent colors for emphasis, not for every element on the page.
Use block-level colors when one specific section needs a different look.
Preview your website on both desktop and mobile after saving changes.

Some feature-specific areas, such as Scheduler layouts, blog post text, and site search results, may use your global website colors in specific ways. If you are adjusting colors for one of those areas, review the related guide for that feature.

Troubleshooting or FAQs

Why did more than one area of my website change?

Your global Color Picker controls colors that can be used in several places across your site. If a color change affects more areas than expected, 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 block-level colors applied. Open the block on the page and review its color settings. Each block in the PhotoBiz Website Builder has its own color settings, and block-level color settings override the global Color Picker for that block.

Why do my colors look different after changing templates?

Each template can use global colors in different ways. When you change templates, your website may apply the new template’s default color settings or use your existing colors differently. Review your Color Picker settings after changing templates.

Why is some text hard to read after changing colors?

This usually happens when the text color and background color do not have enough contrast. Adjust either the text color or the background color so visitors can read the content clearly.

Can I customize colors for one specific page section only?

Yes. Open the block you want to customize and review its color settings. Block-level color settings are designed for customizing individual sections of your website pages.

Previous Post Next Post

How To Change Templates

February 4, 2026

How Do I Change The Font Color of Links In My Text?

June 3, 2026

How To Edit The Colors For Scheduler Service Calendar

October 30, 2025

How Colors Are Controlled on the Site Search Results Page

January 20, 2026