Archived topic
need help with trying to make a page wide image at top of my home page
27 replies · Started by Douglas on March 18, 2022
hi guys. thought i'd compartmentalize this.
i want to put my 'hero' image across the top of the page. i saw in my meanderings how u can set the image to go further up the page and be background for header items. that would be awesome.
so, my webpage link is below. you and i have battered this around for a while. shouldn't be too tough to tell me how to do this.
i await your help. as always, thx for your time
Hi there,
there are two parts to this:
1. First create a Block Element - Page Hero in Appearance > Elements. This article explains how:
https://docs.generatepress.com/article/block-element-page-hero/
This will provide the full width content across the top of your screen, by default this is below the site header / navigation.
2. Now create a Header Element ( also in Appearance > Elements ) :
https://docs.generatepress.com/article/transparent-header-and-navigation/
This will simply merge the first part of the page content, which will now be your Page Hero with the site header:
https://docs.generatepress.com/article/transparent-header-and-navigation/
thx for the advice, but tried it, no joy. i am stuck
can u go into my site and look around and see what there may be in place that i no doubt set up while flailing about, and is probably keeping me from being able to make your advice work? i'll leave detaisl.
Which page or pages are you trying add this ?
it is the front page.
Hi Douglas,
I see. Upon checking your Elements, I couldn’t locate a Page Hero Block Element set to display on the Front Page.
Can you try creating a Page Hero - Block Element or altering the ones you already have, and display it as such?: https://share.getcloudapp.com/6quZBJD9
Here is a sample Block Element which has a Container with a Background image: https://share.getcloudapp.com/WnuyN6AG
To reiterate, here is the document linked by David for reference: https://docs.generatepress.com/article/block-element-page-hero/
Hope this clarifies! Feel free to reach out if you’ll need further assistance. :)
HI F
so i tried to edit the home page, but your example shows upper right corner "element", and mine shows "page"
the next difference is that your example shows 'element type' and mine shows ... not that.
I am in the wrong place, i think. can u direct me to the proper spot to begin this?
thx
Doug
I see.
To create/edit an Element, you’ll need to go to Appearance > Elements.
See: https://share.getcloudapp.com/GGulNyJ7
Also see: https://share.getcloudapp.com/xQuqgNO1
Here is a short screen recording I made showing how to do as such: https://share.getcloudapp.com/E0ugqmXP
Hope this helps! :)
i'll show u how far i got. i am not shown the buttons you use to set spacing on the right hand side. that all disappeared. below is the link showing how far i got.
i also have a note in the left hand corner that says the backup version in my browser is different from this version. this tells me i have tried this before.
hang on , F. I found the cliker to show me the spacing etc and it worked!
right on, but now i have two pics , as before. Can u tell me how to delete the bottom pic; i went to my home page to edit but wasnt sure if i was looking at the pic i just put in, or the narrower pic below it. tried the appearance customize, but did n't find the image there to delete.
plz help on this, we are almost there.
thx
Doug
web address below
There seems to be two other images in your front page aside from the one coming from the Page Hero - Block Element.
See: https://share.getcloudapp.com/yAuK269z
If you wish to delete #1, kindly toggle the Disable featured image option in you Page Hero - Block Element: https://share.getcloudapp.com/NQuNDJB0
If you wish to delete #2, kindly edit the front page itself and delete this Container: https://share.getcloudapp.com/ApuJjRmd
Hope this clarifies. Feel free to reach out if further assistance is needed. :)
Hey F, you believe it , but ... you did it , buddy!
Awesome!
Now i have one more ask of you; in my flailing around thru this issue, I saw a fucntion that made my hero image go to the top of the menu and header bars. The text was printed on the image itself instead of bars of the menu. How can I get that effect? My lady's hands are not showing and that won't do.
thx Buddy
Doug
Starting with the hands, you can increase the top padding of your Container Block.
See: https://share.getcloudapp.com/v1ugDje8
Now, with regards to the text, are you wanting something like this?: https://share.getcloudapp.com/P8u1E8E6
If so, adding a Headline Block inside the container, and aligning it center should do: https://share.getcloudapp.com/d5u9v6EB
With regards to this: I saw a fucntion that made my hero image go to the top of the menu and header bars
If you’re wanting to put the Page Hero above the header you would need to use a different hook like before_header: https://share.getcloudapp.com/2NuzXPjD
Hope this clarifies. Kindly let me know if I missed something. :)
nope, that didn't do anything.
padding at the top. maybe it should be at the bottom to push the image up?
and also, the bars on the menus need to disappear as they still hide the lady's hands.
also, i tried the 400 padding below, and that just left a gap so its no good. then i removed the bottom 400 spacing, updated, but it still remains. how come? i also purged the cache