Designing Help

Hi there,

That can be done with the header element module:
https://docs.generatepress.com/article/header-element-overview/

You can see the step by step guide here:
https://docs.generatepress.com/article/how-to-create-a-page-hero/

And a very similar example to help you get started:
https://docs.generatepress.com/article/page-hero-examples/#example-2

Let me know if this helps :)

Hi there,

That can be done with the header element module:
https://docs.generatepress.com/article/header-element-overview/

You can see the step by step guide here:
https://docs.generatepress.com/article/how-to-create-a-page-hero/

And a very similar example to help you get started:
https://docs.generatepress.com/article/page-hero-examples/#example-2

Let me know if this helps :)

Hello team I have added the CSS code below

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

.author, .page-hero-gravatar {
    display: inline-block;
}

.entry-date {
    border-left: 2px solid #fff;
    padding-left: 10px;
    margin-left: 10px;
}
.page-hero .author-name:before, .page-hero time.updated:before {
    content:'written by';
    display: block;
    text-align: left;
    color: #ffffff;
    font-style: italic;
    font-size: 1em;
    
}
.page-hero time.updated:before {
    content:'updated on';
}
.page-hero-gravatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 25px 0;
}

And also this PHP code

function lh_page_hero_gravatar() {
    ob_start();
    global $post;
    $author_id = $post->post_author;
    ?>
    <div class="page-hero-gravatar">
        <?php echo get_avatar( $author_id ); ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'page_hero_gravatar','lh_page_hero_gravatar' );

For making my header element like this screenshot but i want to make my header element same like this screenshot also there is updated on text in CSS but it is not showing on my blog check this screenshot before the date of published article.

Please solve my queries as soon as possible.

Hi there,

you can style the H1 in the hero with this CSS:

.page-hero h1 {
font-size: 40px;
}

You need to display the updated date and hide the published, So remove the CSS you have and use this:

.author,
.page-hero-gravatar,
.page-hero time.updated {
    display: inline-block;
}

.page-hero time.published {
    display: none;
}

.author-name {
    border-right: 2px solid;
    padding-right: 10px;
    margin-right: 10px;
}

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

.page-hero time.updated:before {
    content: 'updated on';
}

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

Thanks now it's working fine

Hello team, Right now my container is showing like this screenshot but I want to show my container like this screenshot upon the header element can you tell me how can I do this.

The h1 is showing very big in mobile layout see this screenshot can you tell me how can I make it smaller like this screenshot.

Hello are you here can you reply my above questions

We try to answer all questions within 24hrs ( our average is below 6 hrs ) but there are sometime that we do need to sleep :)

To make the content overlap the hero on desktop use this CSS:

@media (min-width: 768px) {
    .single-post .page-hero+#page {
        margin-top: -80px;
    }
}

To set the H1 hero title size separately on Mobile add this CSS:

/* Mobile */
@media (max-width: 768px) {
    .page-hero h1 {
        font-size: 24px;
    }
}

More info here on writing responsive CSS:

https://docs.generatepress.com/article/responsive-display/

Is there any way to make the element background color(blue) into Gradient check this screenshot

This CSS:

.page-hero {
background: linear-gradient(157deg, rgba(0,188,252,1) 0%, rgba(61,27,55,1) 100%);
}

This site comes in handy to create gradients:

https://cssgradient.io

Thanks, David.

You're welcome

Hi, I need one more help from you. I want to make my blog post archives design like this screenshot