How to Build Content Boxes the RIGHT Way in WordPress Using Kadence Blocks

[@MuhammadFalak001]

I found this video incredibly informative and helpful. Prior to watching, I was struggling with formatting the top space of headings, which left me feeling quite discouraged. However, this tutorial provided far more insight than I initially anticipated. As a first-time user of the Kadence block, I lacked clarity on which elements to utilize and where. Thanks to this video, I gained a better understanding of its functionalities. I extend my gratitude to the creator for crafting such an insightful and instructive resource.

[@StartBlogging101]

Glad you enjoyed the video! Thanks for watching!

[@SimplyAmazingQuotes]

This video was fantastic. Different length content boxes has been bugging me for ages and your simple and easy steps were great to follow. Thank you!

[@StartBlogging101]

Really awesome to hear it helped! Thanks for watching!

[@munnakidukan9871]

Really learnt so much from you. To the point .exactly what i was looking for. Different length boxes. Amazing

[@StartBlogging101]

Awesome to hear it was what you were looking for! Appreciate you taking the time to watch :)

[@levelwu]

Very nice trick! Did not think to style the Section rather than the Icon/Info Box itself. Thank you!

[@StartBlogging101]

Hey, thanks for the comment and for watching! Glad you liked the video :)

[@levelwu]

​@@StartBlogging101 Thanks for making it :). There are lots of good nuggets about copy/paste of section content, line-heigh, shadows, margins...all good stuff under 30min!!!

[@StartBlogging101]

@@levelwu Really appreciate it! I try to pack as many nuggets as I can in these videos :)

[@derekantosiek5116]

Awesome, that CSS snippet has made my boxes look way better lol this was the one thing that always caused me anxiety about my website 😂 Thanks brother.

[@StartBlogging101]

😂 I hear you! I was always using the even-height columns but still didn't like how the buttons looked uneven with different lengths of text inside. Glad to hear the CSS snippet helped!

[@derekantosiek5116]

@@StartBlogging101 It’s great, really improves the look. I wonder if there’s a way to space everything out evenly within the box in addition to what you’ve done here? That’s what I’m waiting for next 😂

[@satintan7581]

Very helpful tutorial and thank you for the free blocks!

[@StartBlogging101]

Really happy to hear you enjoyed the tutorial! And you're welcome - enjoy the blocks :)

[@محمدحمدي-و7ح7ح]

Thank you 🎉

[@afrorumsamplepacks]

I really appreciate, I have been finding a way to add content blocks for a week and you saved my day. Just subscribed and liked your video hopefully when I've made enough sales I'll buy your SB pro version

[@unpluggedfreedom1]

Thank you so much. I just did this on a website and was wondering how to make it all even

[@StartBlogging101]

Glad I could help! Thanks for taking the time to watch!

[@DreamsBuiltIn]

Thank you for detailing this! What’s the use case for content boxes like these vs the info box blocks?

[@kevinroberts3789]

Excellent tutorial. Thanks.

[@StartBlogging101]

Appreciate it, Kevin! Thanks for watching :)

[@carlosmgarcia6618]

Thank you. I will remember this solution in case I need it. You are a great teacher. You forgot another alternative to copying the sections (21:40): Remove the last 2 section and duplicate the first one twice 🤓

[@StartBlogging101]

Thanks so much, Carlos! And LOL yeah that is another easy way to do it is to build the whole first section with styling and content and then duplicate the section. Good call! The way I showed does go over the copy/paste styles feature and learning how to copy and paste content across sections which I also think are important concepts to learn when building pages with Kadence Blocks! But I completely agree, that's another really quick way to do it!

[@JoshJecklin]

best how to video on topic your a genius

[@StartBlogging101]

Thanks much, Josh! Glad you enjoyed it :)

[@musictheory4u153]

Great video and blog post.

[@StartBlogging101]

Thanks so much! Glad you enjoyed them!

[@tomfraser3086]

Terrific video thanks for taking the time to share

[@StartBlogging101]

You bet, Tom :) Thanks for watching!

[@anthonyrude]

Thanks for this tut. Is there a way to see what size I should make my images to fit nicely into a 3 column layout? I've added images with the same height but the width was different. Can we see how many pixels the image should be to be equally centered top bottom and sides when we use padding like in the video?

[@WestbrookAds]

Thanks!

[@mohdadnan1892]

Respect Sir

[@StartBlogging101]

Appreciate you watching!

[@abdullahisuleiman2795]

Thank you

[@StartBlogging101]

Thanks for watching!

[@HaifengZhu-pn3uq]

