How to Create a Split Screen Design with Kajabi
Episode 54 Summary
In this episode of Kajabi in 5 Minutes, we explore creative design tips to help you build visually striking Kajabi pages. Learn how to create a modern half-and-half screen layout with full-width sections, flush content blocks, and zero border radius for sharp edges. Discover how to add simple image overlays, frames, and spacing effects directly within Kajabi. For more complex layered image designs, we recommend using Canva to prepare your images before uploading. These practical tips will help you enhance your site’s look without needing custom code. Tune in for more Kajabi insights next week!
I’ve got some things that may help you with Kajabi:
Kajabi in 5 Minutes YouTube channel: https://www.youtube.com/@Kajabiin5Minutes
Kajabi 30 Day Free Trial: https://www.thecoachsupport.com/30days-kajabi
Kajabi Blog: https://www.thecoachsupport.com/blog
Kajabi Code course: https://www.thecoachsupport.com/code
Kajabi SEO course: https://www.thecoachsupport.com/seo
These next promotions are only active for a short time throughout the year
3 Months for $99: https://www.thecoachsupport.com/3months-for-99
60 Day Free Trial: https://www.thecoachsupport.com/60-day-trial
50% off for 12 Months: https://www.thecoachsupport.com/kajabi-half-price
Episode Overview
Introduction
Welcome to another episode of Kajabi in 5 Minutes! I’m JD, your host, excited to share more design ideas and ways to use Kajabi’s section organization settings. Last week, I only managed to cover one idea before time ran out, so today I’ll dive into a few more tips to help you create visually appealing web pages using Kajabi.
Creating a Half-and-Half Screen Layout
One cool design effect is a split screen where one half is a full framed color or image, and the other half contains text or an image opposite the colored background. Kajabi doesn’t have a built-in template for this, so you need to create it manually.
Here’s how to do it:
- Go to your section settings in desktop layout and set the section to full width. This removes default margins and stretches content to the edges.
- Use content blocks sized to 6 blue width boxes each, so they take up exactly half the page.
- For image blocks, adjust the border radius to zero to get sharp edges instead of rounded corners.
- Set the image or content block to flush in desktop layout settings to remove internal margins.
- Set your section background color for the colored side.
- Add a text box over the colored background side, and adjust padding (top and bottom) to zero for a crisp look.
This combination of full width, flush content, zero border radius, and equal width blocks creates a clean, modern half-and-half section without white space.
Adding Image Overlays and Frames
Another popular effect is adding overlays or frames around images, such as:
- A partial color overlay offset from the image.
- Circular images with a solid color “drop” effect (not a shadow).
- Images with white borders and outlines.
While Kajabi has some limitations, you can achieve simple framed looks by:
- Increasing inside spacing on image blocks to create space between the image and border.
- Setting the border color to white or another color to frame the image.
- Adjusting the background color of the image block to show behind the image when inside spacing is applied.
For more complex layered effects or offset overlays, it’s easiest to create your image in a tool like Canva. Design the layered look, export it as a PNG with transparency, and then upload it to Kajabi.
Conclusion
Kajabi offers flexible section and content block settings that allow you to create stylish layouts like half-and-half screens and framed images. By mastering full width sections, flush content, border radius, inside spacing, and background colors, you can elevate your site’s design. For advanced image effects, Canva remains a great tool to prepare images before uploading to Kajabi.
Thanks for tuning in! Join me next week for more Kajabi tips and tricks.
