You take a container, give it a background with an overlay if you want, add a block inside the container. And be sure to enable the content title from Page editor.
I've been quite impressed by GeneratePress. Chasing 100/100 performance for WordPress web development has been a journey. This is the only product I can safely say is worth it. After testing many trash bloated themes that claim to be high performance / fast I gave up a while ago. Most of these visual builder themes never understood the core focus of WordPress architecture so I gave up. I've been mainly building complete custom themes to get the performance I want out of it. What's great about GeneratePress - is it cuts down my production time and still gives me control of what elements are loaded in. With relatively little optimisations you can get this baby performing better then 80% of websites out there. Great tutorial mate. Looking forward to using this more especially with how dev friendly and easy the UI is.
That is great to hear, the latest version of GeneratePress 3.0 is in Alpha testing and is even faster. Take a look… generatepress.com/generatepress-3-0-a-new-era/
Mike, that was incredibly helpful, thank you! Great info for creating blueprints and consistent starting points! Also, never seen Stickies in action quite like that, as well! Good stuff. This series of videos is exactly what I was needing so, again, much appreciate you sharing your expertise.
Appreciate it man! Really helpful video to create "templates" for a whole site using GP on GB. I would consider changing the video title because the video is so much more than just this title
Mike Oliver Design Nope. That’s what I can’t figure out. It’s not part of the element. It doesn’t seem like there’s a section to change it which doesn’t make sense.
@@MikeOliverDesign , junxiao zhou refers to the yellow area you stick on the screen when demonstrated the alignment. See here: www.screencast.com/t/U1TrZ5AIB0
QUESTION: Do I need to deactivate Elementor for the Generate Blocks to work? I already downloaded it but it doesn't show it's features or buttons when I open an existing post or Create a New Post... Help... Does it only work if the theme is Generate Press?
I wouldn’t use Elementor and the Block editor. GenerateBlocks works with any theme. I would try turning off elementor and then going in and editing the page with the block editor.
Hi brother ! I have had a problem with the new generateblocks! When I create a container, it doesn't give me the option to see full width... and it doesn't let me add background image either in the block options
Thank you very very much. Amazing tutorial. You finally gave me a tremendous insight about how to setup the starting point for almost any project. I generally end up with a lot of code in the custom CSS and as the time passes it becomes almost unmanageable. I would really like to see your settings for the typography to be honest :-)
See below and also write container-shadow in the containers advanced/css classes field… .container-shadow { box-shadow: 0px -5px 10px rgba(20, 20, 20, 0.1); }
I have a video on my channel that shows how to build a custom footer with GenerateBlocks. If I find time, I will do a video showing how I built one of the GeneratePress site about pages.
Hey Mike, great video thank you. For the Home page, could you please help me understand the relationship between your header element and the block you used to create that same header? Why did you create a Home page header element that only had an HTML comment? Unclear on the concept here.
Hi Jono, you would do that if you wanted the first row/container of your page design, whether it's done with blocks or a pagebuilder, to go up to the top of the browser window behind your navigation and logo. So unlike the Global Page Header which has the H1 title and background image with the gradient sitting at the top of the page, using a blank merged header allows you to use the blocks or a pagebuilder to create that top header section. The HTML comment needs to be there simply because the page header has to have some content to work, so an invisible HTML comment does the trick. Does that help?
@@MikeOliverDesign I think so, thanks. So this is a way to make a merged header using the first block on a page, instead of using the header element in GPP.
Thanks Tyler, I appreciate it. At the time of this video I was using screencast-o-matic and it has the mouse circle, but I had some issues with it and started using camtasia a few videos back.
First and foremost - thank you for your video on GP and GP blocks, they have really helped me move away from a bloaty page builder. I have a question though. How would you create a header, similar to your front page, using blocks but for a post archive?
Hey first thanks for the video it was really good stuff.Can you make amazon affiliate blogging website through generatepress theme and generateblock plugin without any builder.And you make a video please how to use social sharing button use in blog generatepress theme without any plugin.It would be really great for everyone.Hopefully you will make it.Thanks again.
You can do affiliate sites, I've done one although I can not share the link as it was a white label job. As far as social sharing, a plugin is needed but there are a couple super lightweight ones such as wordpress.org/plugins/shared-counts/ (free) and novashare.io/ (premium)
Thanks for another great video. The Mac stickies is a great idea, thank you for sharing!
Thanks Simon
Thank you very much! Excellent tutorial. Generatepress is kind of state of the art for building consistent and light WordPress sites.
These GPP and GB videos are gold and very much appreciated. And anytime you want to sell your pre-built blocks, you can just take my money ; )
Great idea! 😁
Good stuff. Was hoping though to see you walk us through how those header content and background was created.
You take a container, give it a background with an overlay if you want, add a block inside the container. And be sure to enable the content title from Page editor.
I've been quite impressed by GeneratePress.
Chasing 100/100 performance for WordPress web development has been a journey.
This is the only product I can safely say is worth it. After testing many trash bloated themes that claim to be high performance / fast I gave up a while ago. Most of these visual builder themes never understood the core focus of WordPress architecture so I gave up. I've been mainly building complete custom themes to get the performance I want out of it. What's great about GeneratePress - is it cuts down my production time and still gives me control of what elements are loaded in.
With relatively little optimisations you can get this baby performing better then 80% of websites out there.
Great tutorial mate. Looking forward to using this more especially with how dev friendly and easy the UI is.
That is great to hear, the latest version of GeneratePress 3.0 is in Alpha testing and is even faster. Take a look… generatepress.com/generatepress-3-0-a-new-era/
Mike, that was incredibly helpful, thank you! Great info for creating blueprints and consistent starting points! Also, never seen Stickies in action quite like that, as well! Good stuff. This series of videos is exactly what I was needing so, again, much appreciate you sharing your expertise.
Means a lot Bodie, thank you. More to come.
@@MikeOliverDesign Hey mike ,How did you got full page navigation in mobile mode
@@sachintiwari2289 I'm using the Off Canvas Panel under Customize/Layout/Off Canvas Panel/… and I have it set to Mobile Only
@@MikeOliverDesign That worked.... Thanks a lot Mike.
Appreciate it man! Really helpful video to create "templates" for a whole site using GP on GB. I would consider changing the video title because the video is so much more than just this title
Thanks Mike, great stuff - thanks for educating us on more effective uses of GP and GB - can't wait for Service to come out to dive into the settings.
Hopefully soon
Thanks for the tutorial Mike, very helpful.
Nice work. Thanks for sharing the knowledge!
Thanks I appreciate it :)
NIce stuff, thank you.
GIve us more videos on generatblocks :)
Trying, lots of client work to do, kids, life, etc. :)
The global page header that shows at the top of my pages won't change colors. Do you have any idea why this may be happening?
Hard to say without seeing it, is it a color set in the header element?
Mike Oliver Design Nope. That’s what I can’t figure out. It’s not part of the element. It doesn’t seem like there’s a section to change it which doesn’t make sense.
Hello, how are you? Good vides and jobs. What plugin or testing tool for the Yellow Area in your video?
Not sure what you mean by yellow area?
@@MikeOliverDesign , junxiao zhou
refers to the yellow area you stick on the screen when demonstrated the alignment. See here: www.screencast.com/t/U1TrZ5AIB0
@@the_matcha_man Aha, for those I'm using the Mac Stickies app
QUESTION:
Do I need to deactivate Elementor for the Generate Blocks to work? I already downloaded it but it doesn't show it's features or buttons when I open an existing post or Create a New Post... Help... Does it only work if the theme is Generate Press?
I wouldn’t use Elementor and the Block editor. GenerateBlocks works with any theme. I would try turning off elementor and then going in and editing the page with the block editor.
@@MikeOliverDesign Got it. Thanks.
Hi brother !
I have had a problem with the new generateblocks!
When I create a container, it doesn't give me the option to see full width...
and it doesn't let me add background image either in the block options
Sorry I missed this, hope you got it sorted.
Thank you very very much. Amazing tutorial. You finally gave me a tremendous insight about how to setup the starting point for almost any project.
I generally end up with a lot of code in the custom CSS and as the time passes it becomes almost unmanageable.
I would really like to see your settings for the typography to be honest :-)
I will try and do a quick Typography settings video
What was the css you've used to give a dropshadow around the container?
Thanks!
See below and also write container-shadow in the containers advanced/css classes field…
.container-shadow {
box-shadow: 0px -5px 10px rgba(20, 20, 20, 0.1);
}
@@MikeOliverDesign Thanks a lot for your reply!
@@MikeOliverDesign Thank you!
Is there somewhere I can find a walk through for an about us and footer?
I have a video on my channel that shows how to build a custom footer with GenerateBlocks. If I find time, I will do a video showing how I built one of the GeneratePress site about pages.
Hello Mike, which Gutenberg editor plugin do you recommend and use?
No plugin needed for Gutenberg anymore.
How did you got full page navigation in mobile mode
Sorry I missed a lot of comments, the mobile menu is the GeneratePress Off Canvas Overlay menu option
Hey Mike, great video thank you. For the Home page, could you please help me understand the relationship between your header element and the block you used to create that same header? Why did you create a Home page header element that only had an HTML comment? Unclear on the concept here.
Hi Jono, you would do that if you wanted the first row/container of your page design, whether it's done with blocks or a pagebuilder, to go up to the top of the browser window behind your navigation and logo. So unlike the Global Page Header which has the H1 title and background image with the gradient sitting at the top of the page, using a blank merged header allows you to use the blocks or a pagebuilder to create that top header section. The HTML comment needs to be there simply because the page header has to have some content to work, so an invisible HTML comment does the trick. Does that help?
@@MikeOliverDesign I think so, thanks. So this is a way to make a merged header using the first block on a page, instead of using the header element in GPP.
@@jonocowdery7895 Exactly
Brother genaratorpress home page title h1 missing.
How to solved?
What font is that for "Sevice" and the navigation, Mike? It's quite nice...
Service uses the font Oxygen everywhere. You can view the demo here... gpsites.co/service
hey mike, huge fan! what are you using for your mouse effect software?
Thanks Tyler, I appreciate it. At the time of this video I was using screencast-o-matic and it has the mouse circle, but I had some issues with it and started using camtasia a few videos back.
Awesome as always thanks Mike!
Much appreciated Marcus
I came here because Block was missing on my options. Disabling the "Classic Editor" seems to have fixed the issue and I can now see the Block option.
First and foremost - thank you for your video on GP and GP blocks, they have really helped me move away from a bloaty page builder.
I have a question though. How would you create a header, similar to your front page, using blocks but for a post archive?
Can you give me your home page template please ????????????????
This site demo is included in GeneratePress Premium
@@MikeOliverDesign But now my site is live and some posts have been published. So if I install site demo, will it affect my sites SEO or something.
Hey first thanks for the video it was really good stuff.Can you make amazon affiliate blogging website through generatepress theme and generateblock plugin without any builder.And you make a video please how to use social sharing button use in blog generatepress theme without any plugin.It would be really great for everyone.Hopefully you will make it.Thanks again.
You can do affiliate sites, I've done one although I can not share the link as it was a white label job. As far as social sharing, a plugin is needed but there are a couple super lightweight ones such as wordpress.org/plugins/shared-counts/ (free) and novashare.io/ (premium)
Most excellent - thank you!
Anthony Lepki 🙌🏻 you’re welcome