You can use the Color section in the Block Settings sidebar to set the text color, background color, and link color for the entire block. The Color section is designed to make it as simple as possible to update your block’s colors.
How to Access Color Settings
After selecting a block, the Color Settings can be found in the Settings sidebar, under the Color section of the "Block" tab.
Select the block you want to customize.
If you've selected a block and the Settings sidebar is not showing on the right side of the page, click the SettingsIcon (cog) next to the "Save" button at the top of the page.
Note: Clicking the SettingsIcon with the sidebar showing will collapse the menu.
In the Settings sidebar, select the "Block" tab at the top.
Scroll down to find the "Color" section of the menu.
Click the down Arrowhead Icon to expand the Color Settings section to see the available options to customize.
Text Color
This option allows you to change the Text Color for the entire selected block.
Select your block, and click the "Block" tab in the sidebar settings menu.
In the Color section of the sidebar settings menu, click the box for Text Color (it will be a checkered box if no selections have been made).
A color palette panel will now show, where you can add a custom color by selecting from the palette or by entering the HEX, RGB or HSL color values.
To directly input HEX, RGB or HSL values, click the icon below the color slider to switch between the three input options from the small dropdown.
Click outside of the modal window to continue editing the selected block.
Note: This option will make the changes to your whole block. Making color changes to only a portion of a block can be done from the individual block's toolbar menu.
Background Color
Changing the Background Color of an entire block can be done in the Color Settings. While some block types will only have one option - Solid Background - others will provide the option for a Gradient Background as well.
Solid Background
All content blocks with Color Settings allow for the addition of a Solid Background, which will change the background color of the entire block.
Select your block, and click the "Block" tab on the sidebar settings menu.
Find the Color section of the menu.
In the Color section of the sidebar settings menu, click the box for Solid Background (you will see a checkered box if no selections have been made).
A color palette panel will now show, where you can add a custom color by selecting from the palette or by entering the HEX, RGB or HSL color values.
To directly input HEX, RGB or HSL values, click the icon below the color slider to switch between the three input options from the small dropdown.
Click outside of the modal window to continue editing the selected block.
Note: This option will make the changes to your whole block. Making color changes to only a portion of a block can be done from the individual block's toolbar menu.
Gradient Background
Some blocks allow you to set more than just a solid color for a background. You can use a Gradient Background, which is a mix of two or more colors, displayed using a certain pattern - from lighter to darker, or one color blending into the other.
Select your block, and click the "Block" tab on the sidebar settings menu.
If your block has the ability to add a Gradient Background, you will see "Solid" and "Gradient" as options when you reach the Color section of the menu.
Click "Gradient" for a slider to appear that shows two default color points (circles) - one on the left and one on the right.
Click each circle to display the color picker for changing the color value. You can either choose a color from the color palette or enter the HEX, RGB, or HSL color values.
To directly input HEX, RGB or HSL values, click the icon directly below the color slider to switch between the three input options from the small dropdown.
Click outside of the modal window to continue editing the selected block.
You can add additional color points to make a more intricate gradient design, as well.
Hover over a point on the Gradient slider for a + icon to appear as your cursor.
Click your desired point on the Gradient slider where you want to insert a new color, then select a color from the palette menu or enter the HEX, RGB, or HSL color values.
You can also choose between a Linear or Radial gradient type, as well as the Angle control:
Linear - creates a gradient between the colors in a straight line.
Radial - creates a gradient starting from the center and moving to the borders.
Angle - shifts the position / direction of the gradient in real-time.
Note: This option will make the changes to your whole block. Making color changes to only a portion of a block can be done from the individual block's toolbar menu.
Note: Accessibility tests are built into the editor to warn you when the text may become hard to read against the background color choices as shown in the screenshot above.
Link Color
On some content blocks, you will find the option to change the color of a hyperlink.
Select your block, and click the Block tab on the sidebar settings menu on the right.
In the Color section of the sidebar settings menu, click the box for Link Color (it will be a checkered box if no selections have been made).
A color palette panel will now show, where you can add a custom color by selecting from the palette or by entering the HEX, RGB or HSL color values.
To directly input HEX, RGB or HSL values, click the icon directly below the color slider to switch between the three input options from the small dropdown.
Click outside of the modal window to continue editing the selected block.
Note: This option will update the color for any links in your block, existing or future.
Blocks with Color Settings
Options for Color Settings will vary slightly depending on the type of content block you've selected. A list of block types which support these settings are listed below.
Product Documentation
