Easily create a split layout in Squarespace (Brine 7.0)
Today’s tutorial is a little bit different because, believe it or not, there’s no code involved! *gasp*
As a designer, you’ve probably come across those Pinterest inspirational websites (some of them not built in Squarespace) that involve gorgeous split layouts – or half and half layouts – where you have half of your screen with an image that bleeds all the way to the edge of your website, and the other half with a colored background and content.
If that’s your case, you may want to know how to work with that sort of layout in your client sites.
And that’s exactly what we’ll be looking at today!
I want to share with you the quickest way to achieve a split layout in Squarespace.
To do this, you’ll need to be working with a template that allows for Index Galleries in packed or split mode (any template from the Brine family will work).
I already have an index page created with a couple of sections, so let’s jump right into our split area!
Creating a split layout in Squarespace
First, we’re going to be adding a Gallery Page inside our index as usual and uploading 2 images:
The image or picture we want to showcase to accompany our content.
A solid-colored image that may or may not match the color of the site’s background.
I’m working with an image from the new Unsplash image finder (I just searched for “sea”), and a completely white square image to match the site’s background.
As you can see, if I hover over the gallery you’ll notice both images are side by side by default on this template, and also have some spacing around it.
But before we move onto styling them, I want to add some text to the white image.
I’ll just include a title, a short description and a link:
Perfect, now let’s move onto our Style Editor or Site Styles and finish our design!
The first thing we can do here is arrange the image layout.
Currently it’s set to “packed” but I’ll be changing that to “split”. Also, I don’t want any spacing around my images so they expand to the edges of my site, so I’ll set the spacing to 0:
We can’t see the text right now because it seems the default color is white, let’s edit that so we can see what we’re doing:
Alright, now how about we set the font styles to match the rest of the site?
Awesome! Last but not least, I want to move the content to the dead center.
I’ll set the content position to Middle Center, and set the maximum width for the content to 80%:
We’re done!!
The beauty of using the native gallery page to create our split layout is that it’s fully responsive by default! So there’s no need to tweak the mobile design.
Here’s what it looks like in desktop, tablet and phone screens:
Additional tweaks
Once you have the layout in place, you can play around with the style of the content even more!
You could make the link differentiate more from the description by making it bolder and adding a unicode arrow:
And you could also switch up the colored side for something that stands out from your site’s background:
You can even stack more than one split row! Simply add more images to your gallery or create a separate gallery page. Whatever works best for you!
That’s it!
Until next time,
B.
