How to add a colored block in WordPress Post Content

  • Resolved deewinc

    (@deewinc)


    3 years, 7 months ago

    I’m looking for a way to add text blocks with colored backgrounds. I have attached an image with a red arrow pointing to what exactly need.

    I have tried to use the Gutenberg Editor but it doesn’t work well with header tags. It works perfect with colored paragraphs and lists only. Once I try to include headers it fails to take effect.

    I prefer to use the classic editor. Is there away I can do that?

    Regards

    IMAGE https://i.stack.imgur.com/eNUJn.png

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hello @deewinc!

    If it’s not a problem, please share your site link with me, so i can take a look and solve your issue.

    Regards!!

    Thread Starter deewinc

    (@deewinc)

    @mateico ~ sure. Sorry, I don’t want the link to appear anywhere in online forums.

    I have circled in red areas where I need such types of backgrounds.

    https://i.imgur.com/HE89uoT.png

    No problem! Try to use gutenberg, because it allows you create a column in which you could put the heading and the paragraph, and you can set a customize background color for each of them.

    Moderator bcworkz

    (@bcworkz)

    Unless you want the same background on all such blocks, add a custom CSS class (under the editor’s Advanced meta box) to any blocks where the background should occur. To alter all such blocks, there are existing classes you can target. Inspect the block’s HTML code to see what classes exist by default.

    In the Additional CSS customizer section, add appropriate CSS to apply the desired background color to specific classes. Something like

    .grey-bg {
  background-color: lightgrey;
}
    Thread Starter deewinc

    (@deewinc)

    Thanks guys for your input. I think I’m getting there.

    @mateico the idea of using columns seems to work. However, how do I adjust the column’s height?

    @bcworkz anyway to do it in CSS? The specific class is .wp-block-column

    Thread Starter deewinc

    (@deewinc)

    @bcworkz and @mateico

    Just found how to adjust the height of the block by using padding-top and padding-bottom in css.

    Thanks so much guys. I guess I have to get used to the Gutenberg editor. I have resisted it for years = (

    You’re welcome! Try gutenberg without fear, it is a very useful tool that improves day by day.
    See you and good luck!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to add a colored block in WordPress Post Content’ is closed to new replies.