How to add page Hero?

Hey team,

I have solved the Background issue, that was happening because of some CSS Code. It is fixed now.

Now please tell me the solution for how can I make my Gravatar image, Author name, and published date exactly like thing along with the text.... (Click here to check screenshot )

Hi there,

one way to add the byline and date info is with this CSS:

.page-hero .author-name:before, .page-hero time.updated:before {
    content:'written by';
    display: block;
    text-align: left;
    color: #b2b2b2;
    font-style: italic;
    font-size: 1em;
    
}
.page-hero time.updated:before {
    content:'posted on';
}

The pipe | is part of the HTML in the Header Element just remove these / replace with spaces.

For the social icons you would need a plugin that provides a shortcode which can also be added to the header element.

I want o move the gravatar little forward and is there any way to place the social icon there because I am not able to get the shortcode for the social icon...
For better understanding here is the screenshot ( click here to check screenshot )

Any chance you can clear and disable WP Rocket first?

Let me know :)

why?

so I can inspect the code.

We do ask for this specifically:
https://www.screencast.com/t/sAZU8h7bUcE

deactivated the plugin

You can reduce the 10px in the existing CSS to bring author picture more to the right.

.page-hero-gravatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

Are you using FontAwesome already? If so you can add the social icons directly in the page hero content.

yes it worked one more thing is there any way to add social icon after post updated date...

I actually commented this above:

Are you using FontAwesome already? If so you can add the social icons directly in the page hero content.

Can you tell me in detail how to add social share button with font awesome icon?

You would need to install FA first:
https://docs.generatepress.com/article/font-awesome/

Then there are lots of info on Google on how to use FA.

already installed..

And what's the issue? Maybe something like this would help?
https://stackoverflow.com/questions/26814297/want-to-make-font-awesome-icons-clickable