- This topic has 28 replies, 3 voices, and was last updated 5 years ago by
.
-
Posts
-
I have a GP site at ngge.michianait.net and I am trying to replace the homepage hero.
My image is 2000px wide and consists of four images placed on one canvas, like a montage.No matter how I set the padding, it seems that the header only partially shows the image.
How do I get the entire image to show?
Thanks,
Mark
If needed, the admin credentials are shown below
Customer Support
Hi there,
i can’t see that being possible with that image as it has a very narrow aspect ratio.
You may want to consider making the 4 images in two rows / two columns.Hi David,
Thanks for your reply.
That image (of the four pictures side by side) seems to be 1500×252. Is that not similar in dimensions to other pics that can be used with the page hero?
Also, I had just assumed the page hero could only have one pic. How do you build a page hero with multiple images, e.g., 4 images in two rows as you suggested?
Thanks,
Mark
David,
I’m confused by this. If I just add an image to the page (e.g. with the Elementor image widget), I seem to be able to add this (4 pic in a strip) image with no problem. Why is it causing problems when used as a page hero?
Mark
Its because its a CSS Background image thats being used in the hero element. Its what allows the content ( eg. Title etc ) to overlay the image.
For a background image to remain 100% in view and fill the space then its aspect ratio must match that of the container.The problem you have is:
1. the image has a very narrow aspect ratio.
2. your hero has content and fixed px top and bottom padding, so on the majority of screen sizes its height remains constant so the aspect ratio changes….
3. The hero is merged with the site header – this adds additional top padding to the container… further affecting its aspect ratio.Now if there was no merge, and no content and you only display the background image with % top and bottom padding you would be able to keep it 100% in view and fill the container.
David,
Thanks so much for your reply. I made a 2×2 collage called Collage-1.jpg and am using that has a page hero. However, it seems that the top part is cutoff. Is there a way to move it down so I see the whole image?
Thanks,
Mark
Thanks David,
I found a setting under the site header called height offset which I set to 500px. Now the whole image shows. It is just too overpowering because of the size.
I’m trying to go for something like this: afterprohibition.squarespace.com where the password is endowed.
Maybe a page hero is not the way to do this. I just hate to have to place the image on each page at the top.
Mark
Sorry, the password is endwod.
(not endowed)
OK so lets do this:
1. remove the Image from the Element Background.
2. Then in the content add:<img src="the_full_url_to_your_image" alt="the alt text for your image" width="1200" height="252" />this will display the full image within your content.
David,
Thank you very much. That helped a lot. Only a couple of things left to finish it off, I think.
1. I would like the image (the test page I am using is ngge.michianait.net/another hero test) to be full width – it seems to go part way right now.
2. I would like to place the site title ABOVE the primary navigation menu. Do I do this my using a top bar?
Thanks,
Mark
Oh, I just tried to edit the pages. It seems I don’t have the ability in Elementor to remove some sections, like on the Services page. Is that because the “page hero” image is covering up the top part of the page (where maybe the Elementor section setting are displayed)?
Mark
On a more philosophical note – it seemed like in the past, using the Classic Editor, I was able to build sites with headers, without nearly so much trouble. I wonder what has changed/happened?
Lead Developer
Hi Mark,
1. The image isn’t full width because it isn’t wide enough to span the full width of your screen. We can force it to display full width, but it will lose quality. If you want to do that, give the image a class like this:
<img src="the_full_url_to_your_image" alt="the alt text for your image" width="1200" height="252" class="full-width-hero-image" />Then add some CSS:
.full-width-hero-image { width: 100%; }2. To do this, disable the Navigation as Header option: https://docs.generatepress.com/article/navigation-as-a-header/
The make sure your navigation is set to Below Header: https://docs.generatepress.com/article/navigation-location/
3. Not too sure what you mean about not being able to remove sections in Elementor. Can you show us a screenshot maybe?
Tom,
Thanks for getting back to me. I will try what you suggested.
What I mean by not being able to delete sections: If you look at the services page in ngge.michianait.net, so you will see a page that has the header picture, and then another picture underneath it. Here is the URL of the screenshot:
http://ngge.michianait.net/wp-content/uploads/2021/03/Screen-Shot-2021-03-29-at-12.35.29-PM.png
(I just uploaded the screenshot to the media library and gave you the URL from there. Is there an easier way).
As for your “no page builder” starter sites, can those sites be edited with the Classic Editor, or do they require the block editor?
Mark
- You must be logged in to reply to this topic.
