Site logo

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

Viewing posts 1–15 of 28

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'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

This archived topic is closed to new replies.