Home page merged hero image -- needs to parallax

Hi Michael,

Are you using a block element for the home page and a header element for other pages?

The parallax effect only works on header elements currently, even you use a header element to merge it with the header, the parallax effect still won't apply.

Hmmm... I was just adapting the Donate site library template created by Mike Oliver... thus it's whatever he did. How would I check? Or can you check? (I'm relatively a novice.) Thanks.

I logged in and checked :)

So the home page isn't using a block element, the block is in the page itself.

And the shared page hero of the other pages is using a header element, as you can see it excludes the front page and post.
https://www.screencast.com/t/XF8cPO1awZ

If you'd like the parallax effect to also apply to the home page, there're 2 options:

1. Create a new header element for the home page. But it's not very easy since you'll have to write some HTML and CSS for the header element to reach the current result.

2. Check Tom's solution here: https://generatepress.com/forums/topic/parallax-effect-using-generatepress-theme-and-generateblocks/#post-1713130

Let me know if you need more help on this :)

So if I pursue Tom's solution... I see the link leads me to code in html or css or javascript. If I use the css, I could just insert that in the Customize > Additional CSS and I'd be done? Thx.

Nope... There're 3 steps in Tom's suggestion.

For step 1, go to appearance > elements, create a hook element, copy paste the first code into the content field. Choose wp_footer as the hook.

For step 2, just add it into Customize > Additional CSS.

For step 3, go to the home page > edit page, select the first container, add the parallax class to it, it's like giving it a name, so the CSS could work based on that name :)
https://www.screencast.com/t/33wQp575

Let me know :)

Thanks for clarifying...
I did Step 1 now, hopefully correctly. I copy/pasted the code Tom showed in the link.
"For step 2, just add it into Customize > Additional CSS"
Please tell me what is "it"?

PS: In the Edit Hook dialog for Step 1, when I attempt to publish it, it says...
"This element needs a location set within the Display Rules tab in order to display."
??

Is the "it" for step 2...

.parallax {
overflow-y: hidden;
}

Okay. you no need to answer the above. I've got it working now. I see that the curvy border at the bottom of the hero image is part of the hero's container instead of the next container. So the parallax looks a little wonky. I need to transfer that white curved area to the next container. I will work with the shape command to see if I can get that right. I'll keep this topic open for the moment in case a new question comes up. Thanks!

Yeah, you made it by yourself!

The shape shouldn't be a big problem, I believe you can handle it well :)

Let us know if you need more help on this.

Success. Thanks! :) Your help was great!

I knew it! :P

Glad to help!