How to add hero image

[T2]

The template image and preview shows a full width/fluid hero/header image. I show nothing in the customization to add this image.

[Tom]

Hi there,

To add a header image in the free theme, you can use the Featured Image feature: https://en.support.wordpress.com/featured-images/

To make it full width, you can add this CSS:

.page-header-image.grid-container {
      max-width: 100%;
}

.page-header-image.grid-container img {
      width: 100%;
}

The header on our demo (http://demo.generatepress.com) is using the Page Header add-on.

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[choosefi]

The page header premium add on does not appear to be working on my site. I tried to uninstall premium and reinstall. but it was a no go. I have tried activating and reactivating the individual plugin but it is not working. I checked and I am running the most up to date versions of both the theme and the premium plugin.

any ideas

[Tom]

Hi there,

What about it isn’t working?

Is the individual add-on activated?: https://generatepress.com/knowledgebase/install-activate-addons/#gp-premium

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[choosefi]

The Individual Add-on is activated, and the other add-ons appear to work as far as I can tell. but the page header premium feature doesn’t appear to be available.

It shows me the image and content tab, but no additional features are listed. I don’t have ability to toggle the parallax feature etc.

I have tried deleting the plugin and reinstalling. not sure what to do next

[Tom]

Those features only appear when content is added to the content area: https://generatepress.com/knowledgebase/generate-page-header/

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[choosefi]

It did!!!! Thanks for the fast support. I have had GP for less than a month and am super impressed. I am using it in combo with Elementor and it has been incredible

I will leave a review with WordPress.org

Thanks again
Jonathan

[Tom]

Thank you! I really appreciate that 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[choosefi]

So the page Header add on works great for Hero images but I am still struggling to edit the size. I don’t want the hero image to take up the full screen. I would like it to limit to ~400px so I can still display some content. Similar to what you have on your demo page http://demo.generatepress.com/

I tried to make adjustments in the page header add on and tried to modify with Css Hero but am still having difficulty obtaining the desired look. It looks like it is cropping the width in order to maintain full screen. What is the easiest way to get a full width image using the page header addon that only takes up 3/4 of the page?

here’s the link for the site I am working on

http://choosefi.com/

[Tom]

The Page Header on our demo is full width as well.

Have you tried setting the container type to “Contained” in the content settings of the meta box?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[choosefi]

When I change it to contained, the aspect ration seems to be fine.

However I want it to be full width, but not full screen. The Aspect Ratio on your demo page seems to be preserved. but on mine when I activate the content options it blows my image up. I have tried resizing the image with no success.

[Tom]

What about when you add this CSS?:

.generate-content-header {
    background-attachment: initial;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[choosefi]

Freaking awesome!- That took care of it

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts