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
—
In the first part of this Squarespace CSS tutorial, I show you how to use a specific chrome extension to identify the element ID so you can isolate one part of your site.
Here is a link to the chrome extension I use in the video: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde
Again – not affiliated with them, it’s just a tool I use and personally recommend! ♥
So to recap what is in the video, you can use the margin code in four different directions (margin-top, margin-bottom, margin-left, margin-right) adjusting the pixels or “px” to the right size.
To scoot the image down, add this code:
margin-top:50px;
To scoot the image to the left, use this code:
margin-left: 50px;
To scoot the image to the right, use this code:
margin-right: 50px;
Next, you can use z-index to layer one image over another, creating that layered effect. Remember, the bigger the number, the higher the layer! You can use this on both elements you are working with, labeling the lowest one z-index:1 and the highest one z-index:9
Here is a sample code breakdown to make this work with Squarespace css
#block-id-goes-here {margin-top:50px; margin-left: 50px; z-index:99;}
#second-block-id-goes-here {margin-right: 50px;}
Anywho, that about covers it! Definitely, a cool technique to try on your site. If you give it a go, feel free to link to it in the comments below! I would love to see what kind of designs you make with this code 🙂
▸▸▸ 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 at https://InsideTheSquare.co/css
—
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 #anchorlinks #squarespacetips
