Easily create a split layout in Squarespace

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.

3. Preview images.png

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:

4. Add text to the colored background.png

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:

5. Change layout and spacing if you want.png

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:

6. Change font color.png

Alright, now how about we set the font styles to match the rest of the site?

7. Tweak fonts to match your site.png

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%:

8. Choose content position.png

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:

9. Full screen result.png
10. Tablet result.png
11. Phone result.png

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:

12. Add unicode symbols to the link and make it bold.png

And you could also switch up the colored side for something that stands out from your site’s background:

13. Result with color background.png

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!

Split layout Squarespace.gif

That’s it!

Limitations of this approach

While it’s super easy to work with the native options Squarespace offers, this may not be flexible enough if:

  • You’re trying to add blocks instead of pure text to the content area of your split layout.

  • If you want to maintain the parallax effect you have on the rest of the site in these images.

  • If you are using or want to use an index gallery elsewhere on your site with a different layout.

In these cases, custom code can help you achieve your vision.

The good news is that, depending on the ambitiousness of your design, you may only need a few lines of code to make it happen!

And the even better news is that there’s a training that guides you through the step-by-step to get there!

If you have a basic understanding of code and are interested in learning how to create more flexible split layouts on your client sites, make sure to check out the Sticky Images Training! ☟

 

Until next time,

B.