- This topic has 22 replies, 4 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
November 27, 2020 at 1:50 pm #1553516Huseyin
Hi GeneratePress Team,
I need help with page containers, How could I get the Page Header to be in a Separate Container?
November 27, 2020 at 6:01 pm #1553796LeoStaffCustomer SupportHi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know 🙂
November 27, 2020 at 10:55 pm #1554071HuseyinSorry about that, i have attached two links
November 28, 2020 at 2:11 am #1554333Huseyin***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.
November 28, 2020 at 9:06 am #1555152LeoStaffCustomer SupportCan’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/November 29, 2020 at 12:16 am #1555943HuseyinCould you please check the diagram, of what im after (just want to separate content with advisements)
https://ibb.co/ZYbn1gJOn 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/Tv7gf8VNovember 29, 2020 at 10:53 am #1556944LeoStaffCustomer SupportSo 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/
November 29, 2020 at 3:43 pm #1557317HuseyinThanks 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/NNs48qFNovember 29, 2020 at 3:44 pm #1557318LeoStaffCustomer SupportThere was a tiny typo in my code.
Can you try the updated code?
https://generatepress.com/forums/topic/separate-container-for-header/#post-1556944November 29, 2020 at 3:51 pm #1557323HuseyinThanks, now the PHP snippet worked.
How could I get the featured image on the header element?
*attached a link to the post too
November 29, 2020 at 4:05 pm #1557352ElvinStaffCustomer SupportHi,
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/
November 29, 2020 at 4:08 pm #1557355HuseyinThanks, however, I don’t want to have the featured image as my background but just want it under my title.
November 29, 2020 at 4:37 pm #1557375ElvinStaffCustomer SupportAh right,
You can do something like this:
https://generatepress.com/forums/topic/how-can-i-get-featured-image-in-sections/#post-1489452And use the shortcode to display the featured image within the Header element’s markup area.
November 29, 2020 at 4:45 pm #1557379HuseyinGreat, how about the padding around the featured image? (please check the link I attached)
November 29, 2020 at 5:00 pm #1557384ElvinStaffCustomer SupportGreat, 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.
-
AuthorPosts
- You must be logged in to reply to this topic.