How to Build Really Fast Landing Pages With Gutenberg + Kadence Blocks
ฝัง
- เผยแพร่เมื่อ 10 ก.ค. 2024
- In this WordPress tutorial, I'll teach you step-by-step how to build really fast landing pages with Gutenberg and the Kadence Blocks plugin so you can recreate any page layout that you want.
I'll also go through all the best design principles to use so your pages look fantastic on desktop, tablet, and mobile screens.
If you build your pages with Gutenberg and Kadnece Blocks, your pages are going to be so much faster than using a third-party page builder such as Elementor. This will make it a lot easier for your website to pass Google's Core Web Vitals which will give your pages a crucial ranking boost from Google which means you can bring in hundreds, if not thousands, of extra visitors every month depending on the keywords your pages are ranking for.
TABLE OF CONTENTS
0:00 Intro
1:03 Kadence WP Video Shoutout
1:35 Install Kadence Theme
2:36 Install Kadence Blocks
3:47 Gutenberg Editor Explained
4:27 Kadence Page Settings Setup
5:24 Elementor Page Settings Comparison
6:01 Kadence Blocks Controls
6:49 Set Block Defaults
8:01 Build Hero Section
16:45 Build Second Section With Form
18:43 Build Third CTA Section
22:25 Mobile Responsiveness
27:00 Kadence Design Library
28:45 Kadence Wireframe Blocks
30:03 Wrapping Up
31:25 Free WordPress Speed Course
32:25 Outro
**************************
LINKS:
🖥 Recommended Hosting: startblogging101.com/hosting/
☁️ Cloudways - Fastest hosting and easiest to pass Core Web Vitals - Use Vultr HF server: startblogging101.com/cloudways
📈 FREE 7 Days to WordPress Speed Mastery Email Course: startblogging101.com/wordpres...
💰 Kadence Discount Code: 10% OFF any bundle using code SB10OFF
✅ Kadence Full Bundle: Includes Kadence Theme Pro + Kadence Blocks Pro + Kadence Cloud + Membership-Only Starter Templates and much more: startblogging101.com/kadence-... (10% OFF Use Code SB10OFF)
✅ Kadence Theme Pro: startblogging101.com/kadence-pro (10% OFF Use Code SB10OFF)
✅ Free Kadence Theme download: startblogging101.com/kadence
I’d love it if you joined my completely free Start Blogging 101 Community Facebook Group which is a group of rockstar individuals who are passionate about building fast, profitable WordPress sites with Gutenberg. Come join and say hi!
👋 Start Blogging 101 Facebook Community: / startblogging101
👉 Start Blogging 101 Facebook Page: / startblogging101
**************************
First, I'll show you how to install and activate the Kadence Theme on your website along with how to install and activate the Kadence Blocks plugin.
Then, we'll jump into how to build my homepage for Start Blogging 101 section by section using the WordPress block editor (Gutenberg) and Kadence Blocks.
The first section we'll build is a hero section with a headline on the left and an image on the right.
The second section we'll build has several paragraphs on the left and a sign-up form on the right.
The third section we'll build is a callout section with a Call To Action (CTA) button to get users to subscribe to a TH-cam channel.
Then, I'll show you how to make your landing pages mobile-friendly by using all of the responsive customization options available to you from Kadence Blocks.
Last, I'll show you how to speed up your page building abilities by using predesigned sections directly from the Kadence Theme including new wireframing blocks which makes building pages a breeze.
**************************
My channel is supported by my viewers. If you purchase through a link in my description, I may earn a commission which allows me to continue providing tutorials and content for all of you. I appreciate all your support!
#kadenceblocks #gutenberg #pagespeed
![[MUST WATCH] How To Make Any Page Layout Using The WordPress Block Builder Gutenberg](http://i.ytimg.com/vi/46P3kMrpFkQ/mqdefault.jpg)
This is the era of no page builders needed content creator. Thank you.
Thanks for the comment - appreciate it!
Hands down! the BEST content creator for this specific niche. Great tone, diction, and easy to understand.
Thank you😅
Great tutorial I needed to see to make a buying decision. Clicked your link to load your cookie. Tc. :)
Hey thanks so much for taking the time to watch the video and leave a comment! I really appreciate the support :)
One of the best explanations ever I've come across on Gutenberg kadence in parallel with Elementor, absolutely fantastic.
Hope to see more explanations with other them, plugins and tools too.
Keep it up, great work
Definitely throwing a heart on that comment! Awesome to hear that it was helpful for you. I know it always helps me to see how one tool works versus another tool, so I included the Elementor piece in there as well. Thanks for watching :)
Homie, you're changing lives out here! Thank you!
Wow, quite the compliment. Truly appreciate it! 🙏
exactly what I needed! Thanks
Glad it helped!
helpful and pleasing . thank you so much .
You are most welcome! Thanks for leaving a comment.
Excellent info, great tutorial.
Glad it was helpful, Luis! Thanks for watching.
Thank you, have a super Sunday and F12 was a real #nugget
Hey Byron! Glad you enjoyed it. F12 and the device toolbar was a savior when I first learned about it :)
Excellent!!!
Many thanks!!
damn best tutorial ever
Quite the compliment! I appreciate it :)
I am Going to copy all that,beginner to Expert level content
Glad to help you out!
Very useful
Glad to hear that!
thanks for great info. is this style of landing page convering well?
Can you do a tutorial on on building a bento box layout with the Kadence theme ? thank you
Thank you so much for this tutorial! Just one question tho: Is there anything that Kadence can't do that Elementor Pro can?
I am asking that because I am currently looking for a Gutenberg theme builder which would give me maximum flexibility while building a website.
Kadence would be what you're looking for, then :) Kadence has its own blocks plugin, supports dynamic data, theme builder (for building page templates), elements, has a cloud to host predesigned templates (aka patterns), header/footer builder, global color palette, and so much more. All the major elements you'd need to build any kind of website. Plus, it does all this in a super lightweight way, making your website really fast so you can more easily pass Core Web Vitals, unlike Elementor.
@@StartBlogging101 thank you so much for the reply. Very nice of you :)
@@tsykin Happy to help! :)
Great tutorial! One thing I have always wondered about Gutenberg: why do things look different in the editor compared to when you look at the actual site, as shown at 15:50? It drives me nuts sometimes! I wish they could fix this. It causes a lot of confusion.
As I somewhat explained in the video, Gutenberg is many times "expecting" another block to be coming (and it puts that '+' button below certain blocks in order to add a new block) which can add extra spacing when there is none. I agree, it's certainly confusing at times. I have gotten in the habit of always previewing my pages as I'm building them, but I'm hoping that WordPress figures out a way to polish this up a bit so we can still have an intuitive editing experience while still having the editor (backend) match up perfectly with the frontend.
@@StartBlogging101 Thanks! I hope they will manage to polish this a bit more.
Very informative. I have learned many things from your tutorials. I'm facing an issue with the Kadence theme, tho. When I try to optimize my pages for mobile, the changes don't go through. I cleaned all cache, including browser, but didn't work. Do you have any idea what could be?
Thanks for the comment, Lia! Glad to hear my tutorials are helping :) I'm a little confused as to what is happening on your end. What do you mean when you say the changes don't go through when you optimize your pages for mobile?
@@StartBlogging101 Thank you for your response. I mean when I'm customizing my pages to be mobile responsive, nothing is changing anymore. Stays the same. Usually, the updates were instant. I also deactivated all plugins one by one, nothing seems to work. Any idea would be greatly appreciated.
@@lialarose8011 If I'm understanding correctly, you're customizing your pages to be more mobile responsive in the Gutenberg editor, but then when you go to preview your page and see it live, nothing has changed? If so, I haven't heard of that issue at all. I would contact the free Kadence support and they should be able to get your URL and figure out exactly what's going on.
@@StartBlogging101 Yes, you understood correctly. I did contact Kadence support last week, but from my understanding, they don't inspect URLs in the free plan. Anyway, I managed to solve the issues myself. It is working now. Thank you for taking the time to answer.
@@lialarose8011 What was the cause of your problem and how did you solve it? It may help others.
What a fantastic video!!!! Is it possible to move or copy a block or blocks that are outside my columns into a column? Thanks!!!!😀
Hi there! Yeah, you can select multiple blocks by choosing one block, holding down the 'shift' key, and then choosing other blocks. Once you have all of the blocks highlights, you can use the 6 dots in the toolbar (3 vertical dots next to 3 vertical dots) to grab and drag those blocks to inside the column. Then, simply let go and all of those selected blocks will move to where you dropped them. Hope that helps!
@@StartBlogging101 thanks so much!! I am going to attempt to create a very minimalist home page. I want my site to be simple, lean, and fast. It's going to be a small site with a lot of archival mp3 files that are on the servers of the hosting company I use. Thanks again for your quick and helpful reply!!😀
How are you dealing with the DOM warning for all the classes in the body ?
Hi there! Are you referring to the DOM size having too many elements? If so, I have never once worried about that. It's a really silly suggestion and nothing to worry about unless you're using a third-party page builder which produces significantly more DOM elements that using a tool like the WordPress block editor + Kadence Blocks.
can we make the landing page full canvas without the header and footer like the rest of the website?
Yes, you can easily disable the header and footer with a toggle in the page settings at the bottom where I'm showing how to make the page full width.
This would be a great tutorial, but so much has changed in the Kadence Blocks UI with the v3 update that it's really hard to follow along with. Any chance of updating it for the current version of Kadence Blocks? Thanks
Hey Steve! I know that a lot has visually changed with the Kadence Blocks v3 update. About 95% of the stuff still holds true and is just separated into various tabs rather than being all listed in a single panel, but it does make it harder to follow along with. It's on my list to create a new version of this using the all new Kadence Blocks 3.0 UI!
Got it, many thanks@@StartBlogging101 I'm coming from Elementor and new to Gutenberg / native full site editing in WordPress - the one big thing I don't understand is why, Kadence Blocks recommends using their non-full-site-editing "classic" Kadence theme? In my initial speed tests, GTMetrix and Google Pagespeed both note issues coming from the underlying classic theme (even naming things like ".....classic.css" and so on). It seems strange that Kadence Blocks has been designed to be performant, yet sacrifices some of that by not having a Block / full site theme to go with it? I Appreciate that I could use a different Block theme, but presumably then I'd lose most of the customisation options available within the Kadence theme. Anyway, thanks again for the reply!
👍👍👍👍👍👍👍
🙌🙌🙌
Great video! Quick question about page speed. I know page builders live Elementor will slow the website down. How do Kadence theme and it's plugins compare with respect to speed? In my mind I'm seeing both at page builders and can't see why Elementor is slower. Thank you!
As all page builders Elementor add an extra load and slower any wordpress websites, Kadence theme with Kadence blocks or any others blocks plugins with a base theme dont have this issue. A Gutenberg base site will always faster than a full page buidler like Divi, Elementor, Oxygen or whatever. Theres no bloat codes adding
Great question! I cover Elementor vs Gutenberg (Kadence) specifically in part of this video: th-cam.com/video/_zQMlp8JPn4/w-d-xo.html - 25 minutes in I go over an Elementor vs Kadence speed test and you show you how much faster Kadence is and explain why that is. Hope that helps!
This is 2 years old. Do you have a update?
Is this created with the Free Version of Kadence?
This video shows how to build pages using the free Kadence Blocks plugin, yes
how to collect email? this button wont work
Hey Akshay! I'm assuming you're talking about the form button? In the Form block settings, you can hook it up to a number of email services. I personally use FluentCRM so that it adds contacts to my email list when they submit the form.
What a pity you used Kadence theme! I need to work with a website with existing theme.
I would really appreciate if you say WHY you do things. I doesn't help to just say 'I will disable this', or 'I will unbox' that. WHY are you doing that? This video would have been so much more valuable if you could just motivate WHY you do certain things.
I wish I could email you. Also I wish you'd demo a full website build from A to Z