Blocksy 主题颜色管理：全局色彩调色板与自定义颜色设置

In website design, color not only enhances visual appeal, but also helps convey brand messages.Blocksy The theme offers web designers and developers a simple and powerful way to manage and apply colors through its global color palette system. Whether it's aligning colors with your brand's style or ensuring page consistency, Blocksy makes it easy. In this article, we'll take an in-depth look at the color management features of the Blocksy theme, including the global color palette, color picker, and how to add custom colors to create a unique website design.

Accessing global color settings

Blocksy The theme's global color settings can be accessed via the following path:Customizer → General Options → Color. This setting allows users to manage and apply colors consistently across the site, ensuring design consistency.

Color palette management

Blocksy Fifteen predefined color palettes are provided that can be applied directly to the website. Users can also create their own color palettes if these predefined colors don't fully satisfy the design needs, or expand the existing palettes by adding more colors to better match the brand's identity.

To manage color palettes, click on the three-dot menu and select "Color Palettes", which will open the palette management interface. Users can select an existing palette or create an entirely new palette by defining custom colors.

When saving a new palette, first define the colors that need to be included, and when you're done click the three dots againmenuand select "Save Palette". The new palette will be displayed under the Custom tab of the Palette Manager, making it easy to select and modify it later.

Suggested color usage structure

In order to maintain color consistency on your website, here are some suggestions for structuring your color usage:

Color 1: The primary color of a brand, often used to emphasize key elements.
Color 2: Alternate color, usually used for hover effects.
Color 3: The color of the body text, applied to paragraphs.
Color 4: Colors for headings, subheadings and main headings.
Color 5: The color of the borders and dividers.
Color 6: Background color for the header and footer of the page.
Color 7: Primary site background color.
Color 8: A lighter alternate color, usually used for header backgrounds.

Using these structured colors ensures that the overall design of the website is consistent and on-brand.

color picker

Blocksy's color selector provides the user with total flexibility for easy selection of the right color. The selector includes an HWB adjuster for the saturation and brightness of the color, plus hue sliders to fine-tune the selected color. Users can assign custom names to the colors in the palette by making them available in the customizer and supported page builders such as Gutenberg respond in singing Elementor) is easily recognizable.

In addition, the user can directly copy the HEX value of a color or get its CSS variable name, which is useful for more advanced style settings.

Add new color

If the default 8 color swatches aren't enough, Blocksy makes it easy to add more. Simply open the three-dot menu and select "Add New Color" to expand the palette with new colors that fit your branding and design needs.

These additional colors will be Gutenberg The editor automatically recognizes it to ensure consistency of the site's content.

Additional color control

global color: The Global Colors section allows users to define a set of preset color categories that will be automatically applied throughout the site, ensuring design consistency. Primary Includes:

basic text: Sets the default font color for all paragraphs and body text.

link (on a website): Defines the initial color of the link and the color of the hover state.

text selection: Sets the color style of the text when the user selects it.

All titles (H1 - H6): Uniformly set the color of all title tags.

Individual title setting: Set individual colors for specific heading levels (e.g. H1, H2, etc.).

Site background: control the background color or image of the whole website, the background of all pages will be changed accordingly

caveat

Users are not limited to using only the colors in the palette. Each color can be further adjusted through the design tab, providing options for finer control to ensure that the site's appearance is up to snuff.

Developer Resources

The Blocksy theme's color picker also supports the definition of custom CSS Variables. Users can define CSS color variables in the Additional CSS panel and reuse them in various parts of the customizer, improving design consistency and maintainability.

concluding remarks

Blocksy The theme's color management system provides web designers with powerful tools to ensure color consistency and brand performance on their websites without losing creativity. From preset color palettes to the addition of custom colors, Blocksy makes color management both easy and efficient. Whether you're a beginner or an experienced designer, Blocksy can help create web designs that are both beautiful and professional.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off