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
30 июл 2024