Site logo

[Resolved] Possible to create background colour in blocks with curved corners?

Home Forums Support [Resolved] Possible to create background colour in blocks with curved corners?

Home Forums Support Possible to create background colour in blocks with curved corners?

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #1809793
    robchanoi

    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.

    #1809977
    David
    Staff
    Customer Support

    Hi there,

    you can use the GenerateBlocks plugin – Container Block – it has Border Radius in its Spacing setting.

    https://en-gb.wordpress.org/plugins/generateblocks/

    #1810546
    robchanoi

    Thanks David.

    Excellent. Do you recommend setting up a hero image this way with GBs or through adding a header element?

    #1810556
    Ying
    Staff
    Customer Support

    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/

    #1810564
    robchanoi

    Cool – thanks for quick clarification Ying.

    #1810570
    robchanoi

    Can you merge GB container background image with header?

    #1810585
    Ying
    Staff
    Customer Support

    This video should help:
    https://youtu.be/TP8mgBQTgGg

    #1810615
    robchanoi

    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

    #1810628
    Ying
    Staff
    Customer Support

    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 🙂

    #1811100
    robchanoi

    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?

    #1811561
    Ying
    Staff
    Customer Support

    You can try adding a background image to the container that has the border radius set.

    #1811597
    robchanoi

    yeah sorry confused my end… the image overlays the text, is there a way to reverse this? cheers for my follow ups

    #1811605
    Ying
    Staff
    Customer Support

    Can you link me to your site so I can see what is happening?

    #1811642
    robchanoi

    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.

    #1811738
    Ying
    Staff
    Customer Support

    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;
    }
Viewing 15 posts - 1 through 15 (of 34 total)
  • You must be logged in to reply to this topic.