Page Hero

Hi Shivam,

I would recommend using a block element - post meta template:
https://docs.generatepress.com/article/block-element-post-meta-template/

You can build a structure like this:
https://www.screencast.com/t/jtdIXmC9fG

Thanks to the dynamic feature, we can call a value from the custom field of the post, eg. we usepost-letter as the name of the custom field:
https://www.screencast.com/t/ZQssRsukw

Set a negative top margin for headline A, eg. -200px.

This is how it shows in front end:
https://www.screencast.com/t/6HxzxGrHTOl

Let me know if you need further assistance :)

Hey Ying, It doesn't seem working...

And I want my post title and meta info to appear before the main content as well as the sidebar, thus I tried to use Page hero...

Can you please directly check my element section to see what can be done to make it something like this (screenshot) (link)

Don't worry about how I will call the first letter or subtext to a post (I will setup custom field for each),It is a test site so please just set the margin for me... (I've attached my site details in private area)

Please its a request.

Hi there,

make the following changes:

1. Select the Container Block that has the H1 Title inside it, and give it an Advanced > Addtional CSS Class(es) of:

page-hero

2. Select the Headline block with the large letter and give it a class of: headline-letter - then move this block inside page-hero container.

3. Add this CSS:

.page-hero > .gb-inside-container {
    position: relative;
}

.headline-letter {
    line-height: 1;
    position: absolute;
    left: -50px;
    top: -30px;
    z-index: -1;
}

Adjust the left and top values to position it.