The magic tool that immediately leveled up my website designs (plus four ways to use it)
When I first started designing Squarespace websites, I would look at other designers and think HOW THE HECK DID THEY DO THAT. Most of the time I would Google until I couldn’t see straight and then end up giving up. My first big discovery was how to make one word in a text block a custom font or color (THIS WAS A BIG DAY). When I made that discovery that made me think “oh, maybe I actually can learn some code”.
Then I picked up learning to use the right click “inspect” tool to try and decipher the code and see what I could change about certain elements. I loved learning that and that was another big breakthrough. But then I was on a mission to figure out something I had ALWAYS wanted to conquer: How do I make a logo in the footer overlap an instagram feed? I loved this look and NEEDED to figure it out. I had no idea that figuring out how to do this would lead me to a tool that would open up a whole new world for my website designs.
ENTER: THE SQUARESPACE ID FINDER
click that! install it! you need it!
PS: I am in no way an affiliate for this - it is just a life changing tool that you need right now!
Now that you have the most magical of all magical Squarespace tools… let me explain why I am so in love.
Let’s use my original conundrum of layering the logo on top of my instagram feed as an example. I knew I needed to be able to identify JUST the “block” that the logo was in and move it up. I couldn’t select all “img” blocks, just THAT ONE. What this tool allows you to do is simply see and copy the exact name of each and every block, page or section so that you can target your code to it and move it by changing the margins.
PS you can scroll down for the video tutorial if you’d rather watch than read - I know I always do!
Really quick lesson in code:
The basic set up of any CSS code is to put the name of the thing you want to change and then inside a set of curly brackets { } put all the things you want to do to it. For instance if we have a block and we want to change the color - you would put:
#BLOCK-NAME {color: #0000}And then of course you can change that color to any color code you want.
If you have more than one attribute you want to change you always put a semicolon in between - like this:
#BLOCK-NAME {
color: #0000;
padding: 24px;
}You’ll catch on!
How the Squarespace ID Finder Works:
After you toggle on the extension it will show every block’s name (HOW COOL!!).
To start, I am going to click to copy the block name of my logo in the footer to my CUSTOM CSS (you can find this under the DESIGN menu).
Then, I know I want to move the block UP so I am going to set the TOP MARGIN to be negative. I also want to make sure that the logo is on TOP of the feed and not below - so I’m going to change the Z-INDEX (this is the “code” for the order of blocks) to be 1 (also if 1 doesn’t work you can try 1000 and vise versa if you want things to go below you can set them to -1).
#block-yui_3_17_2_1_1596660318369_27814 {
margin-top: -20px !important;
z-index:1 !important;}And BOOM. Done. It’s overlapped!
You might be able to start to think about how this is… life changing. You can select ANY block or page section and move things around. Want to overlap two photos over each other? This is how! What about adding a design element on top of a photo (like a swoosh or watercolor mark)? YOU CAN DO IT!
Three of my favorite ways to use this extension (all of these codes work for Squarespace 7.0 or 7.1):
add a color to the back of a text box in squarespace
1. Copy and paste your block name into your CUSTOM CSS
#block-yui_3_17_2_1_1621474274463_184532. Add the color you want to put behind the box (bonus - I also usually put a little padding so that it’s not so tight to the edges of the box)
#block-yui_3_17_2_1_1621474274463_18453 {
background-color: #EE3F7B;
padding: 20px;
}3. If you choose a dark color (like the one above) and need to also change the color of your text - you can add that in too! We just need to target the text style you are using in the block - h1, h2, h3, h4 or p
#block-yui_3_17_2_1_1621474274463_18453 {
p {
color: white;
}}layer elements on top of each other in squarespace
1. Copy and paste your block name into your CUSTOM CSS
#block-yui_3_17_2_1_1621474274463_184532. Decide which way you want to move it and use the correct margin identifier - you can use…
margin-top:
margin-bottom:
margin-right:
margin-left:
#block-yui_3_17_2_1_1621474274463_18453 {
margin-right: -100px;
}3. Most of the time you will probably want to change this for mobile - so let’s add a mobile query to tell the code to ONLY work when the screen is bigger than a phone size (640px) PS you can add this mobile query into ANY of these codes! Just make sure you add an extra set of the curlys! { }
@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1621474274463_18453 {
margin-right: -100px;
}}Change the attributes of an element only in a certain block in squarespace
This can be applied to basically anything… I’ll show two different ideas!
Change the H1 color and size in just ONE block:
#block-yui_3_17_2_1_1621474274463_18453 {
h1 {
color: red !important;
size: 45px !important;
}}Change the shape of ONE particular image:
#block-yui_3_17_2_1_1621474274463_18453 {
img {
border-top-left-radius: 50% 30% !important;
border-top-right-radius: 50% 30% !important;}}Hide the header and footer on a single page in squarespace
This is a super easy way to create a sales page or cover page!
1. Copy and paste the COLLECTION ID of the page you want to target - this will be at the top left corner of the page when you toggle the ID Finder on.
2. Put in your collection id to this code and ta da!
#your-collection-id-here{ header, footer {display:none;}}I do want to note I am NOT an expert coder, but I have taught myself a few tricks that are so helpful - I hope they can help you too! If you want to learn more about code there are a few INCREDIBLE boss ladies who I love to follow:
Beatriz Caraballo, Inside The Square as well as Square Stylist if you really want to learn some fancy tricks!
