[Support request] Need some help in designing header

Home Forums Support Need some help in designing header

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1048497
    Shivam

    Hey team, Can you please give me the PHp and CSS code to make this type of exact header…

    click here to check screenhot click here to visit reference website

    #1048699
    David
    Staff
    Customer Support

    Hi there,

    you can use a Header Element, it doesn’t have to display the featured background image, like this example which gets you 80% of the way there:

    https://docs.generatepress.com/article/page-hero-examples/#example-2

    To get the Reading Time you can add this Snippet to create a [reading-time] shortcode:

    function tu_estimated_reading_time() {
        $post = get_post();
        $content = $post->post_content;
        $wpm = 300; // How many words per minute.
    
        $clean_content = strip_shortcodes( $content );
        $clean_content = strip_tags( $clean_content );
        $word_count = str_word_count( $clean_content );
        $time = ceil( $word_count / $wpm );
    
        return $time;
    }
    
    add_shortcode('reading-time', 'tu_estimated_reading_time');
    #1048701
    David
    Staff
    Customer Support

    Hi there,

    you can use a Header Element, it doesn’t have to display the featured background image, like this example which gets you 80% of the way there:

    https://docs.generatepress.com/article/page-hero-examples/#example-2

    To get the Reading Time you can add this Snippet to create a [reading-time] shortcode:

    function tu_estimated_reading_time() {
        $post = get_post();
        $content = $post->post_content;
        $wpm = 300; // How many words per minute.
    
        $clean_content = strip_shortcodes( $content );
        $clean_content = strip_tags( $clean_content );
        $word_count = str_word_count( $clean_content );
        $time = ceil( $word_count / $wpm );
    
        return $time;
    }
    
    add_shortcode('reading-time', 'tu_estimated_reading_time');
    #1048721
    Shivam

    Thank you and how to add that category archive in that style above header?

    #1048741
    David
    Staff
    Customer Support

    You can use the {{post_terms.taxonomy}} template tag – add it to your header like so:

    <span class="hero-terms">{{post_terms.category}}</span>

    Then this CSS to style it:

    .hero-terms {
        display: block;
        font-size: 0;
        margin-bottom: 30px;
    }
    
    .hero-terms a {
        background-color: red;
        color: #fff;
        font-size: 12px;
        border-radius: 5px;
        padding: 10px;
        margin: 7px;
    }

    Having different colors for different categories is a lot more complex, not simply done if you have lots of them

    #1048745
    Shivam

    ok thanks for your help, one colour is enough…one mmore question i don’t know why but after installing elementor my all page and post became full width, How can i fix it…

    #1048749
    David
    Staff
    Customer Support

    I saw your other topic related to Elementor. One of us will answer there.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.