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 slideshow gallery cover page in Squarespace 7.1
Cover pages were a part of Squarespace 7, and they were an easy way to create a “Standalone” 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
+ Create a second section with a gallery slideshow
+ Set both sections to large height
+ 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:
#page .page-section{height:100vh!important}
#page .page-section:nth-child(2) {margin-top:-100vh!important;}
#page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important}
header, #footer-sections {display:none!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?
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 at https://insidethesquare.co/css
▸▸▸ Ready to be an expert?
Copy & pasting CSS is a great way to get started, but if you really want to level up your skills and write your own code, then you’re ready for the Custom Code Academy. I created this course to teach you everything I know about CSS for Squarespace. Enrollment is open right now, and access lasts a lifetime. Join the academy today at https://CustomCodeAcademy.com
—
#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.
