[Resolved] Separate Container for Header

[Huseyin]

Hi GeneratePress Team,

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

[Leo]

Hi there,

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

You can use the private information field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Huseyin]

Sorry about that, i have attached two links

[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.

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Leo]

There was a tiny typo in my code.

Can you try the updated code?
https://generatepress.com/forums/topic/separate-container-for-header/#post-1556944

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Elvin]

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?"

[Huseyin]

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

[Elvin]

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?"

[Huseyin]

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

[Elvin]

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?"

[Author]

Posts