![[FREE] Kadence Blocks Tutorial - How to Build a Beautiful Pricing Table That Converts](/img/logo.svg){kind=logo}
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
30 июл 2024
