Lede Docs

Lede Platform Update: Secondary Color Options

You can now create branded Post Grid and Newsletter blocks by using your secondary or accent color for the background or text.

Secondary Colors in the Post Grid and Newsletter Blocks Overview

  • For both blocks, the background and text have the same color menu. 
  • You can choose from your primary, secondary, accent color, or one of four neutral colors: black, white, light grey, and dark grey. See How to Set Your Site Brand Colors for more information on setting or changing your brand colors.
  • Accessibility is a top priority at Lede. We provide a warning in yellow when the text and background color combination you’ve selected may create an accessibility issue. You may choose to continue with your color selection regardless of the warning, but it’s recommended to choose a more accessible combination.
  • Colors and fonts are specific to each instance of a block. If you make a change to a Newsletter block on Article A, a Newsletter block in Article B will retain its original color selection. 
  • You can extend the block background color to the edges of the screen on Post Grid blocks only.
  • You can change text colors and background colors independently for more color combinations.

How to Use Secondary Colors on the Newsletter Block

  1. Navigate to your WordPress Admin Dashboard.
  2. Create a new post or select an existing post.
  3. Add a newsletter block to the post.
  4. Click on the Block tab in the right sidebar to see available color options for the background and the text.
  5. If you would like to reset your color, text option, or both,  you can do so by selecting “revert all” from the kebab (three dots) menu in the Block tab.

How to use secondary colors on the Post Grid:

  1. Navigate to your WordPress Admin Dashboard.
  2. Click Homepage on the left sidebar.
  3. Add or edit a post grid block.
  4. Click on the Block tab in the right sidebar to see available color options for the background and the text.
  5. To extend the background color to the edges of the block:
    1. Click on the Post Grid block.
    2. Click on the “Align” icon (left of the “Bold” icon) in the options bar that appears above the Post Grid block.
    3. Click “Full width”.
  6. Click on the Post Grid block.
  7. Click on the “Align” icon (left of the “Bold” icon) in the options bar that appears above the Post Grid block.
  8. Click “Full width”.
  9. If you would like to reset your color, text option, or both,  you can do so by selecting “revert all” from the kebab (three dots) menu in the Block tab.

Was this article helpful?