[FREE] Kadence Blocks Tutorial - How to Build a Beautiful Pricing Table That Converts
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- In this tutorial, I'll teach you how to build a beautiful pricing table in Gutenberg using all free tools including the free Kadence Blocks plugin and the free Kadence Theme.
Table of Contents
0:00 Intro
0:20 Free Tools Used
0:39 Using System Fonts
2:05 Conversion.ai Pricing Table
2:55 Getting Started
3:50 Build Row Layout
4:50 Configure Left Section
6:41 Title
9:07 Price
12:25 Description
16:13 Sign Up CTA Button
20:59 Features Icon List
25:21 Duplicating the Section
26:35 Additional Features
27:48 Tweaking Descriptions
28:42 Change Section Background & Text Color
30:18 Make Left Section Lower Than Right
31:22 Mobile Responsiveness
33:16 Comparing Final Pricing Tables
34:03 Outro
Recommended Tools:
🤖 Jasper.ai - Use the Power of AI to write content automatically for you including blog posts: startblogging101.com/jasper-f...
✅ Kadence Membership (Includes Kadence Theme Pro + Kadence Blocks Pro + ALL Kadence Plugins = BEST VALUE): 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
✅ Free Kadence Blocks plugin: wordpress.org/plugins/kadence...
🖥 Cloudways Hosting (Best Cloud WordPress Hosting): startblogging101.com/cloudways
---
🎨 Kadence Global Color Palette blog post: startblogging101.com/how-to-u...
I'll walk you through step-by-step how to build an attractive pricing table directly in Gutenberg which is the built-in WordPress editor using the free Kadence Blocks plugin.
I should also note that I'm using the "System Default" font stack in the free Kadence Theme which is the fastest way to include fonts on your website.
First, we'll build out the title, price, and description sections.
Next, I'll show you how to make an eye-catching "Sign Up" CTA button on your pricing table.
Then, I'll walk you through how to create a clean features list with icons very easily using the Icon List block in Kadence Blocks.
After that, we can use the tools provided to easily duplicate our Kadence Blocks section to create another column and change all the info for the right side of the pricing table.
As the finishing touches, we'll change the background and font color of the appropriate section to give your pricing table a nice contrast that will draw the eyes of your viewers.
Lastly, we'll bump down the left section so that the left column is lower than the right column for your pricing table which adds a nice touch.
---
I’d love it if you joined my completely free Start Blogging 101 Community Facebook Group where we discuss how to build FAST, profitable WordPress sites without the use of third-party page builders. Come join and say hi!
👋 Start Blogging 101 Facebook Community: / startblogging101
👉 Start Blogging 101 Facebook Page: / startblogging101
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 #kadencetheme #gutenberg
Superb tutorial Jake!🌟 Loving your videos ❤️ Thanks a lot for sharing!!!
Thanks much, Carmelo! Appreciate you stopping by!
Thanks for the great video! Would love to see more about Kadence Pro version as well! thanks
Thank you for creating this pricing table video.
Happy to help, Jim! Thanks for always supporting my content :)
@@StartBlogging101 You are welcome.
Thanks a lot for sharing. The lesson was very nice. Greetings from Istanbul.
Thanks so much for watching - I appreciate it! Glad you enjoyed it :)
Great tutorial...I like your straight-ahead style.
Glad you liked it! And I appreciate the compliment about my teaching style!
Terrific video thanks
Glad you liked it. Thanks for watching!
Excellent tutorial!
Thank you! Cheers!
Thanks for this video it's really helping
Glad to hear that!
Great tutorial ❤️
Glad you liked it!!
i'm not seeing the option for 'border radius' but i am on the section tab. any idea why?
How to do the SuperScript $ sign that's floating above the price?
Nice. I’d like to see a landing page sales letter created with the free template and blocks.
Do you have an example of one you could send? :)
Great video, do you have any tutorials on how to use most tools with Gutenberg? I guess it will take some time to adjust to using Gutenberg coming from using Elementor
Hey there! I do have a number of other videos along with blog posts at startblogging101.com/category/tutorials that teach others how to do more in Kadence Blocks. When you say "how to use most tools with Gutenberg," do you mean other block plugins or what exactly?
@@StartBlogging101 Hi, yes I mean other block plugins that's advisable with more common functions like 'Google Maps, enquiry forms etc'. Also adjustments for mobile view, I have tried importing a complete website with Astra and then using Gutenberg to make changes however the edges on the left and right side of the specific page is cutting off. Also how do you setup and link an enquiry form with Gutenberg to make sure it's working?
Nice - I use the Kadence Plug into my pricing table but for the free version this is very nice and some good tips. Why do you use em's
Hey, thanks! I use 'em' for sizing because they're a relative sizing whereas 'px' are fixed. So, say I use a base font size of 16px. If I make something 1.2em, then it will be 1.2 times bigger than the 18px font. Then, if I ever decide to change my base font size on my site - say I change it to 20px - then the element that I set to 1.2em will automatically update and be 1.2 times bigger than the base font and everything will still look good. There's no 'best way' to go about it, it's just personal preference.
I am using a Kadence starter template and Kadence blocks (both free) and as I am getting near to the end of developing my site, I notice some issues with how things appear on mobile. I selected mobile view to make changes, assuming this would only apply to mobile view, but it affects desktop and tablet view as well. Do you have a resource for dealing with this please?
Hey there! So, it can be a bit confusing if you're not used to the WordPress block editor. If you are simply "previewing" your page in mobile, the changes you make don't apply only to the mobile view. Many of the Kadence Blocks have settings where you can choose little icons above the setting (desktop, tablet, or mobile). You would choose mobile on those settings and then you will only be affecting those settings for the mobile view. It's a bit hard to explain in text. I also have a video on "How to Build Really Fast Landing Pages with Gutenberg and Kadence Blocks" which goes over that a little bit :)
Can we make fully customized sales landing page with this Kadence theme?
Yes, of course :) My whole site is built with Kadence Blocks at startblogging101.com along with Kadence Theme's main site that you can check out. startblogging101.com/kadence
2nd viewing....learned a few more things. One observation...what about the Dollar Sign ?
Hi Tom! Do you want to raise the dollar sign? You can highlight and the '$' symbol and choose "Superscript" from the arrow dropdown in the toolbar. This will raise the dollar sign to be higher than the rest of the text.