Add Image Below Page Hero in Generatepress Element

Hi there,

Add this html to the header element which contains the page hero:

<div class="banner-border"> 
    <img src="your-custom-image-link" alt="banner border">
</div>

Once it's added we can have another look at the CSS solution :)

Let me know :)

It looks like this: https://ibb.co/b27xSFN
My header looks like this

<h1>
	{{post_title}}
</h1>

<div class="hero-meta">
	Last Modified: [last_modified_date]
</div>

<div class="banner-border"> 
    <img src="https://s15165.pcdn.co/wp-content/themes/themeisle/img/border.svg" alt="banner border">
</div>

Hi there,

can you share a link to the site where we can see the Hero with the shape divider.

I already shared that.
Sharing it again..

Look at this website https://themeisle.com/blog/wordpress-com-vs-wordpress-org/ (the zig-zag image below page hero)
For more clear example look at this: https://ibb.co/cXC7Pgf

Once you add the image back, try to add this CSS:

.single-post .page-hero {
    position: relative;
}
.single-post .page-hero .banner-border img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know :)

Great, it worked but few things are misbehaving such as the content area. It's hiding behind the image actually.

SEE THIS: https://ibb.co/3TfdF2H

Yeah, I figured it out.
I added this to the content area

.single-post .page-hero + #page {
position: relative;
}  

Just wanted to know, is this the recommended way to add the image below page hero just by depending on CSS?

Can't we do this by adding to the elements or somewhere else in the code?

Yes, CSS is absolutely the way to in your case.

Or you can use a block element with Generateblocks instead of header element, in that case, I think you will be able to directly add and adjust the image in the page hero.

Can you please help me with that ?

This is the plugin I was talking about:
https://wordpress.org/plugins/generateblocks/

And this is a block element overview:
https://docs.generatepress.com/article/block-element-overview/

Here're the documentation of Generateblocks, it explains how to use this block editor:
https://docs.generateblocks.com/

Please be noted, you'll have to update GP Premium to 2.0 in order to use the dynamic content/image feature of the block element, for example, automatically generate a title.

Here're some demo videos on how to use the new feature:
page hero: https://www.youtube.com/watch?v=yq6VcgU3Ufg&t=334s&ab_channel=GeneratePress
content template: https://www.youtube.com/watch?v=-ZTQP_KA2xE&t=3s&ab_channel=GeneratePress
author box: https://www.youtube.com/watch?v=HMhUo91RjsE&t=66s&ab_channel=GeneratePress
post meta: https://www.youtube.com/watch?v=Ni3KXdZ5Dl8&t=234s&ab_channel=GeneratePress

Hope it's helpful :)

I just saw Generatepress Blocks and GP premium 2.0 changelog. It sounds very interesting at least we've not to pay for theme builders.

But as I can see, its still in BETA phase.

Hi there,

On Ying's recommendation, only the dynamic content is from GP Premium 2.0.

You can still use the same principle w/ the current GP Premium version for the Block Element + GenerateBlocks approach to making Page Hero.

Block element can work as a page-hero when you hook it to generate_after_header.

And if you wish to use dynamic featured image, you can use David's shortcode here:
https://generatepress.com/forums/topic/featured-image-shortcode/#post-715294