How to create a Split Layout Lightbox // Squarespace CSS Tutorial

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉

If you use a program for lead capture (sometimes called opt-ins) you are probably familiar with a split box layout. Image on the left, form on the right; it’s pretty fancy-schmancy stuff. But did you know you can build the same thing, right in Squarespace, with a little clever CSS? No need to spend some serious cash on another platform to do it for you – just a quick tutorial to cover your basis! This week I broke down exactly how to build it. There are a few steps involved, and of course another free cheat sheet so you can have all the codes you need in one place.

The main code from the video is below, but I went ahead and typed out the steps and a few more free codes you can use to update the rest of your lightbox style and put it all into one PDF. TO download that for free , visit:

Anywho – here is the main code:
@media only screen and (min-width: 640px) {.sqs-modal-lightbox-content .lightbox-inner .lightbox-content{ background-color:#ffffff!important;
background-image: url(‘url’);
background-repeat: no-repeat;
background-size: 50% 100%;
} .sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper {margin-left: 60%}}

If you give it a shot, let me know how it goes! I would love to see your work – feel free to comment with a link below.

#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks

The term “Squarespace” is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.

Post Author: hatefull