[Resolved] Page Header and Navigation in front of Background Image

Home Forums Support [Resolved] Page Header and Navigation in front of Background Image

Home Forums Support Page Header and Navigation in front of Background Image

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #591498
    antware

    Good day guys

    Is there anyway I could replicate the Header section of this site using GeneratePress and / or Elementor?

    https://www.corrocoat.com/

    I would be really appreciative if you could assist.

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #591601
    David
    Staff
    Customer Support

    Hi there,

    yes with GP, using GP Page Headers, which can be set to full width and merged with Site Header, which in your example is set to a contained size.

    Here somes articles on using Page Headers:

    https://docs.generatepress.com/article/page-header-overview/

    Let us know if you need an extra hand

    #592091
    antware

    Hi there David. Nope followed the guidelines and seriously battling to get anything close to the other website I am trying to emulate.

    You couldn’t possibly outline some step by step instructions by any chance?

    #592151
    David
    Staff
    Customer Support

    Hi, of course:

    First the Site header:
    Logo added to: Customiser > Site Identity
    Email and Phone. Add HTML Widget (or Elementor Template) to Header Widget. If using Elementor keep that template background transparent.
    Header Background can be set in the Customiser > Backgrounds (or Colors).
    Header width: Customiser > Layout > Header > Set both widths to contained.
    Navigation: Customiser > Layout > Navigation > Set this to contained width and location below Header.

    Second the Page Header:

    IMAGE:
    Do not add Background image. The Page Header will use the Featured Image set on the page / post.
    CONTENT:
    Add the content (text and button) or Elementor Template shortcode in there.
    Add Background Image > Check
    Parallax Effect > Check
    Container > Full Width
    Inner Container > Contained
    Top & Bottom Padding > add a minimum value eg. 50px
    ADVANCED:
    Merge with Site Header > Check
    Place Content Behind Site Header > Check

    Now save the Header. You can either apply this globally to the different post templates in the Page Header > Global Locations menu. Or you can assign them to each page/post in the post editor under the Page Header Meta box.

    Add a featured image to the Page / Post for the header to display it.

    #592997
    antware

    Hi David

    Followed your instruction to the letter and the result was nowhere close. Thanks anyway. Made a plan using Elementor and playing with the Z-Index. Closer to what I was looking for.

    Thanks again though.

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