How To Create A Split List Section in Squarespace / Split Screen List Section in Squarespace

The banner list sections in Squarespace are a great way to feature dynamic content that changes, both images and text, when a user clicks through all the options.

This tutorial will teach you how to turn that into a split page layout, featuring the image on half of the screen, with the content on the other half.


This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn

This tutorial is an updated version of an older one, but is specific for Squarespace 7.1 and won’t work for older versions.

This code is specific for the banner list section type so make sure you assign that design style before you give it a try! I also want to mention tjat I wrote this code to reset on mobile, putting the content back over the image, to help you keep your site easy to use on small devices.

Be sure to check out the video to see how this code works and what parts you will want to change!

– – –
Here is the code from this tutorial; be sure to add your own data section ID – here is the chrome extension I use (not affiliated with this extension or its creator!) https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Here is the main code from this tutorial:
@media only screen and (min-width: 640px){
[data section id goes here] .user-items-list-banner-slideshow .list-slideshow-image{
width:45%!important;
left:0!important
}
[data section id goes here] .user-items-list-banner-slideshow .slide-content {
margin-left: 40%!important;
width:35%!important
}
[data section id goes here] .slides{
padding-right:0!important
}
}

– – –
🔗 RELATED VIDEOS 🔗
How To Create A Split Page Layout in Squarespace:
– – –
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
– – –
🤩 Download over 60+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css

🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.

🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare

The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

You May Also Like