Archived topic
Possible to create background colour in blocks with curved corners?
33 replies · Started by robchanoi on June 4, 2021
Apologies as not GP related dont think - but will redesign site and wondered if these block sections on this site numan.com- sexual health - nutritional health - etc were achievable using wp blocks in editor?
Thanks if you may know.
Hi there,
you can use the GenerateBlocks plugin - Container Block - it has Border Radius in its Spacing setting.
Thanks David.
Excellent. Do you recommend setting up a hero image this way with GBs or through adding a header element?
We would recommend using Block element to create a page hero instead of Header element nowadays :)
This article should be helpful:
https://docs.generatepress.com/article/block-element-page-hero/
Cool - thanks for quick clarification Ying.
Can you merge GB container background image with header?
This video should help:
https://youtu.be/TP8mgBQTgGg
It did - tks.
To get the hamburger menu image to appear top left is that defined in header element or in customisation?
Also - lastly ;) getting the image to sit half up in a hero section i think it is like here - is that defined thru blocks or elements?
https://www.numan.com/numankind/hpv-vaccine-men
tks
To get the hamburger menu image to appear top left is that defined in header element or in customisation?
It might require some CSS.
getting the image to sit half up in a hero section i think it is like here – is that defined thru blocks or elements?
Is the hero section built with a header element or a block element?
If you built it with a Block element, I would apply a negative bottom margin to the container, so it brings the page content up.
If you built it with a Header element, CSS is needed :)
Thanks Ying... appreciated.
The hamburger image i think i can just upload.
Regarding the curved corners - changing border radius works great for a container but uploading an image into a container you dont have this option - only square or rounded ro am i missing smth?
You can try adding a background image to the container that has the border radius set.
yeah sorry confused my end... the image overlays the text, is there a way to reverse this? cheers for my follow ups
Can you link me to your site so I can see what is happening?
it's difficult as rebuilding it in draft - can't publish or it will alter current site - doing non-professional way. In essence though whether I add a headline before or after i add an image, the text always sits on top.
It's very difficult for me to imagine what your issue is without seeing the code, so here is what I would recommend doing:
The red part is the block element which is merged with the header using the merge function from the Header element, the blue part is the post itself including the image ( featured image).
For example, I would apply a negative bottom margin to the block element to bring the entire post up to overlap.
https://www.screencast.com/t/QgdpLdzpq
Then add this CSS to change single post content's stack order:
.single-post #page {
z-index: 2;
position: relative;
}