[Resolved] How to add page Hero?

[Shivam]

Hey team,

I tried to add a Page hero as per your documentation tutorial…
But i am facing few problems..

1. Although i have set background to transparent check screenshot still Heading is coming with black background Click here to check screenshot Please tell me the solution.

2. Next, i want to change the size and position of the gravatar, Author Name, Published date exactly like this website (Click here to check screenshot )

[Shivam]

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 )

[David]

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.

[Shivam]

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 )

[Leo]

Any chance you can clear and disable WP Rocket first?

Let me know 🙂

[Shivam]

why?

[Leo]

so I can inspect the code.

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

[Shivam]

deactivated the plugin

[Leo]

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.

[Shivam]

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

[Leo]

I actually commented this above:

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

[Shivam]

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

[Leo]

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.

[Shivam]

already installed..

[Leo]

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

[Author]

Posts