How to add a colored block in WordPress Post Content

  • Resolved deewinc

    (@deewinc)


    3 years 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)
  • Mateo Duarte

    (@mateico)

    3 years ago

    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)

    3 years ago

    @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

    Mateo Duarte

    (@mateico)

    3 years ago

    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)

    3 years ago

    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)

    3 years ago

    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)

    3 years ago

    @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 = (

    Mateo Duarte

    (@mateico)

    3 years ago

    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.