Archived topic
Add a shape to the upper right corner of homepage hero
7 replies · Started by Erman on May 26, 2022
Hi,
I would like to add a colored shape that stretches over my website header and homepage hero.
I've included an image link as an example.
EDIT: The image doesn't seem to work, so I'll add the image link here https://ibb.co/tZsYSbR. Hope it works.
Would this be possible?
Greatly appreciate your help!
Hi there,
can i see your site ? Then i can advise the best way to do that.
NOTE: when sharing screenshots from a sharing site such as Imgbb - just the Link is required. If you use the IMG button then the URL must be a direct link to the image, for example a link from your WP Media Library.
Hi, David!
Yes, sure. I've added a link to my website.
Thank you for clarifying! I'll keep that in mind for future posts.
So theres a few options.
To be begin i would set the page up as follows:
1. Set the Content Container to Full Width:
https://docs.generatepress.com/article/content-container/
Aside from giving us full width it removes the themes padding.
2. Construct the pages various sections, like you have for the hero using Container Blocks. Here you can add your left and right padding ( to make up for the themes padding ) and any top / bottom padding you need.
3. Now your hero section you can add a Background Image to the Container Block, and position and size it for the Top Right.
4. Then use a Header Element to Merge the site header with your page:
https://docs.generatepress.com/article/transparent-header-and-navigation/
Great stuff, David!
Thanks a lot for helping out! I'll get right on it and give it a try.
Wish you a great day!
You're welcome - let us know how you get on!
It went really smooth and I got it done in a couple of minutes by following the exact steps that you posted.
Thank you once again!
Awesome - glad to hear that!
