[Support request] How to create a full-screen hero header for homepage?

[Johanna]

So I built a new site have want to create a section with a big background image (almost fullscreen.

Here’s the link to my new site: http://vietguides.org/

Basically, I added a section with a background image and I now want to make it fullscreen (increase size). How do I do this?

I’ve done this before for my old site: http://www.dherealmark.com but not sure how to do it now.

[David]

Hi there,

Header Elements are the best way to create a full width hero at the top of the page:

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

With Sections you would need to increase the top/bottom padding of the Section to make it taller ( same applies to the Header Element).
If you want it to display full height then edit the Section > Settings > Custom Classes field add fullheight-section

Then add this CSS:

.fullheight-section {
    min-height:  100vh;
}

[Johanna]

Okay, I did exactly that with display rules set to appear on my home page, but nothing works. Am I doing something wrong?

Recording of my backend: https://drive.google.com/file/d/1XN7EW_XrS3PFBzaONwOc1_57ikdAMgeF/view

[David]

For the Home Page you must select the Front Page for your Display Rules.

[Johanna]

Changed it up. Still, don’t see it. https://drive.google.com/file/d/1U4gYrqz3TgW0BDsUhfc6LcdljOOIc4XH/view

[David]

You have a Header Element already assigned to the Front Page or the Entire site. Which contains your Google Analtyics script. You should remove this Header Element and place your GA script using a Hook Element instead.

There can only be one Header Element assigned to any give place. So fix the above then you should see your header element appear – make sure you give the Header Element some top and bottom padding as well.

[Author]

Posts