Gutenberg WordPress Tutorial - Beginners Guide
ฝัง
- เผยแพร่เมื่อ 10 ก.ค. 2024
- In this Gutenberg WordPress Tutorial, you'll learn how to get started using Gutenberg, the Blocks feature, a selection of great free block plugins.
Love it or hate it, Gutenberg for WordPress is here to stay, so let's embrace what it offers, deal with some of its shortcomings and learn how to build websites with it.
This Gutenberg WordPress Tutorial is aimed at beginners, but even if you've used Gutenberg, there are some useful add-ons and free tools included here to make it much more useful.
Enjoy this Gutenberg WordPress Tutorial and start building better looking, fast loading websites today!
Kadence Theme: jo.my/nu96im
Kadence Blocks: jo.my/1hcktp
Blocksy: jo.my/y67ten
GeneratePress: jo.my/atme3l
GenerateBlocks: jo.my/xotgcy
Stackable: jo.my/stackable
Take your WordPress website and skills to the next level!
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: jo.my/vividpro (use WPTUTS20 for 20% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Brizy Pro: bit.ly/2Ji97r8
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ OCEANWP: bit.ly/2fRHBr0
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ SMART SLIDER 3: bit.ly/2G0G1vB
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
👉 Twitter: / wptutz
👉 Facebook Group: wptuts.co.uk/facebook
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk - แนวปฏิบัติและการใช้ชีวิต
Hi Paul, This video is a great starting point for people moving over to Gutenberg from one of the old page builders. Very nice and easy to follow. Cheers John
Thanks so much!! I was just about to leave WordPress for something else. Your video brought me back. Well done!
thanks Paul, i always enjoy watching your videos, thoughtful, direct to the point, and productive results .. appreciated !
I started with Gutenberg about 3 weeks ago and love it.
Subscribed because you're a genuine older guy that has a tonne of experience. I'm just a little younger than you, and I've just started using WP's new FSE feature. I've got to develop some plugins that integrate with Gutenburg ... but I know very little about Gutenburg and this video has helped me understand what it's about. Thanks buddy. Subbed.
Excellent tutorial. quick, organized and super informative. Thanks!
This video was perfect for me, all killer no filler! Thanks
Darnn Paul now you've gone and done it! Lol
Now I'm going to have to attempt to jump in on the Gutenberg band wagon. Truth be known, I've been hesitant as I found it clumsy to work with early on. However, some of the additional block plug-ins make it seem more usable like many of the page builders that so many of us may be coming from.
Awesome video demonstration as usual! Thanks for the great content you always provide to us!
Awesome video demonstration as usual! Thanks.
Now, we are waiting a higher-level video on this topic +troubleshooting session :-)
Super useful video! Thanks, Paul.
👉👉👉 Muchas gracias, excelente tutorial. Muy claro y bien explicado. Saludos desde Santiago de Chile. 😃👌👍
Smashing tutorial as usual. many thanks !
Your tutorial was kind of incredibly useful. Thanks.😅
Great video Paul! please do more gutenburg tutorials exampel how to build website/ecommerce with kadence blocks or stackable design libary
As usual, great video - thank you for! I see myself more and more switchting to Gutenberg (with addon blocks) from Elementor...
Same here. I'm not using Elementor for the new WPTuts site and this is a big part of why I've been working on more Gunetenberg content lately. :)
@@WPTuts Looking forward to more Gutenberg (addons) tuts then (for example how to nicely animate elements ;-) Thanks a lot!!
great tutorial, big help :) thank you so much
Great video and very helpful as I'm getting a bit fed up with standard theme installs etc. I cannot see however if these Gutenberg blocks are mobile friendly or a button where you can see on PC, mobile and tablet. I also cannot see where each page has it's SEO options or adding anchors which is something a use a lot. These things I will try and find. Thanks again for your time.
Very useful video. Thanks!
.
I have yet to determine how to enter a block that is a element in the source code. Even more lacking is no way to add CSS class or id to the nor inline CSS style attribute or any other attribute to the
And we must be able to put other HTML elements into the block, edit their attribute collection(s) and nest the HTML elements.
You are an excellent teacher.!! Do not get me wrong and your work is much appreciated. The comment was not directed to you at all. it is a generic comment. IS incredible the amount of 'things' ( Plug-ins, themes, page builders, gutenberg, SEO , SSL, etc, etc ) that we need to go thru' and is NOT really worth it. These companies are all competing for a share of the market and we pay the brunt of it. Plug-ins that do not work , etc,etc due to the constant changes and the list goes on and on.
Thanks very much for work dedicated work to your audience , with your brillinat tutorials. Nothing to do with you is the "industry", i am afraid.
Kind REgards
Martin
Hi Paul, Thanks for the videos been really awesome learning alot from you. I want to switch from elementor for several reasons like cost, bloat and extra plugins. what would you recommend ?
Do you still want to use a Page Builder or happy to move over to Gutenberg and related tools?
The real question is, what do you intend to build? If it's more complex designs with dynamic data, then that has one set of considerations. If it's simpler sites, blogs or e-commerce, that has a different set of considerations. :)
@@WPTuts Well i build all kind of sites, from complex ones with dynamic data to simple ones and I have solely relied on page builders (elementor and Divi). i just want speed and less dependencies on plugins. so what say ye Coach 😀
Haven't even watched yet (will do shortly). But still given a thumbs up as I'm about to embark on Gutenberg (purchased Kadence blocks). Intending on creating future client sites in Gutenberg / Kadence and possibly move existing Elementor ones too. (Not 'jumping' from Elementor, good to have both skills).
I'm very much of the same mind set. I've been moving certain projects over to G & Stackable for the same reasons.
@@WPTuts I'm hoping you keep a pace going with further Gutenberg tuts.
(Kadence would be a bonus - I suppose!)
:-)
@@rg-web-design I will be doing some more videos on Gutenberg along with some recommended themes, block addons and tools to make Gutenberg a more useful tool. :)
Great overview. DO you have any insights or recommendtaions on Digital Asset Management as it relates to the Media Library? Does Stackable Design offer such a function?
Paul, this was SO useful, thanks so much for posting it! I have a couple of questions: What do you think would be the speed benefit (or loss) using Blocksy and block plugins like the Stackable or Kadence ones over using, say, Kadence theme with Kadence blocks? Minimal? And if I need dynamic sidebar menus for certain pages, would I be better off using something like Kadence over Blocksy, or does it matter? Thanks for putting out such amazing content, I'm learning so much!
I've used Blocksy with a combination of Kadence blocks and Stackable and got great results (both layout and load times/metrics).
I'm not really a big fan of the Kadence theme, so I'm probably not the best person to offer factual advice on the theme or its features I'm afraid.
I don't think you'd go far wrong with Blocksy, but why not give the free versions of both a try and see which one resonates with you more. :)
@@WPTuts I've been playing around with Blocksy and Stackable (free versions) for the last couple of days or so (because of this video). I'm really highly impressed! A year or two ago, I thought I'd do my school site revamp with Elementor - but ... well ... COVID. I work in the school office, so life got busy and convoluted, as most of ours has! The project when faaaar to the wayside...
I'm finally looking at the whole thing again and I'm now thinking that I'd love to "future-proof" this thing a bit and go with both a bit of a simpler set up and with the direction WordPress seems to be heading (I mean, I'm 55yo, I won't be working here forever! I've got to pass it on at some point! LOL). I have to say that I am finding Blocksy VERY intuitive, coming from Divi and then a bit of Elementor background. I have a whale of a site, but I think that with the Pro versions of each of these, I could re-create it with justice. I mean, even with the free versions I could do it pretty well! But I think I need some deeper customization and some dynamic stuff, so your opinions on these themes and plugins has been really helpful. As has many of your other videos in custom post types and such.
I have mucked about with Kadence in this process, as well. But I see what you are saying about Blocksy - really quite good! I'm rather liking the WP customizer for once! Who knew that would be possible? :D
Thanks for the feedback!
Excellent!
thank u great teacher
wonderful tutorial
Hello, Can we use Pods for dynamic content with Gutenberg wordress? I know that works great with elementor , how about Gutenberg?
Some nice Gutenberg tips here, thanks for sharing! As far as reusable blocks, I tested that feature in the past and experienced problems where the blocks were just disappearing - and as you can imagine, that can be a nightmare - especially if the reusable blocks were a pricing table or something and they all just went missing all at once for no apparent reason. And that's exactly what happened in my case! Not sure what the issue was, but I never really trusted reusable blocks after that. And I'm not the only one who's experienced this issue, others have reported the issue too. Have you ever experienced this?? If so, is there a fix to it?
It was a common erron noe fixed in WP 6.0...
thanks
Random question but how do you make tour cursor have that nice red circle when you click on your mac?
It's all done inside Screenflow. There's an option to adjust the cursor size as well as apply a couple of different effects on click.
Thanks for great video! I am having trouble finding the Stackable Design Library button. I installed Kadence theme and still can't see the button above. Where can I find this?
I found it. I thought Addon was different from plugin.
That felt a bit like an ad, but the outro was pretty clever ngl
Nice introduction
God bless you
Keep it up sir love from pakistan
Thanks Paul, a great starter video. You didn't mention the plugin "Ultimate Addons for Gutenburg" from Brainstorm Force (makers of Astra, etc.) Comments on this Plugin?
I tried it a while ago and wasn't really blown away by it. Maybe I need to go back and take another look.
Do you use and recommend it? If so, what do you think are the standout features?
@@WPTuts Paul, I haven't put it to work yet. Just getting into Gutenberg and have a license via their Addons for Elementor.. It comes free with my license so will look at using it with Kadence or Blocksy
@@michaelmclaughlin1563 let me know how you get on when you give it a try. :)
Hey Paul, firstly thanks for your continuing contribution to the wp community. Big up. And my question.. What are your thoughts on kadence pro with Hooked elements etc in conjunction with Stackable Blocks? Do you think they would play nicely or best to avoid?
I've not used the Kadence hooks feature, but I can't see any reason why they wouldn't work well with Stackable Blocks. I've used the same method with Blocksy Hooks and that works well.
Maybe its a Kadence Child theme scenario..
weird my other replies didnt make it through.. ney bother :-) Thank you Paul
@@howmightwestudio there seems to be a thing happening with TH-cam supressing comments for no apparent reason. I had the exact same issue myself replying to another creators content yesterday. My initial comment was removed for no reason, I added a really simple comment and that posted. He replied to to me, I replied back and that was removed too..
It's pretty frustrating as both a commenter and a creator when comments simply disappear.
But on reflection its waaaay to complex and off subject for this thread :-)
I cannot figure why the blue + (plus) is not working. Basicaly I can use only plain text.
Sir Line Height missing in Typogrophy?? What to do??
Nice intro. Total noob question here, but what is the "Gutenberg for Beginners" text? It doesn't show up in either the page settings or the block settings.
Hello Tutor. Please this Gutenberg editor is nightmare, the blue plus button is not working in my case. And I don't know why, I have done everything possible to fix it by changing the theme, disable couples of plugins to troubleshoot. Added Classic Editor, it changes the appearance to a kind of HTML editor but no regular formating features. Please I will be very grateful if you can direct on how to fix it. I dontblike to use the Gutenberg editor because its not working in my WordPress. I always enjoy your Tutorial Sir. Thanks for taking my dynamic knowledge to another level.
The file I downloaded but "local" will not install. Even though I downlaoded the Ubuntu version.
Sir can I add so many products using only Gutenberg....without woocommerce
Gutanburg like figma I recommend to all ui designer use this Builder
I have global colours set in my theme, also in Elementor and also potentially in stackable. How on earth do I know which one wins??🤔
In my WP install, V6.2.2 I see nothing about Gutenberg at all. How does one get to the screens being shown here for Gutenberg?
Is this the future builder?
How can I install Gutenberg?
how do you even get to where you are starting from here? all i see is a bunch of options that seemingly do nothing. as a coder wordpress is really aggravating me
you said first up but forgot to say where you actually are. In site editor, page editor? that editing view can be seen in both and it isnt clear where you even start. How about doing an actual start from fresh install and where you go first. Templates? appearance - site editor- templates? create a page in dashboard? etc. You went straight to god knows where. Is this meant to be beginner?
I guess you are showing how to use the block editor. But this doesnt help on how to build an actual site at all. Do you have any videos of creating a one page site from start to finish. How you would set up a template or apply a template. Why even go into templates at all. Why do I need a front page template. ??
First :)
it so sad that i have to watch a tutorial on how to use Gutenberg as I am old school been using the classic editor since WordPress started. After watching this gutenburg sucks its a hassle the classic editor is superior
Thank you for the tutorial. But I find Gutenberg terrible. The interface is confusing and everything is lumped together as if they just took a bunch of features and dumped it all on us to figure out.
The UI is God awful and I find that I can't get work done like I can with all of the other page builders on Wordpress.
I'm already getting complaints from customers. They find Gutenberg confusing and way harder than Wix or Weebly. In fact, they already are driven away from Wordpress because of their experience with Gutenberg.
Not only is the UI pretty bad, making simple edits such as spacing and font sizes just doesn't work. The tag doesn't work. Simple hitting enter to create a space doesn't work. It's a total fircken mess.
If I could decide about Gutenberg, I would honestly just scrap it. It's that bad.
Very useful and excellent video.