Changing text colors

In addition to setting site-wide colors, you can change the color of any text to give it a distinct look. Here's how you can do it:

1. Highlight the part of the text you wish to change the color for.

2. Click the Text color trigger on the Control pane:

Screen_Shot_2021-01-21_at_13.43.00.png

The Sitebuilder picks the pre-set text color options that would be most contrasting and perfectly match the overall color scheme of the block. When you change the block background color, pre-set text color options will also change.

yola_text-color-2.png

3. Click on the color you like and the fragment of the highlighted text will change to that color.

4. Click Publish to make the changes live.

Note:

  • When you change the background, the text color options will be adjusted to help the new text color stand out and maintain the color contrast.
  • The Sitebuilder will suggest those colors that are better adjusted to the color scheme of the block.
  • If you change the site-wide color palette, your custom colors will change, too, in order to make your content contrasting and easy to read.
  • When you drag and drop text blocks across the page, colors will change based on the target block color scheme.
  • When you copy (duplicate) a block, color formatting will be preserved in the new block.

Creating custom colors

You can add a custom color according to your website building needs. Here's how you can assign your own custom colors:

1. Highlight the text to activate the text formatting menu.

2. Click the Text color trigger in the Control pane.

3. Click the + icon next to the preset colors:

Screen_Shot_2021-01-21_at_14.29.05.png

4. use the color picker to set a custom color for the selected fragment of the text. You can instantly preview how the custom color will look in the current block design:

Screen_Shot_2021-01-21_at_14.40.06.png

 

5. If you already know the value of your custom color, you can click the value field to edit it.

Screen_Shot_2021-01-21_at_14.43.48.png

The value field accepts any of these formats:

HEX: for example, #FFFFFF

RGB or RGBa: for example, rgba (255, 0, 149, 1)

HTML (must be lower case): for example, white

Tips:

  • The value field populates automatically when you use the color picker to find a color. You can copy and paste this code to use the same color when changing any other text color on your website.
  • If your new custom color appears too light or too dark, the Sitebuilder will warn you that this color choice will affect the legibility of your website.

6. Once you are happy with your color selection, click Submit. The text will appear in the new custom color of your choice and the new custom color will be added to the list of preset colors in the color formatting menu:

Screen_Shot_2021-01-21_at_14.49.18.png

 

7. Click Publish to make the changes live.

 

Removing custom color formatting

To remove the color change, highlight the portion of text that you want to return to the default color. In the Control Pane, click the Clear icon:

 

yola_text-color-7.png

 

Other helpful articles

Creating custom color palettes

Changing a color palette

Changing the button color

Customizing storefront navigation and colors

 

Was this article helpful?
0 out of 0 found this helpful