Image box background color

  • Resolved Johan WALTER

    (@johan_walter)


    4 years ago

    Hi

    Is there a chance to have option to choose a background color in IMAGE BOX block ?
    This background would apply to full box including image, heading and content
    Screenshot https://prnt.sc/rqwcn6

    Thanks

    Johan

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support dimned

    (@dimned)

    4 years ago

    Hi @johan_walter,
    Gutenberg editor supports unlimited bock nesting so first you may put Section Block or Group in order to configure the background and then place Image Box inside the section.
    I’d also recommend taking a look at this plugin to add custom color presets to the blocks https://wordpress.org/plugins/block-editor-colors/
    Let me know if you have any further questions.

    Thread Starter Johan WALTER

    (@johan_walter)

    4 years ago

    Hi

    Thanks for your reply
    What I want to make is box like this https://prnt.sc/rrenbd

    So I followed your advice and place a group in a column, with a background color, then I added in group IMAGE BOX
    – Image does not fit the column there is space above, on left and right ; I hav etried adjusting with a negativ margin
    Screenshot
    Before negativ margin https://prnt.sc/rresc4
    Adter negativ margin https://prnt.sc/rresra

    – In responsive there is no space between box in bottom
    Screenshot https://prnt.sc/rretth

    The cleanest way I have just found to achieve what I want is custom css
    .wp-block-getwid-image-box.has-text-center {
    background-color: antiquewhite;
    }
    With CSS, only the background of image box is colored, I added a space after content
    Screenshot https://prnt.sc/rrexg8

    Regards

    Johan

    Plugin Support dimned

    (@dimned)

    4 years ago

    Hi @johan_walter,

    Thank you for your reply. I’ve managed to achieve the desired layout by

    1. setting the Padding and Margin (Top, Left and Right) – None for Section block http://prntscr.com/rtuo6i
    2. adding a negative Margin Top only for Image Block http://prntscr.com/rtuord

    Here is a result http://prntscr.com/rtupam and responsive http://prntscr.com/rtuqvs – due to bottom margin Normal there is space between Section Blocks on the mobile devices

    Thread Starter Johan WALTER

    (@johan_walter)

    4 years ago

    Hi @dimned

    Thanks a lot for your reply, that does the trick !

    I didn’t one column with negativ margin top in image block (on the right) and one column without negativ margin top in image block (on the left)
    Even if I can see the background color over image in edit page, this color is not visible on the front
    The negativ margin places the image box higher than the column which has no negativ margin

    EDIT PAGE https://prnt.sc/rtv2cg
    FRONT https://prnt.sc/rtv2he

    Maybe it is due to my template ?

    Regards

    Johan

    Plugin Support dimned

    (@dimned)

    4 years ago

    Hi @johan_walter,
    Thanks for your reply. Yes, I’ve also removed the negative margin for Image Box and it looked properly on the front end. The margin you can see in the editor is applied at the backend only. It may be added for users to select nesting elements in proper way. Thus you may skip adding negative margin. It looks in the way you need it.
    Let me know if you have any further questions.

    Thread Starter Johan WALTER

    (@johan_walter)

    4 years ago

    Hi @dimned

    Thanks for this trick !

    Johan

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Image box background color’ is closed to new replies.