Kadence Blocks Pro Tutorial: Next-Level Home Page with Modals

It's time to level up your home page with Kadence Blocks Pro. I gave a complete design overhaul to my Home Page, and here is how I did it. All I've used are:

🔨 My Recommended WordPress Tools:

Resources mentioned in video:

0:00 Intro
2:56 Prerequisites: What you need for this tutorial
3:24 Choose your colour palette
3:50 Setup & Installation
4:12 Install Kadence Theme (Free)
4:49 Install Kadence Pro Plugin
5:33 Create a WordPress Home Page
6:50 Customizing the Header Section
7:38 Adding Logo to Kadence Theme
8:40 Adding & Customizing Primary Navigation
11:04 Adding Social Media Icons
12:20 Creating Home Page with Info Boxes
12:42 Removing Page Title
13:02 Adding Clickable Info Boxes
13:07 Install Kadence Blocks (Free Version - Missed step - sorry!)
14:11 Explanation of Layers
14:50 Adjusting the padding and margin
16:50 Styling the info boxes
20:09 Adding the Modal Effect
26:57 Adding the "About Me" Section
31:07 Mobile Optimization
32:26 Adding Transparent & Sticky Header
34:10 Outro

📽 More Helpful Videos:

Mentions
This video is inspired by:
@Kanal Echowelle; (Topic suggestion - Kadence Blocks Tutorial)
@Aviel ziv; (Lighting suggestion)
@Michael Kokott (turning off background music)

__________________________________________________________________________

AFFILIATE DISCLOSURE: This video and description may contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. I won't put anything here that I haven't verified and/or personally used myself. And, you will never pay anything more than what it cost if you buy the product directly from the source. From time to time, I may even provide you with some discount codes to help you save money.
__________________________________________________________________________
​​#kadenceblocks #kadenceblockspro #kadenceblockstutorial​​ #wordpress​​ #jackcao​​ #wpblocks​​ #wordpressblocks​ #gutenberg #gutenbergblocks

[faithnomore]

Jack is the best.
Competent and friendly.
And funny without knowing "hwhite"

[briancoghlan]

Thanks so much for this video Jack. Yes, another video for the bottom section would be much appreciated, thanks.

[andreassprengart]

Thank you. I'm looking forward to further videos about Kadence.

[planetmarketing-franciscom]

I just bought Kadence using your link. THANKS for putting out Gutenberg videos. You solved my problem. I needed mobile phone controls.

[malcolmdsouza]

Part 2, part 3, part 4, etc... yes please!

[mountainman]

Fantastic video, thank you! Def keep the Kadence videos coming!

[asifsuhaib]

Extremely detailed kadence video... Keep it up cao...

[thomasconrad]

Good job Jack. Yes I would like another video.

[barsk]

Great design Jack. Definitely make this video vol: 2 👌👌

[NoMatterTheSource]

You're probably my favorite wordpress guy. And yes I'd love to see a video running through how you made the entire site.

[zoltankemenes]

To be continued... 😀Interested in sequels. Please do it!

[TiagoDezan]

Great video!!! Wainting for part 2!!! I have learned a lot from your videos. Thank you very much for the knowledge you have been passing on to all of us.

[chotikajnk]

Thank you so much it's very very helpful for me. 🙏 waiting for the second part.

[kabar-io]

Thank you. I love the results 👍waiting for the second part

[AV-jzwr]

Waiting for more parts as well, I want to switch from elementor. Would you also make a woocommerce version with kadence please. Amazing work - Subed!

[brucebaker]

Exactly the overview / organization / speed / microdetail that I needed. Subbed. And scanning channel for more kadence (and other theme / builder) info. But kadence focus atm. Thank you!!

[WhittleSticks]

Thanks for the video Jack. Can a modal be added to link in HTML in the Kadence Header?? In my header I want to a note to popup about the currency that the site uses

[shaolin]

I'm assuming to use Vertical content filling to disable and content style to unboxed in page settings instead of margin. Thanks for your videos!

[salvirji]

Another fantastic video mate. Nice to see use the Kadence here as it helps me to see the additional features available.

Quick question, can Kadence be used to make an optin form ?

Enjoy your weekend

[speedysite]

Nice job :) Layout Shift skyrocketing tho