Customizing your Squarespace horizontal line is a game-changer! With just a few lines of custom CSS, you can thicken the line, add a shadow, create a double line, or even make it dotted. And if you want to target a specific line, I’ll show you how to do that too. Let’s make your website pop! 💥 #CSSMagic
Introduction
Hey there, Becca here from Inside the Square and welcome back to my channel! In this tutorial, I’m going to teach you how you can customize the horizontal line on your Squarespace website. At the time of recording this, we can use the site Styles menu to change the color, but that’s about it. So in this tutorial, we’ll be using custom CSS to make the line thicker, to give the line a shadow, to create a double line effect, and to create a dotted line effect. As always, the codes I’m about to share are listed in the description below. Let’s get started!
Customizing the Horizontal Line
Here we are inside Squarespace, and these are the four things we’ll be doing in this tutorial:
- Making the horizontal lines thicker
- Adding a shadow
- Creating a double line
- Creating a dotted line
All of this is done with custom CSS, so let’s dive in.
Thickening the Line
This is how we change the thickness of the line:
| Line Height |
|————-|
| 20 pixels |
Next, I have a code for adding a shadow:
| Box Shadow |
|————|
| Grey |
Now, let’s say you want to combine the two codes—make the line thicker and add a shadow:
| Line Height | Box Shadow |
|————-|————|
| 20 pixels | Grey |
Creating a Double Line
We’re going to use that same box shadow effect but remove any spread, so it will look like two separate lines.
Creating a Dotted Line
The lines are 5 pixels in width, they’re dotted, and they’re grey. Just like with the box shadow, we can change the color to something else and make it thicker.
Isolating an Individual Line
This code will apply to every single instance of a horizontal line on your entire website. But what if all you want to do is change one individual line? For that, you’ll need the block ID. There’s a free Chrome extension linked in the description below. I just clicked on it, and you’ll see everything in my Squarespace website has a block ID.
After you’ve customized everything you want, be sure to select "Save" when you’re done, and you’ll be good to go. Underneath this video, you’ll find all the codes that I just shared with you and a link to that free Chrome extension that I used to grab the individual block ID.
Thank you so much for watching this video! I truly hope you enjoyed it, and if this is your very first time using custom CSS for Squarespace, I have so much more that I can’t wait to teach you. Head on over to Inside the Square to check out my free class on CSS Basics specifically for Squarespace. Thanks again for watching, and most importantly, have fun with your Squarespace website! Bye for now! 🎵
