How to customize links in Squarespace
Time for another squarespace tip! This time it’s about customizing your links on squarespace. If you’ve ever used squarespace before and tried to turn the normal text into a link, you’ve probably realized that the only customization in the style panel is the color. Here we're going to teach you a few different things you can do to make your links a little more appealing.
Font choice
First, you’ll want to go to the custom code section at the bottom of the design tab. Yes, this does require custom code, but it’s easier than you think! Plus you can start by copying and pasting what we have below.To target the links you’ll want to use ‘a’ this represents all links. If you want to target a specific link on your site, you’ll have to target the section id first. For example if it’s the about section you would type #about and then ‘a’. Next we are going to change the font. To do this, you’ll type ‘font-family:’ and then your custom font. If you’re unsure how to input a custom font, click here to head over to our custom font blog post first. You can also change the size of your link text with the link ‘font-size’. Now, you should have something that looks like the code below. Feel free to copy and paste this first as a starting point.
A {
Font-family: blair;
Font-size:16px;
}
Underline
Another way to customize your links is to get rid of the underline that automatically shows up within squarespace. To do this copy and paste this line ‘border-bottom-width: 0px’. This will completely erase the line, but if you want to keep it and just change the width, you can change the 0 to a 1,2,3,4 and so on. Afterwards, your code should now look something like this:
A {
Font-family: blair;
Font-size:16px;
Border-bottom-width: 0px;
}
Hover functions
The last trick we have for you is a hover function. To make it more obvious that the link is clickable, you can add a hover function that will change the link’s color when you move your mouse over it. To do this you’ll need a new line of code and this time you’ll add ‘:hover’ after the ‘a’. After that add ‘color:’ which will change the text and ‘border-bottom-color:’ that will change the underline color if you choose to keep it. All together it should look like this:
A:hover {
Color: #5a6422;
Border-bottom-color:#5a6422;
}
And there you have it! Those are a couple easy ways to customize your website’s links on squarespace. Please reach out to us if you have any questions about the code we’ve provided! We hope you found this helpful!