[Resolved] Hero Section Won't Display

[Chris]

Hi, I’m new to WordPress and GeneratePress. I’m trying to create a hero section where I can add a contact form and some text. I’ve researched the videos and forum posts, but I’m obviously missing something. I created the Header Element (I think). I’m just trying to do this for my Front Page. This is the old page with the hero section I’m trying to recreate.

[David]

Hi there,

What Display Rules did you set on the Header Element?

[Chris]

Hi David,
Display Rules are Front Page and All Users

[David]

Can you send me a screenshot of your settings in the Header Element

[Chris]

Sure, but let me clarify or ask this first. Do I need a hero section to replicate the screenshot I sent or can I place a form and text box overlaying a feature image without a hero image section?

[Chris]

Here are the screen shots
https://gulfsidehousebuyers.com/wp-content/uploads/2019/02/Header-Element-pt1.png
https://gulfsidehousebuyers.com/wp-content/uploads/2019/02/Header-Element-pt2.png
https://gulfsidehousebuyers.com/wp-content/uploads/2019/02/Header-Element-pt3.png

[David]

So the Header Element has to contain something in the Hero content for it to display.
If you only wanted the image to be displayed then you can add a HTML Comment eg.:

<!-- Featured Image --> or <!-- anything you like as a comment --!>

Header Elements are one of the simplest ways of putting content over an image. You can add HTML and Shortcodes ( e.g for your Form ) within the hero content. And of course set a background.

By default the Header Element sits directly below the Site Header so we may need to add a little CSS to create the gap between the two.

[Chris]

Thanks David. I added Featured Image comment and I can see a thin band of the image. I understand your comment about using CSS to create the gap. Would the HTML and shortcodes also be the answer to expand the image/hero section area?

[David]

The header element will expand to size of the content plus any padding you have added in its settings.

To note: if it were just adding a featured image background you would size it by adding more padding. In this case i would a % padding that matches the apsect ratio of the image.

[Chris]

I found that by increasing the padding in the page hero section that resolve the image appearing as a thin band and now I can see the full image as I increased the padding.

[David]

You may find some of these examples useful with the various ways of adding content and how that and the padding effects its size.

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

[Chris]

Thanks. Getting there. Does the CSS also go where I’m adding my html or does that doe in the Simple CSS or Additional CSS section?

[Chris]

Thanks David. That last link was helpful I was able to get what I wanted in there. Thanks!

[David]

Awesome – glad to hear that!

[Author]

Posts