[Resolved] Hero header for Post Archive page using shapes

Home Forums Support [Resolved] Hero header for Post Archive page using shapes

Home Forums Support Hero header for Post Archive page using shapes

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1580505
    Sam

    I am trying to create a hero header for my post archive page, with the nav menu and logo sitting on top.

    I am currently using an element header with a background image merged into the nav/header – which looks great but…

    I would love to be able to control the style of background image more. Ie add shapes, icons, text etc

    How would I go about this.

    My front page has an example of what I would like to achieve

    https://www.staging.watersportswhiz.com/

    #1580752
    Leo
    Staff
    Customer Support

    Hi there,

    Have you considered using a block element instead of a header element?
    https://docs.generatepress.com/article/block-element-overview/

    Then you can use GenerateBlocks to create a similar page hero as in your front page.

    Let me know 🙂

    #1581022
    Sam

    Hey Leo – Thanks for the reply

    I should have been clearer – it was late in the day and my brain wasn’t working

    If using a block and hook, how can I make the hero merge into the nav and logo on the topline?

    Or, would I need to create these manually?

    Its the overlay/merge I cant figure out, tried quite a few hooks, block and header element combos – it went full modern art for a while, lol!

    #1581413
    David
    Staff
    Customer Support

    Hi there,

    you can use a Header element, without adding any content to it – just skip to the Site Header tab and set it to Merge with Content, this will unlock options for setting the navigation colors.

    This will merge the site header with any content below it, whether that be the post content or a block element etc.

    #1581838
    Sam

    Thanks David – how would I add the page / category title to block element?

    #1581873
    Sam

    Ok my follow questions

    1) How to add the page tile to the block so it dynamic
    2) What’s the correct hook for the block element
    3) How to remove the paper title from the content

    #1581876
    Leo
    Staff
    Customer Support

    how would I add the page / category title to block element?

    This should help:
    https://generatepress.com/forums/topic/add-page-title-in-page-header/#post-245321

    We will be making this a feature in the next version of GP Premium 🙂

    Also, the block element hook – what’s the right hook

    generate_after_header would be what you are looking for.

    #1581879
    Sam

    Thanks Leo – you know what I am going to ask next

    Where do add that short code, code.

    I assume some function file?

    #1581880
    Leo
    Staff
    Customer Support
    #1581945
    Sam

    Ok – I am sorry for the 20 questions

    https://www.staging.watersportswhiz.com/knowledge/

    1) I now have a gap under the header to the post/cat/content – how to remove

    2) Also the name of the page title is now showing just about the content – obviously I will be displaying the same in the hero header. How to remove

    #1582217
    Elvin
    Staff
    Customer Support

    Hi,

    1.) Not sure what you mean by “gap” did you mean the content’s padding top? (shown in red box here: https://share.getcloudapp.com/X6u0bOnj)

    2.) I don’t see the page title above the content. (shown on the same screenshot)

    To clarify: Have you solved these already? Let us know.

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

    #1582522
    Sam

    Hi Elvin

    I rolled back to a normal header element as what I was trying achieve just introduced more and more changes. With my limited CSS and PHP knowledge I just didn’t feel comfortable.

    The PHP in the link provided by Leo strangely brought in the title of a random blog post on my category archive header.

    Just going live without the shapes or extra item that a bloxk could provide.

    The most important thing was to add a gradient to the hero image so all my header had a similar style

    I have manually added a liner gradient to the hero image using CSS for each instance of the page hero. I only have 5 pages, the rest are blog post with their on header using the featured image.

    .page-id-3349 .page-hero, .page-id-3338 .page-hero, .page-id-3383 .page-hero, .page-id-2897 .page-hero, .page-id-3372 .page-hero, .page-id-3361 .page-hero, .author1.pagehero,.category .page-hero {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.3),rgba(20,70,160,0.3)), url(https://cdn.shortpixel.ai/spai4/w_1920+q_lossless+ret_img/https://www.staging.watersportswhiz.com/wp-content/uploads/2020/06/DSC_0705-Pano.jpg);
    }

    Note sure if that was, or is, the most efficient way of doing this

    #1583584
    Elvin
    Staff
    Customer Support

    Note sure if that was, or is, the most efficient way of doing this

    That custom CSS is actually the way to go. Although, I’ll perhaps tweak it a bit.

    I’ll do it like this:

    I’ll create a Header element with display rule location set to the page specified in your CSS. I then add the bg image within the Header Element’s background image setting.

    Lastly, I’ll add this on the header elements area instead of the longer custom CSS code.

    <style>
    .page-hero {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.3),rgba(20,70,160,0.3));
    }
    </style>

    But yes, they do literally the same thing. The difference is which is the better practice.

    As much as possible, try to do everything within the UI. We only resort to custom CSS if the styles we want to achieve are not doable within the available options.

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

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