[Support request] Page Hero

Home Forums Support Page Hero

  • This topic has 23 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #1488495
    Lee

    Hello there,

    I’m trying to create a page hero (heading) for the front page of my website. I’m trying to achieve something similar to the link provided. I’ve played around with the padding options for ages but I don’t seem to be getting anywhere close. Could you please help me achieve this?

    Also notice, that when the page of what I’d like to achieve is cut down to mobile size, the image within the header responds by appearing below the text – rather than with the text running inside the image (as it does with mine). I’d also like to achieve this.

    Many thanks,

    Lee.

    #1488562
    David
    Staff
    Customer Support

    Hi there,

    you may be better off using a Block Element instead of the Header Element:

    https://docs.generatepress.com/article/block-element-overview/

    If you install the GenerateBlocks plugin you will be able to add a Container Block for the background, a Grid Block for columns etc…

    https://wordpress.org/plugins/generateblocks/

    #1489995
    Lee

    Ah I see. Thanks for this.

    If I’m only going to be using this specific Block once on the front page, is it worth creating a Block as such, or would it be any different to create the block within the actual page?

    Also, if I was to use a Block, would this affect SEO with keywords and stuff?

    Many thanks again,

    #1490023
    David
    Staff
    Customer Support

    For sure – you could create this directly in the Page Editor.
    I would still recommend using the GenerateBlocks plugin instead of the Core Blocks.
    Ie. use Container Block instead of Group Block.

    You will need to set the Page Builder Container to Full Width:

    https://docs.generatepress.com/article/content-container/

    Then construct your page using Container Blocks.
    Each container will allow to create full width or contained content.

    For the Merged header you would simply remove the content from your header element and just leave the merge site header option enabled.

    NO – blocks aren’t treated any differently in regards to SEO.

    #1490044
    Lee

    Brill. I’ll give this a shot. Thanks again.

    #1490068
    David
    Staff
    Customer Support
    #1490571
    Lee

    OK, so can you tell me if I’m on the right track here.

    I’ve created a Block Element that’s now visible on the front page. I’m a little confused as to how I’d merge into the logo and navigation though? Could you help me achieve this please?

    Many thanks again.

    #1490580
    David
    Staff
    Customer Support

    You still need to create a separate Header Element.
    Do not add any content to the element or change any other settings, just go to the Site Header tab, set it to Merge with Content and edit the header / nav colors to suit.

    #1491679
    Lee

    Got ya! Brilliant, thank you.

    And one final thing regarding this, when I minimise the screen to view the front page on a mobile, I’d like the text to appear above the image, as it does via the link attached.

    Many thanks again,

    #1491708
    David
    Staff
    Customer Support

    Bit trickier.
    Do you have a transparent background image? As currently it has a grey background which will be a problem when we reposition it below the text

    #1491711
    Lee

    I think I could make it transparent.

    #1491723
    David
    Staff
    Customer Support

    Scrub that

    Select the Container Block and under Advanced > Additional CSS Class add – hero-block
    Set the Background Color for the Container Block to #f6f7f8 – this will match the color in your image.

    Now can you give the Left hand Grid Block a minimum height in its Settings > Layout. Make it around 300px.
    Then select the Right hand Grid Block, select Layout > Mobile Tab and in the Order field add -1

    Once thats done ill provide some CSS to reposition the image.

    #1491737
    Lee

    I’ve added the CSS class, and changed the colour.

    However, when I select the left hand grid block within the container and then select Layout, I only see options for Container Width, Vertical Alignment, and Remove Vertical Alignment?

    Am I on the right track?

    Many thanks again.

    #1491755
    David
    Staff
    Customer Support

    Sorry the Min Height is under Spacing.

    #1491763
    Lee

    Brill. Thank you.

    Ok, I’ve done all of that. Is there anything else I need to do?

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