Here’s how to turn a default one column mobile layout into a two column mobile layout on WordPress. I will show you how to create everything from Scratch. What I shared in this video can work on any WordPress Theme. No coding skills required. No unnecessary plugin installation.
Tools Used in Video:
👉 WordPress Theme: https://jackcao.com/kadence
👉 WordPress Plugin: https://jackcao.com/kadence-blocks
👉 Web Hosting: https://jackcao.com/siteground
🔔 Subscribe to get notified when new videos are published: https://jackcao.com/subscribe
⌚ Chapters (Time Stamps)
0:00 Introduction
1:14 Email Request from my subscriber
2:29 Install Kadence Blocks
2:58 Two Column Mobile Layout Tutorial
3:11 Background Layer (Settings)
3:48 Adding four column layout for Desktop View
3:56 Adding info box to each column
4:06 Info Box Settings
4:19 Container Settings
4:32 Media Settings
5:04 Title Settings
5:24 Text Settings
5:30 Container Shadow
6:07 Adding the second Info Box
6:25 Kadence Blocks Trick: Copy and Paste Block Styles
6:59 Adding the remaining Info Box
7:14 Gutenberg Trick: Duplicate Blocks
7:57 Four Column Desktop View Completion
8:05 Optimizing Mobile View to Two Columns
9:23 Special Effects for Info Box
10:03 Padding and Margin Adjustments (Most Important)
12:29 Outro
12:33 Woocommerce Shop: 2 column layout
✅ About the video: The objective of this video is to show you how to create a mobile responsive two column layout on WordPress. The default mobile view of WordPress is one column, so I will show you how to keep two, three, or every four columns on mobile for any page, posts, or shop. This video will give you the foundation to build awesome looking grids using the free Kadence Blocks plugin.
🎓 More Resources:
👉 Case Study: Improve Site Speed (28 to 92): https://youtu.be/INvxYNH9gKk
👉 Build a Beautiful Landing Page from Scratch: https://youtu.be/HZkpG-tfHPA
__________________________________________________________________________
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.
__________________________________________________________________________
#twocolumnmobile #twocolumnmobilelayout #kadenceblocks #kadenceblockstutorial
