[Resolved] Separate Container for Header

Home Forums Support [Resolved] Separate Container for Header

Home Forums Support Separate Container for Header

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #1553516
    Huseyin

    Hi GeneratePress Team,

    I need help with page containers, How could I get the Page Header to be in a Separate Container?

    #1553796
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know 🙂

    #1554071
    Huseyin

    Sorry about that, i have attached two links

    #1554333
    Huseyin

    ***Note***

    I’m almost to forgot to say it. I want the H1 of the Title of the page with the Featured Image on one separate container then the content.

    #1555152
    Leo
    Staff
    Customer Support

    Can’t quite picture how they would work.

    would they be above the content and sidebar?

    If so can you try creating a header element for it first?
    https://docs.generatepress.com/article/header-element-overview/
    https://docs.generatepress.com/article/page-hero-examples/
    https://docs.generatepress.com/article/how-to-create-a-page-hero/

    #1555943
    Huseyin

    Could you please check the diagram, of what im after (just want to separate content with advisements)
    https://ibb.co/ZYbn1gJ

    On my live website, I use the elements like the header element, but now I’m changing on to use the containers to separate content with Advertisements. This what it looks like https://ibb.co/4dtM01K now.

    Also, how could I get the [page_hero_gravatar] {{post_author}} | Last Updated: [modified_date] work under the header too. https://ibb.co/Tv7gf8V

    #1556944
    Leo
    Staff
    Customer Support

    So the only issue I see with a header element is that it’s above both content and sidebar.

    Can you try adding this PHP snippet so we can move the header element to above content only?

    add_filter( 'generate_page_hero_location', function( $location ) {
        if ( is_single() ) {
            $location = 'generate_before_main_content';
        }
    
        return $location;
    } );

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    #1557317
    Huseyin

    Thanks but the PHP snippet doesn’t work.

    Wondering if this approach will work?
    Where we could add a hook under the featured image and above the content? (note: I will add a shortcode on the hook, where the background will be grey color )

    also created a diagram for better visual understanding
    https://ibb.co/NNs48qF

    #1557318
    Leo
    Staff
    Customer Support
    #1557323
    Huseyin

    Thanks, now the PHP snippet worked.

    How could I get the featured image on the header element?

    *attached a link to the post too

    #1557352
    Elvin
    Staff
    Customer Support

    Hi,

    To make the featured image display in a Header Element, open the target Header element and on the “Page Hero” tab, change the “Background Image” value from “Custom Image” or “No Background Image” to “Featured Image”.

    Applying this change will make the featured image appear as a background image to your Header Element.

    Learn more about Header element here: https://docs.generatepress.com/article/header-element-overview/

    A wise man once said:
    "Have you cleared your cache?"

    #1557355
    Huseyin

    Thanks, however, I don’t want to have the featured image as my background but just want it under my title.

    #1557375
    Elvin
    Staff
    Customer Support

    Ah right,

    You can do something like this:
    https://generatepress.com/forums/topic/how-can-i-get-featured-image-in-sections/#post-1489452

    And use the shortcode to display the featured image within the Header element’s markup area.

    A wise man once said:
    "Have you cleared your cache?"

    #1557379
    Huseyin

    Great, how about the padding around the featured image? (please check the link I attached)

    #1557384
    Elvin
    Staff
    Customer Support

    Great, how about the padding around the featured image? (please check the link I attached)

    To clarify: Do you mean add padding to the image?

    If so, change the markup of the <img> within the shortcode to add class so we could style the image to add padding on it.

    Example:

    add_shortcode( 'fun_featured_image', function() {
    ob_start();
    global $post;
    $featured_img_url = get_the_post_thumbnail_url($post->id);
    echo '<img class="page-hero-featured-image" src="'.$featured_img_url.'" alt="'.get_the_title($post->id).'"/>';
    return ob_get_clean();
    });

    And then style it with custom CSS:

    .page-hero-featured-image{
    padding: your padding value here;
    }

    If what you mean was the actual padding of .page-hero, that can be set on Header element’s padding settings on page hero tab.

    A wise man once said:
    "Have you cleared your cache?"

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