How to Use Global Colors

Global Colors allow you to create a dynamic color palette for your entire website.

Unlike the standard colors provided by themes, blocks that use Stackable's Global Colors are bound to that color and will change when the Global Color is changed. This makes it easier for you to create a unified color palette across your entire website, and make adjustments across the board.

The power of Global Colors come from the binding of colors across your different webpages. You can tweak your Global Color Palette and your entire site will adjust!

Accessing Stackable’s Global Colors

You can access Stackable’s Global Colors by clicking on the Stackable logo at the top right of the Block Editor.

Adding a Global Color

Click on the plus button (+) to add a Global Color.

Global Colors are only visible when picking colors for Stackable blocks.

Each Global Color you add will reflect in the color pickers found across your blocks. You can add as many colors as you like.

Adjusting Global Colors

You can rename each Global Color by clicking on the text, and reorder the Global Colors by dragging the hamburger icon up or down the list.

When you make changes, the same name and order will appear in the color picker.

Deleting Global Colors

You can delete Global Colors if needed by clicking on the trash icon next to each color.

Enabling and Disabling Other Color Settings

Below the Global Color Palette, you can choose to show or hide the Theme, Default and Custom Site Editor colors in the color picker by toggling the switch on or off for any of them.