How To Create A Split Layout Cover Page In Squarespace 7.1 // Squarespace 7.1 Tutorial

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn

🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10

💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel https://www.paypal.com/paypalme/insidethesquare

This tutorial is for Squarespace 7.1 sites, not 7.0 sites like Brine or Bedford.

If you have no idea what that means, read up on what version you are using in this article, because it makes a big difference in which codes will work for you! https://insidethesquare.co/theme-families

In this tutorial I am going to walk you through the step by step process I take to create a split layout cover page in Squarespace 7.1

Cover pages were a part of Squarespace 7, and they were an easy way to create a “Stand alone” page that didn’t have the main header, footer, or navigation found on the rest of your site.

In the latest version of Squarespace known as 7.1, cover pages aren’t available in the main menu, but with a little fancy code we easily create our own!

Here is the step by step process we are going to go over in this tutorial:

Create a blank page in the not linked section of your site
Create a section on that page with your text content
Add the custom CSS to your page header code injection for that page
Pat yourself on the back because your new page looks AWESOME.

▸▸▸Here is the code from the tutorial, don’t forget your style brackets!!
.header, #footer-sections {display:none!important}
@media only screen and (min-width:450px){
.page-section .section-background {width:50%}
.page-section .content-wrapper {width:50%; margin-left: 50%important}}

▸▸▸Using a personal subscription?
You need to install the code with an on page code block instead. It’s not perfect, and will take a second to load, but it will work! Check out this tutorial for info on how to make that happen:


🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css

🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10

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

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

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

You May Also Like