[Support request] Page Hero with Content Inside

Home Forums Support [Support request] Page Hero with Content Inside

Home Forums Support Page Hero with Content Inside

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2060845
    Chitika

    I already used the PageHero Block.
    But I would like to get a style like this.
    https://ibb.co/P5Y7h3Q

    Is there any template or any code to make the title part look like that.
    Typical template as found in the second link.

    #2061126
    Leo
    Staff
    Customer Support

    Hi there,

    Try adding some negative margin-bottom to the container block on the very outside of your page hero block.

    Let me know if this helps πŸ™‚

    #2061363
    Chitika

    Hello Leo.
    When I give this value,

    .one-container .site-content {
        margin-top: -60px;    
    }

    The content goes below the pagehero block.

    #2061373
    Elvin
    Staff
    Customer Support

    Hi there,

    Try adding this CSS:

    div#page {
        margin-top: -60px;    
        position: relative;
    }

    And add padding bottom to the page hero so the main content doesn’t overlap the contents of the page hero. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2061389
    Chitika

    Thanks. The above code is working when I add in Customize > Additional CSS.
    But my PageHero block is only for posts.

    How do I add the above code only for posts.
    Also I would like the sidebars also to move into the PageHero block, just like the main content.

    How to implement these?

    #2061391
    Elvin
    Staff
    Customer Support

    We can edit the CSS so it only applies to single post pages.

    body.single-post div#page {
        margin-top: -60px;    
        position: relative;
    }

    Also I would like the sidebars also to move into the PageHero block, just like the main content.

    This CSS should apply to the sidebar as well as we’re moving the entire content area to overlap the page hero partially. πŸ˜€

    But perhaps I’m missing what you mean. Can you provide a mockup image of how you want it to appear so I can understand it better? πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2061406
    Chitika

    Thanks. It worked on the posts.

    Regarding sidebars, I meant something as in this image.

    https://ibb.co/FgfpHsQ

    It should just push into PageHero, just like the main content.
    Also the mobile or AMP pages should not be disturbed.

    #2061435
    Elvin
    Staff
    Customer Support

    Yes this should work for the sidebar as well as the CSS applies on the entire page container, including sidebar.

    But this assumes you have the sidebar enabled. Else, nothing will show. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2061665
    Chitika

    Thanks. I just used the .single-post instead of body class and it works for main content alone.
    Should that work with body without sidebars.

    #2062009
    Leo
    Staff
    Customer Support

    Should that work with body without sidebars.

    It should – the easiest way to tell is to start a test page and see if it works πŸ™‚

    #2066105
    Chitika

    I have another problem. Whenever I don’t set featured image, the display is not proper.

    #2066329
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to a) a post with the featured image and b) a post without ?

    #2071093
    Chitika

    The links are provided in code area.

    #2071319
    David
    Staff
    Customer Support

    1. Edit the Page Hero Block element
    1.1 Select the parent Container Block.
    1.2 In the settings sidebar look for the Remove Container Condition option:

    2022-01-06_15-15-58

    1.3 Make sure that option is set to Choose.

    #2071412
    Chitika

    thanks. it worked.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.