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 was recorded in my 7.1 demo site but also works for older versions of Squarespace.
—
This tutorial will show you how to replace your horizontal line with an image in your Squarespace website. A few important things to note before you copy and paste this into your own site:
+ There is more than one way to do this! This is just one approach of many because code is super customizable.
+ I recommend using an image you upload into your site files so you can make sure you have access to it; using an image hosted by someone else means that the owner could take it down or change it without you knowing, messing up all your hard work!
Here are the steps from the tutorial:
1 – Upload the image to your Squarespace website (Design → Custom CSS → Manage Custom Files)
2 – Paste the code below in your Custom CSS (Design → Custom CSS)
3 – Replace the text image-url-here with your own image url from the custom files section, making sure to leave the individual quotation marks around the url itself.
4 – Adjust the height so the line looks the way you want it to!
5 – Pat yourself on the back for creating a unique site with some custom code you rockstar!
Here is the code for the line itself:
hr{background-color:transparent!important; background-image:url(‘image-url-goes-here’); background-size:contain!important; background-position:center;background-repeat:no-repeat!important; height:30px!important}
→ Need to make it bigger? Change the height.
→ Want it to repeat horizontally? Try background-repeat: repeat-x
→ Want it to repeat vertically? Try background-repeat: repeat-y AND increase the height.
—
🤩 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
