Full Gutenberg WordPress Tutorial + Kadence for Beginners
ฝัง
- เผยแพร่เมื่อ 20 ก.ค. 2024
- How to make a WordPress website with Gutenberg from scratch - no page builders! TIMESTAMPS BELOW 🔔 SUBSCRIBE!
In this tutorial, I will show you how to make a beautiful WordPress website that is mobile-friendly, responsive across devices, super fast and loved by Google! In addition to the WordPress Block Editor, you will learn how to use the FREE Kadence Theme and Kadence Blocks to build an amazing Gutenberg website, AND we'll also look at cool extras using Kadence Pro. I'll also share what the best plugins are, and where to get free logos and images. We'll also check out how to create contact forms and a customer relationship management (CRM) system inside of WordPress and much more!
🔗 USEFUL LINKS 🔗
Gutenberg Course = www.jackinthenet.com
Kadence = www.jackinthenet.com/kadence
SiteGround = jackinthenet.com/sg
NameHero = www.jackinthenet.com/nh
Fluent CRM = www.jackinthenet.com/crm
WP Rocket = www.jackinthenet.com/rocket
Security Pro = www.jackinthenet.com/ithemes
BackupBuddy = www.jackinthenet.com/ithemes
⏰ TIMESTAMPS ⏰
SETUP
Gutenberg WordPress Tutorial What We Cover (00:00)
Best WordPress Web Hosting (03:12)
How to Install WordPress (06:20)
Staging (07:14)
The WordPress Dashboard, Front End and Backend (11:00)
WordPress Themes Explained (12:00)
Optimising WordPress (17:00)
Get a Free SSL Certificate (19:20)
DESIGNING
Installing Kadence Theme and Blocks (21:30)
How to upload plugins to WordPress (25:18)
Starter Templates (26:30)
Add New Pages & Set Home Page and Blog Page (31:35)
How to Use the Kadence Theme Customiser (33:30)
How to get a free logo and favicon (36:00)
Add Menus (38:23)
How to use WordPress block editor Gutenberg (42:50)
HOMEPAGE
Hero Section and Row Layout Block (48:14)
Styling Dividers and Mobile Optimization (58:00)
Advanced Heading Block and Buttons (01:01:00)
Reusable Blocks (01:13:30)
Kadence Design Library Premade Sections (01:16:17)
Working with columns (01:22:33)
Mobile Responsive Design (01:27:30)
HEADERS AND FOOTERS
Header Builder: Sticky and Transparent Headers (01:32:50)
Designing the Footer (01:44:00)
How to add widgets to footer or sidebar (01:47:50)
CONTACT/SUBSCRIBE FORMS AND WORDPRESS CRM
Contact Page (01:52:08)
Best Contact Form and CRM System (01:56:00)
FAQ's (02:14:40)
KADENCE PRO
How to get access to all Kadence products (02:16:30)
Page Transitions (02:21:30)
Kadence Blocks Gutenberg Animations (02:22:45)
Pro Header and Footer (02:30:09)
BLOG
How to add blog posts (02:32:55)
Designing the Archive Page (02:36:00)
Designing Single Blog Post Page (02:40:14)
MUST HAVE PLUGINS
RankMath Best SEO (02:42:00)
WordPress Speed Optimisation WP Rocket (02:47:15)
Best WordPress Security (02:50:00)
Best WordPress Backups Plugin (02:52:00)
What we have learned (02:53:30)
🔔 SUBSCRIBE & HIT THE 🔔 to turn on notifications & never miss a new upload!
Thanks for watching, make sure to comment! And who do you know that would benefit from this tutorial? Spread the love, share this with them.
Jack in the Net
www.jackinthenet.com
#gutenberg #wordpress #kadence
Affiliate Disclaimer: This video & description contains affiliate links. If you buy a product through this you won't pay any extra, but I get a small commission. Thank you for that support it really helps to keep making free video tutorials. - แนวปฏิบัติและการใช้ชีวิต
Ready for something mind-blowing? Check this out, it's going to revolutionize web design th-cam.com/video/dyPIk2zbBo4/w-d-xo.html
Absolutely the best explanation on gutenberg and kadence blocks for creating a website in word press I've ever seen. You have helped me more than you know. I'm looking forward to doing your courses and watching all your other videos. oh and I've subscribed. Thank you so very much for taking the time to make this.
All someone needs starting with Gutenberg!Thanks a lot!
Hi Jack, redoing my website, done with Elementor. Watching your wonderful tutorial again - thorough, clear, so much value here. Plus an awesome voice. Thank you for this gift.
You're awesome bro! The effort that you've putten is un-imaginable!
Such an informative and helpful tutorial. It's very well done. Thank you
Thank you so much. I can't wait to watch more of your videos on Kadence.
You’re simply THE BOMB. Awesome tutorial!!! Needle in a haystack!!
Thank you for your great generosity in providing this tutorial. Very helpful.
The most incredible tutorial ever! I have searched through a massive amount of videos and this tutorial is by far the very best! Thank you so much for making this! It has helped me a tremendous amount!
Glad it helped!
Thank you! Liked and subscribed for superb content!
After watching this video, there is nothing left to learn in Gutenberg. Awesome video. Appreciate your hard work. I expect your channel to grow to at least 1M subscribers. Keep on doing this great content. Thanks. 😊😍
Does anyone know if Jack is alive?
Awesome tutorial. Loved every minute of it.
Hey Jack, I am trying to build a couple of websites and have been struggling with elementor for days now. I wanted to achieve certain things that always requires payment to various subscription.
Your videos have been an absolute saviour both mentally and financially.
Cheers fella.
Thank you very much. Truly grateful. Looking forward.
Perfect Tutorial, thanks for sharing
From Zero to Hero! One of the best tutorials on Kadence/Gutenberg! Thanks!! I searched for your Kadence Pro, Fluent CRM and STMP tutorials, yet could not find them. Can you please provide the links for them? THANKS!!!!
Great tut Jack. Very comprehensive. When will your masterclass be available?? Any additional Kadence vids coming??
I'm pretty good with Elementor. I didn't want to migrate to full Gutenberg yet. But after seeing your video, I feel that Gutenberg is ready for the big leagues. Thank you for the tutorial. Looking at the Gutenberg page builder it looks more like Divi than Elementor. Just my thoughts.
Very comprehensive and detailed. Appreciate your effort :)
Many thanks 😊
@@JackintheNet Thank you for this awesome helpful video. When is your pro course on website launching ?
Excellent video thanks 😊
Good stuff! Thank you!
Awesome tutorial. One for the best. Please make more videos like this one. You should add this tutorial to Skill Share or Udemy. I have checked many of their Word Press Gutenburg tutorials and none of them is as comprehensive and as good as yours.
Excellent Tutorial!
Nice video. Thank you.
Superb tutorial!
3 thumbs up!! Awesome!!!
Appreciate it Mate coming from the Philippines
Awesome, as usual
Amazing tutorial Jack. Can you pls make one for Gutenberg + Blocksy. Thanks
Great video! Is it possible to move the navigation bar below the header section, or will it always be on top?
Thanks for this - best class I've seen. Is the Masterclass still in the works?
Excellent turtorial. You meantion in the video times-stamps in the description and also links to other tutorials.... but you didn't paste them there....
thanks for the helpful education video - as a newbie setting up their got a bit thrown by all the paid plugin's but good for awareness I guess. do you have a video on setting up cookies, how / format they appear to a visitor to a website ?
hi there good day dear Jack
awesome: very very well done - thx for this. Wee need more tutorials for FSE (Full-Site-Editing) and Query-Loop - the most advanced techniques in Future-WP - etc. WP 5.9.
'any idea how to come up with this. Keep up the great work - it rocks! Greetings
This is so valuable and everything was going so well. And then at about 51 minutes - my Wordpress Kadence didn't look like yours. I see nothing called Structure Settings or adjusting the height of the photo?
This is an awesome tutorial. Learned lots and will watch it a few times. I am switching to Wordpress from Joomla and am having trouble replicating my Joomla sites.
Is dynamic text the same as a blog? I do a free church website and want to upload the sermon text, should I just set these up as a blog? FYI - there are 3 pastors and some visiting pastors that would upload their sermons.
Would love to see some Blocksy videos!
So helpful! Thank you so much. Quick question I hope you can answer. For speed's sake, would it be better to avoid installing the theme and only add Kadence blocks to Gutenberg?
You have to have a theme anyway so might as well be Kadence.
Thanks for your great service to the complete world......
I have an very important question and humble request. Please can you help me as my XAMPP server is not working properly. Its MySql is not opening as it says unexpected shutdown error.
I think it happened with usual power cut as I am not having an UPS for my desktop. Please can you tell some solution for that.
⏰ TIMESTAMPS ⏰
SETUP
00:00 Gutenberg WordPress Tutorial What We Cover
03:12 Best WordPress Web Hosting
06:20 How to Install WordPress
07:14 Staging
11:00 The WordPress Dashboard, Front End and Backend
12:00 WordPress Themes Explained
17:00 Optimising WordPress
19:20 Get a Free SSL Certificate
DESIGNING
21:30 Installing Kadence Theme and Blocks
25:18 How to upload plugins to WordPress
26:30 Starter Templates
31:35 Add New Pages & Set Home Page and Blog Page
33:30 How to Use the Kadence Theme Customiser
36:00 How to get a free logo and favicon
38:23 Add Menus
42:50 How to use WordPress block editor Gutenberg
HOMEPAGE
48:14 Hero Section and Row Layout Block
58:00 Styling Dividers and Mobile Optimization
01:01:00 Advanced Heading Block and Buttons
01:13:30 Reusable Blocks
01:16:17 Kadence Design Library Premade Sections
01:22:33 Working with columns
01:27:30 Mobile Responsive Design
HEADERS AND FOOTERS
01:32:50 Header Builder: Sticky and Transparent Headers
Designing the Footer
01:44:00 How to add widgets to footer or sidebar
01:47:50 CONTACT/SUBSCRIBE FORMS AND WORDPRESS CRM
01:52:08 Contact Page
01:56:00 Best Contact Form and CRM System
02:14:40 FAQ's
KADENCE PRO
02:16:30 How to get access to all Kadence products
02:21:30 Page Transitions
02:22:45 Kadence Blocks Gutenberg Animations
02:30:09 Pro Header and Footer
BLOG
02:32:55 How to add blog posts
02:36:00 Designing the Archive Page
02:40:14 Designing Single Blog Post Page
MUST HAVE PLUGINS
02:42:00 RankMath Best SEO
02:47:15 WordPress Speed Optimisation WP Rocket
02:50:00 Best WordPress Security
02:52:00 Best WordPress Backups Plugin
02:53:30 What we have learned
Is there any possibility to setup a multilungual website using Gutenberg/Kadence? Living in Belgium I need at least Dutch/English and if possible French pages
Thanks for the full comprehensive Wordpress Tut i have been looking for! This is it! I have a question. I bought The Networker Theme and it says its optimized for Gutenburg. Do i need to Gutenburg Plugins? Im guessing i cant use this theme with elementor, becuase i cannot get the layout blocks to show.
Hi I’ve not used that theme but some can be made for different types of page builders, but you don’t want to mix elementor with Gutenberg
How much time would it take for a new person to build a website for a personal investment insurance business, following this video? The website will include a landing page for leads, information on various types of investments and services, and a blog page for the latest updates on investments. I have a domain name with GoDaddy and plan to use SiteGround for hosting, with the Kadence theme and Gutenberg in WordPress. Just to get an idea of how much time I need to put aside to build a portfolio type website. Thank you for your guidance.
hi thank you so much for this amazing tutorial but i followed every steps to change my website along the video the problem i faced is google still showsup my old url and i dont really know how to change it with the new one can you help me with that?
Can I use Laragon as my staging site and still follow along with your tutorial?
Please show us how to set up a vertical sidebar menu with Kadence
Is your gutenberg masterclass going to be ready soon?
Hi guys!
I faced the following issue, related to Jack's explanations on menus, around 40:00:
After adding submenus and testing it on page view, when I hover on main menu item, sub menus that I added in WP appear, but when I try to hover over sub-menus, they disappear, the way I have no option to click on them. Looked for solution on the web of course, found some explanations on this kind of issue, but found no solution for Kadence theme in particular. If anyone faced same problem and found what is wrong there, could you please share the solution? Maybe some additional CSS needs to be added, if yes, what would that be?
Thanks!
Do you need your site to be live to be able to test the form or can you test locally?
Thank you for the great video
I cant seem to find the link to the structure settings video you mention @51:48
Or I am blind...
I don't see it either. Guess we're both blind 🙃
Sir, please update, new release of gutenberg element functions. Best wishes.
Honestly, it is too bad you stopped TH-cam. Your channel is growing, and would have been huge.
Hi Jack, can you make some restaurant or food based website with kadence free blocks for us..your last video gives us very good knowledge to us...can you please come up with hotel based website for us like food items, menu, booking, location like that....
Thank u waiting for your reply...
You are helping me big time in staring to learn GB+Kadence this past weekend to leave Elementor. GB does get a little confusing. On the block settings (they should call it widgets), some blocks like Heading, I can't add any padding or margin as those settings don't exist. Yet, Advanced heading with Kadence has a boatload of setting options. No rhyme or reason. And, why are there no subtle outlines of a section. It's really hard to know where I am because they seem to call a section a block, and a widget a block and am editing the section, or the block? And trying to add or move widgets (blocks) to another column, under another widget, it's like trying to add a thread into a needle eye. I wish GB would ask me to add a section, create settings, then add blocks to the section. Any advice and tips on how to master this as I can't seem to figure this out yet?
use elementor toolkit! more speed
Can Kadance plugin be installed with any Theme?
Just Checked your channel, all of it is in Elementor but you mentioned Gutenberg is better, so will we be expecting more on Gutenberg in future? I was planning to buy 1 of these but going with gutenberg type block themes now instead of a builder like elementor or bricks or oxygen.
I am putting out more content on Gutenberg but will also do elementor updates as many still use it
does Gutenberg have a front end editor now?
What version of wordpress is this?
Good video....no page builders needed but your recommendations that change the look from the outset if you don't have them.....
Holy Cow! You sound like you're lip-syncing some older man's voice! Thank you so much for this full tutorials!
Haha thank you… I think!
@@JackintheNet dunno about the "old man's voice" but I sure love British accent :D Amazing tutorial BTW
🍾
Is the masterclass still available to buy?
I am trying to figure that out myself, it seems he disappeared off TH-cam about one year ago
Great video. I have been using Elementor, but will switch to this for a test. Also the jackinthenet.com/crm link is broken.
its broken cause of gutenburg
You said paying for SSL certificate is a scam, true, but then so is paying for domain privacy; many registrars give it you free.
I think something happened to Jack. He haven't uploaded any video since, he didn't update his website, he didn't post any updates anywhere.
wwwwwwow
I wanted to follow along with your tutorial as it looked very good but when I tried to look at the Kadence templates, it simply wouln't load any templates - very irritating so I've gone somewhere else to learn Gutenburg Blocks