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
—
This tutorial is an overview of how to target specific things in Squarespace so you can edit them with custom code.
We’ll take a look at the three main types of unique ID’s – collection, section, and block – and how to combine them with selectors (aka code names) so you can customize just about anything and everything in your Squarespace site!
I am using my Squarespace version 7.1 demo site; block ID’s exist in version 7 but things like page sections and collections are a little different depending on what theme you are using.
This is a link to the free chrome extension I use in the video. I am not affiliated with them in any way, just a fan! https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en
Here is a quick recap of order of ops discussed in the video:
#collection-id [data-section-id] #block-id .selector
Here is a quick rundown of the typical symbols used:
Using a data section? Add [square brackets]
Using a block ID? Start with a #
Making one code change to multiple targets? Separate them with a comma.
Here is an example of changing H2 text color in a block id:
#block-123456 h2{color: orange}
And here is an example of changing all the buttons in a data section to blue:
[data-section-id=”123456”] .sqs-block-button-element {background-color: blue!important}
—
🤩 Want over 60+ pages of custom codes & pro tips specifically for customizing Squarespace? Download my CSS Cheat Sheet, available now at 👉 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 video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace
Edited
Just Starting with Squarespace CSS?
Awesome! 😍
I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
This tutorial is an overview of how to target specific things in Squarespace so you can edit them with custom code.
We’ll take a look at the three main types of unique ID’s – collection, section, and block – and how to combine them with selectors (aka code names) so you can customize just about anything and everything in your Squarespace site!
I am using my Squarespace version 7.1 demo site; block IDs exist in version 7, but elements like page sections and collections are a little different depending on what theme you are using.
This is a link to the free Chrome extension I use in the video. I am not affiliated with them in any way, just a fan! https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
Here is a quick recap of order of ops discussed in the video:
#collection-id [data-section-id] #block-id .selector
Here is a quick rundown of the typical symbols used:
Using a data section?
Add [square brackets]
Using a block ID?
Start with a #
Making one code change to multiple targets?
Separate them with a comma
Here is an example of changing the H2 text color in a block id:
#block-123456 h2{color: orange}
And here is an example of changing all the buttons in a data section to blue:
[data-section-id=”123456”] .sqs-block-button-element {background-color: blue!important}
—
🤩 Want over 60+ pages of custom codes and pro tips for customizing Squarespace? Download my CSS Cheat Sheet, available now at 👉 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 video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace
