Archived topic
Confused about Creating Hero Image on Home Page
4 replies · Started by Wendy G on May 18, 2021
I want to keep my navigation/menu and logo across the top.
I want a horizontal image below the menu on my Home page. I don't want my logo or other text written over the photograph. Just the photo with menu above that. I see in the customizer section there's a way to create a Hero. But I also see the Element Hero section and just a block when I'm editing the home page itself. Of the 3 options, which is best?
What's the simplest way to achieve this? I've watched videos and read other people's questions but it seems like what most people want is more complicated.
Thank you!
PS: Also, can the Hero image be dynamic and resize itself as the webpage window changes size?
Thank you!
Hi there,
it looks like you have the Image in place using the Header Elements background image.
And as there is no text or other content in the header element - we can use % padding to maintain the images aspect ratio and keep it responsive.
First off we calculate the images aspect ratio H / W * 100 in this case thats 273 / 1170 * 100 = 23%
Edit the Header element set all padding to 0, now just change the bottom Padding to % units and set it to 23 :)
Thank you so much David! That was all I needed. TBH I still don't understand the 3 different ways to make a header. But this worked out and your advice about using Percentage in the bottom padding was perfect. Have a great day.
There a few options - let us know if you need any further info.
Have a great day too!
