In this video, I’ll show you the beautiful new way of creating and managing page headers in the new GeneratePress Premium, version 1.4.
It’s a totally new approach that’s elegant, flexible and dynamic. Very powerful in fact!
With this new feature, you definitely don’t need a page builder like Elementor to create those nice full width or full screen hero image page headers. In fact in this particular demo, I haven’t even got Elementor installed!
You’ve always been able to create these type of page headers in GeneratePress. But it was a manual process, one at a time, added in each page or post. And there was nothing dynamic about them. They’re now much more flexible and really powerful, there are all kinds of possibilities now.
Check out my step-by-step walkthrough video below, showing you exactly how to create beautiful, dynamic page headers in GeneratePress.
Don’t forget to drop me a comment and let me know what you think!
Resources used:
- GeneratePress Premium (affiliate link)
- My GeneratePress + Elementor custom tweaks
- Why is GP the best WordPress theme for non-coder designers?
- Simple CSS plugin
The first link is an affiliate link. If you buy after clicking the link, I get a small commission. No extra cost to you. Regardless, I’d 100% recommended GeneratePress anyway.
Thanks Dave, had my mid-morning 2nd cup of coffee and watched, you saved me a lot of time fumbling around 😉 Another great video by the way, love the flow of them and the way they are presented.
Thank you so much Mike!
Really cool stuff.
Will definately be using this soon
Thx for all the great tutorias – keep it up !
Thanks Dragana! I’ll reply to your emails, by the way, I’ve been away all week on holiday, just catching up. 🙂
Great stuff. thank you!!
Thanks a lot Shane. 🙂
I updated my site with GP 1.4 yesterday without thinking too much about it after doing it on my dev site and not seeing a problem. I then tried to write a post — and I rely on the Page Header feature, I should add — and didn’t see the Page Header editor in my post edit page. I panicked and put it to off until today where I could troubleshoot.
Then I got your email this morning with this video. Fortuitous timing for me.
Thank you Dave. Again, well taught as always. Saved me. I’ve updated all my posts at the site now.
Yeah, I thought it could well be pretty confusing without a bit of direction! Glad it was helpful Brandon. 🙂
Dave
Thanks for your video highlighting the update 1.4 to GeneratePress premium. I use that theme in several sites and find it very good. Last night I had updated several websites to 1.4 but didn’t know what changes were available within the update. Thanks for revealing some of them today.
By co-incidents I also watched another video today about another theme called Astra which is in the process of being rolled out within the next week – https://www.youtube.com/watch?v=9fFZKDe6CB0. Have you any thoughts on this new theme and what it will contain in terms of headers, etc!
Des
No problem Des, a pleasure. I’ve not tried Astra but I’ve heard some great things. I’m actually a big believer, generally, in sticking to your chosen tools and avoiding shiny object syndrome… but when I get a moment I’ll give it a run out. 🙂
Interesting new feature. Not sure I still wouldn’t choose to use Elementor Pro though.
When you were adding in the page header content there didn’t seem to be any option for columns or therefore responsive control on the different screen sizes?
No it’s limited in that respect Steve. Though you could use a plugin like Tom’s lightweight grid columns… but then you’re back to using a separate tool. 🙂
Awesome, thank you for bringing me up to speed and let me fantasize about the new possibilities while I’m on vacation 😉
No worries mate! Funny, I’ve been on holiday and come back again in the time you’ve been away! 😉
Smashing tutorial… As usual…
This feature needs some practice but is definitely worth the time.
Just one question though,
Can this feature be used in conjunction with Elementor’s Edit Post Widget ?
Many thanks.
No, sadly. GP’s global ‘blog page’ header affects the site’s main blog listing page. Elementor’s Posts widget is just a widget you can place on any page. So they’re not connected.
I saw from your YouTube comment you wanted to use masonry layout. You can actually set that in GP’s blog settings in the Customizer, to use GP’s masonry layout instead of Elementor’s widget.
Thanks so much Dave. Great explanation. Super excited about what can be accomplished with this.
Thank you Mark. 🙂
So there is no point in using Elementor/Elementor Pro with GP 1.4?
Well it depends on what you use Elementor for. If you only use it to create nice page headers, and you can replicate what you want with GP, then no, you don’t need it, especially as GP’s new implementation is dynamic. But Elementor does far far more than just create page headers. So I’d say you’d definitely still need it, if you used any of its features.
Hi dave I love your post! currently Im following your courses in order to develop my website. I just have one issue I cant manage to make on GeneratorPress. I have the premium version by following one of your tutorials and the premium version of Elementor.
But How do you make that little yellow box in the content that says:
How to you make the small ALSO: Read why I recommend GeneratePress as THE very best WordPress theme for non-coder designers.
?
Did you did it with a special plugin or I can do it with generator press? I have been trying for weeks and I have no idea how to be able to it.
Thanks a lot waiting for your reply!
Actually, I did that with some HTML and CSS code.
This is the HTML code in the post itself:
<div class="box box-yellow"><strong>ALSO:</strong> Read <a href="https://www.designbuildweb.co/best-wordpress-theme-non-coder-graphic-designers/">why I recommend GeneratePress</a> as THE very best WordPress theme for non-coder designers.</div>
(You’ll have to switch to the ‘Text’ tab in the post editor).
And then I have this CSS:
body.single-post .box {background-color: #FFDF8F;
margin-bottom: 1em;
padding: 20px;
}
body.single-post .box a {
color: #9A3402 !important;
font-weight: bold;
text-decoration: underline;
}
body.single-post .box p:last-child {
margin-bottom: 0;
}
You could add that in Appearance > Customize > Additional CSS.
Hope that work ok for you.
hi. thanks for this. i followed what you have done. and i successfully made a header last night. however now, i am trying to to some tweaks. i can no longer edit it. whenever i click the content, it is no longer working. the page freezes. have you also encountered this problem?
I haven’t, I’m sorry. Best contact GP support!