Hero image

[RevealHM]

Hello,

We are currently using the plug in revolution slider to add hero images to each of our pages. But I’m not happy with the slow loading time.

Is there a way to create a fullscreen image for the hero image within themeco, not using a plug in? I don’t want to use the header builder because that would be too complicated and time consuming to assign a different header for each different landing page.

Thank you,

Ashley

[marc_a]

Hi Ashley,

Thanks for reaching out!

If you want to add a single hero image to your page, I suggest that you add it as a section background image but if you are looking for full-screen slider hero images, I suggest that you check our modern sliders.

• https://demo.theme.co/modern-sliders/

Hope that helps.

[RevealHM]

I know how to add an image as a section background image. However, I don’t understand how to lock the size into place. For example, this is what I see in the editor:

desktop screenshot.png

and then when I go on the page live, I see just a tiny slice of the image: https://revealhm.com/test-page/

The image is 1500x650, which I feel is a pretty good size for a hero image. How can I make sure it is displaying all of the photo. Do I need to use a different size?

Thank you,

Ashley

[tristup]

Hi Ashley,

It seems that you are using the option of the Background Layer, and set the Object Fit value Cover. But as the Column does not contain any content it is taking the default height and does not show the full image. If you just want to show the Hero Image on that section, I would suggest you use the Gap element and add the 650px size into it to increase the height of the column.

Hope it helps.
Thanks

[RevealHM]

Thank you. Is there a way that the image could shrink as the page size decreases and maintain the correct aspect ratio, as the slider revolution her image does?

Screen Recording 2021-12-21 at 2.12.01 PM.mov (video)

[ruenel]

Hello Ashley,

You can use the Image element if you want to preserve the aspect ratio of the image.

And then in your Image element, you must set the width to 100%:

Just make sure to upload a landscape photo because the current one is in portrait mode which is why it will be taller to display on the screen. As soon as you resize the browser, the aspect ratio of the image is preserved.

Please check the example URL in the secure note.

Thanks.