Adding Image to Front Page

Hi Berkay,

Tom demonstrates here how to create a merged header using the Elements module.

https://docs.generatepress.com/article/header-element-overview/

If you want you can add an Elementor shortcode to the Header content using this method.

Hi,

Thanks for quick feedback. I watched that video and i have choosen the front page preference through display rules section but it did not work. Should i type a code in the page hero section? Don't know what to do.

Thanks,

So the Page Hero has to have some content in it for it to display. This could be text, HTML or a Shortcode.
If you are just setting a background image and dont want any content then you can add this to the Hero content:

<!-- Page Hero -->

Its a HTML comment so wont be displayed.

I choose front page from display rules section and merge from site header section and i also put that code but it did not work. What am i doing wrong?

So on the Hero tab.
Apply some Top and Bottom padding - this will create the height.
You have background overlay checked, but the color is solid white, either uncheck the overlay or change the colors opacity.

Once that is done you can change the Navigation colors on the Site Header Tab. You make them transparent also.

This may be of use to you:

https://docs.generatepress.com/article/page-hero-examples/

Thank you David it worked. Very much appreciated. I have been trying to make this work for a while. Lastly, can i ask that how can i remove the white space between the front page image and the section i created with elementor?

Ok so thats the entry title. Use the Layout Element, Select Disable > Content Title and then set your display rules. But make sure you add back a H1 heading somewhere in your content.

Thank you for your help David. I think we can close this topic :)

Glad i could be of help