How to Build Content Boxes the RIGHT Way in WordPress Using Kadence Blocks
Vložit
- čas přidán 30. 07. 2024
- In this video, I'll show you how to build content boxes the RIGHT way in WordPress using Kadence Blocks. The content boxes will have even-height containers and bottom-aligned buttons so your website looks professional.
You will also get access to 36+ WordPress content box templates built with Kadence Blocks and 100% free to use on your site.
IMPORTANT LINKS:
- Kadence Blocks Content Boxes Blog Post Tutorial: startblogging101.com/kadence-...
- Custom CSS For Bottom-Aligned Buttons:
startblogging101.com/kadence-...
- Start Blogging Blocks: startbloggingblocks.com/
- Start Blogging Blocks Free License: startbloggingblocks.com/free/
- Content Box Templates: startbloggingblocks.com/conte...
- Start Blogging Themes: startbloggingthemes.com/
- Discover SB Theme: startbloggingthemes.com/disco...
- Discover Theme Live Demo: discover.startbloggingthemes....
If you search "same height" in any WordPress group, you'll see pages of results of people wondering how to build content boxes on their website with same-height containers.
😩 The Problem: The Info Box block in Kadence Blocks doesn't use same-height containers when you set your Row Layout to have Inner Column Height 100%. So, you have to use min-height or other hacky workarounds.
😐 Partial Solution: Create a Row Layout with the appropriate amount of columns and put an icon, headline, text, and a button in there. Setting the Inner Column Height 100% will make your containers the same height - yay! But... if your text is different lengths, your buttons won't be even. Ideally, the button would be bottom-aligned to each of your containers so they look uniform. Also, this takes more time to do.
😁 The Solution: I wanted everyone using Kadence Blocks to not have to worry about this problem anymore. So, I created this content box tutorial and released 36+ free Content Box designs in Start Blogging Blocks that are all built the right way.
Benefits:
- All your containers will be even height with buttons bottom-aligned to the containers
- Since you're using Sections, you aren't limited to the Info Box options. You can add any block you want to your container
- You can super easily swap the button with any of our 24+ button designs
- There are Content Box designs that are 2-column, 3-column, or 4-column that are all perfectly tweaked to be mobile-friendly
Hope you enjoy! 🙂
Table of Contents
0:00 Intro
0:39 Free Content Box Templates
2:13 Install Kadence Blocks
2:52 Full-Width Page Settings
3:39 Add Hero Section
4:59 Add Row Layout
7:53 Style Sections
12:23 Content Box Icon
13:51 Content Box Headline
15:27 Line Height Comparison
16:40 Headline HTML Tag
17:51 Content Box Paragraph
18:39 Content Box CTA Button
21:23 Copy Content to Other Sections
24:09 Set Columns to Equal Height
25:22 Bottom-Align Buttons to Container
28:03 SB Blocks Content Boxes Demo
28:54 Outro
**************************
OTHER LINKS:
🖥 Recommended Hosting: startblogging101.com/hosting/
☁️ Rocket.net - Fastest hosting and easiest to pass Core Web Vitals - Get first month for ONLY $1: startblogging101.com/rocketne...
📈 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 + Pro 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, a group of rockstar individuals 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
**************************
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!
#kadence #gutenberg #webdesign
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.
Glad you enjoyed the video! Thanks for watching!
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!
Really awesome to hear it helped! Thanks for watching!
Really learnt so much from you. To the point .exactly what i was looking for. Different length boxes. Amazing
Awesome to hear it was what you were looking for! Appreciate you taking the time to watch :)
Very nice trick! Did not think to style the Section rather than the Icon/Info Box itself. Thank you!
Hey, thanks for the comment and for watching! Glad you liked the video :)
@@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!!!
@@levelwu Really appreciate it! I try to pack as many nuggets as I can in these videos :)
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.
😂 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!
@@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 😂
Very helpful tutorial and thank you for the free blocks!
Really happy to hear you enjoyed the tutorial! And you're welcome - enjoy the blocks :)
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
Excellent tutorial. Thanks.
Appreciate it, Kevin! Thanks for watching :)
Thank you for detailing this! What’s the use case for content boxes like these vs the info box blocks?
Thanks!
Terrific video thanks for taking the time to share
You bet, Tom :) Thanks for watching!
Great video and blog post.
Thanks so much! Glad you enjoyed them!
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?
Thank you
Thanks for watching!
Thank you so much. I just did this on a website and was wondering how to make it all even
Glad I could help! Thanks for taking the time to watch!
best how to video on topic your a genius
Thanks much, Josh! Glad you enjoyed it :)
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?
How did you do the gradient text in the headline?
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 🤓
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!
Can I like have a photo then a link that leads to other photos of the pricy when they click it ?
Respect Sir
Appreciate you watching!
Can you make tutorial on dynamic content with Kadence blocks?
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?
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.
thanks 👍🏻
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.
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
@@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.
@@anyab.9533 Woohoo! Glad you got it figured out :) That's always a good feeling. Best of luck with everything!
how to access the free blocks, i have tried your key it did not work.
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?
Hey Matt! What isn't working for you, exactly? Do you have a URL or something I could look at?
Info Boxes. These are part of Kadence blocks and I have the same issue@@StartBlogging101
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??
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!
@@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.
@@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?
@@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
@@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.
Unfortunately, this does not work for Kadence Info Boxes
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).