Can you make tutorial on dynamic content with Kadence blocks?

[@ashleyedwards1736]

Can I like have a photo then a link that leads to other photos of the pricy when they click it ?

[@anthonyrude]

How did you do the gradient text in the headline?

[@cgc2300]

hello I am in the process of creating a store with this theme, on the product pages there are 3 lines below the Add to cart button, my problem is that I cannot change the writing of these 3 lines, do you know how to access it?

[@anyab.9533]

Hi there, this is such a lifesaver! THANK YOU! However, I'm having issues, and I'm not sure how to fix this. When I created the blocks and added text, not only the bottom of the columns were longer like in your video, but also somehow the tops were at different heights. When I used the inner column height, all the columns were even, but the headers were at different levels, which looked awful. Any idea why this happened? I used a prebuilt template for my home page for this. When I created random blocks as a separate section, all worked exactly as in your video. I have screenshots. My page is not published yet.

[@StartBlogging101]

Hi Anya, you're very welcome! Glad the video helped :) Hmm... if I understand your issue correctly, I'm guessing the prebuilt template you brought in is built differently since you said when you created random blocks, as shown in the video, all worked as expected. I'm not exactly sure what the issue would be without seeing a URL

[@anyab.9533]

@@StartBlogging101 Hi there, thank you for your reply. I found a workaround last night. I added extra rows of text and made the text the same color as the background :) it fixed the issue.

[@StartBlogging101]

@@anyab.9533 Woohoo! Glad you got it figured out :) That's always a good feeling. Best of luck with everything!

[@MuhammadFaheem-q7r]

how to access the free blocks, i have tried your key it did not work.

[@MohitKumar-sr2zq]

Is it possible to display two info boxes side by side in a smartphone view? For instance, if on a PC screen there is a single row with four info boxes in a line, can we arrange them in a 2x2 pair on a smartphone window?

[@StartBlogging101]

Yep, sure can! On the desktop view, you would build the four info boxes side-by-side like normal. Then, you'd go to the top-level Row Layout (containing all four of your content boxes), switch to mobile mode, and then choose the 2-column option for the layout on mobile, which would turn the content boxes into a 2x2 grid on mobile.

[@MohitKumar-sr2zq]

thanks 👍🏻

[@Matt-gq2wp]

I'm having trouble aligning three info boxes in a row layout. I tried this method but it doesn't seem to work. I've been trying to figure this out for hours but to no avail. Is there a simple solution that I am missing?

[@StartBlogging101]

Hey Matt! What isn't working for you, exactly? Do you have a URL or something I could look at?

[@SmallBizGeekUK]

Info Boxes. These are part of Kadence blocks and I have the same issue@@StartBlogging101

[@csb3458]

I want the layout of each box to be: Image Heading Description There is a gap between the image and heading and it’s driving me nuts. How do I get rid of the gap??

[@StartBlogging101]

Hey there! It's hard to tell without seeing it, but click on the image and then on the "Advanced" tab and try setting the bottom margin to "None." Likewise, try clicking on the Heading block, go to the "Advanced" tab, and try setting the top margin to "None." Let me know if that works!

[@csb3458]

@@StartBlogging101 thanks for the reply! No padding top or bottom on any element. Still gaps between each. I am using the 3 column “Content Boxes 2C (Light)” preset from the library.

[@StartBlogging101]

@@csb3458 Hmm, that's odd. Another thing I can think of is to click on one of the blocks inside the 3 columns and then go to the "Row Layout" level (the container containing all 3 of those sections). Open up the "Advanced" tab, then click on the "Custom CSS" dropdown. There you should see some custom CSS we added. I would copy it first so that you don't lose it. But then try deleting that and preview your page and see if that changes anything?

[@csb3458]

@@StartBlogging101 didn’t solve it. Even when I create one from scratch by creating a new block -> new row layout -> three:equal -> add image at the top -> add the next block underneath -> add Text (Adv) There is a gap between the image and the Text (Adv) block

[@StartBlogging101]

@@csb3458 Hey, email me and I'll try to get this figured out for you. I am not seeing that issue when I try the same thing, so I wonder if there's something else going.

[@SmallBizGeekUK]

Unfortunately, this does not work for Kadence Info Boxes

[@StartBlogging101]

That's correct. That's actually one of the main reasons I made this video :) You're essentially building an info box from scratch. You have way more customization options available because you are building each element upon itself and can also add any blocks inside that you'd like (whereas the Kadence Info Box allows for a media item, title, content, and button, but you aren't able to add other elements).