Ongoing 20% off promo on Squarespace. Expires September 30, 2023. Learn more.

Change the color of a link in Squarespace 7.1 (without code)

By David NgeLast Updated: March 05, 2023

Our work is supported by affiliate commissions. Learn More

Here's a step-by-step tutorial on how to customize and change the color of a link in Squarespace without code.

Changing and styling links used to require adding custom CSS code, but Squarespace has made a number of quality-of-life changes to the platform that enable users to customize their site via their interface quickly.

In this tutorial, we'll go over:

Let's dive right in.

The setting to change the ink color is hidden within Site Styles, where you can make most of your style changes for fonts, color, spacing, etc.

There are 2 ways to get to navigate to Squarespace Site Styles, make sure you're logged into your site


1. Head to Site Styles from the site dashboard

From the dashboard, head to Design ➝ Site Styles

Head to the design page
Head to the design page
Select Site Styles in Design
Select Site Styles in Design

2. Go to Site Styles from the editor

If you're currently editing a page, you can find the Site Styles PaintBrush icon at the top corner.

Select the paintbrush icon to head to site styles from the editor
Select the paintbrush icon to head to site styles from the editor

Once the Site Styles sidebar pulls up, head to Colors.

Head to Colors in Site Style
Head to Colors in Site Style

You will then see a list of color palettes for your current site.

Identify the template that's currently applied to this section, in this case, it's Lightest 1, then go ahead and click on the Pencil icon of the corresponding template.

Select the color template for this section (Lightest 1)
Select the color template for this section (Lightest 1)

Note: The Pencil icon will only show if you hover your mouse to the palette.

Scroll down the color palette settings, and you will find a section to customize the color for LINKS.

Change link color in the LINKS section
Change link color in the LINKS section
💡
If you don't see the full list of color settings, click "SHOW ALL" at the top right corner and the rest of the color settings will show.

As you can see, the current links are highlighted in grey, which doesn't stand out if you ask me. I'm going to change the Text Links to blue instead.

Select Text Link from the sidebar and drag the color wheel to select the color of your choice. Alternatively, you can also add the HEX Code to change the color of the link.

Change the link color for Text Links only
Change the link color for Text Links only
Updated the link color to blue
Updated the link color to blue

That's it! You've just changed the color of a link on your Squarespace site.

Important: When you apply a particular color for a link for the selected template, it will also change all of the link colors where the template is applied.

💡
If you're not sure how templates and color work in Squarespace, you can refer the official documentation where they explain more in detail. 

For example, all the links in the sections where Lightest 1 is applied will turn blue.

If you'd like different link colors for different section (for whatever reasons), you can change the template for that section and customize the link color for that template instead.

Here's how.

Hover over your page section and select Edit Section.

Edit the section where you want to update the section template
Edit the section where you want to update the section template

Head to the Colors tab and choose another template for this (i.e Light 1). You can now see that the background has changed to a dark grey, and so has the color of the link.

Change the color template for this section
Change the color template for this section

To change the color for this new template, we'll follow the same process described above and head to Site Styles.

Head to the Site Styles once again
Head to the Site Styles once again

Go to Colors, and choose the template (Light 1) which we have just updated.

Head to Colors
Head to Colors
Choose the color template for this particular section (Light 1)
Choose the color template for this particular section (Light 1)

Scroll down and change the text link color once again.

Update the Text Links color for this section
Update the Text Links color for this section

Here's the updated link color.

Updated the link colors for this section (Light 1) to Purple
Updated the link colors for this section (Light 1) to Purple

Aside from changing the color for regular text, Squarespace has dedicated settings for you to change the color of navigation links and headings as well.

The process is the same — Identify the section those links are in, and select the color for the links.

Here I changed the color of the navigation links, which currently use the Dark 1 template for the section.

Update the link color for Navigation links
Update the link color for Navigation links

You can change the text links in the background and headings as well.

Update the color for headings
Update the color for headings

Frequently Asked Questions about changing color in Squarespace

Yes, you can, but the only way to do this now is by adding custom CSS code.

While this is out of the scope of this tutorial, you can check out this Youtube video on how to add a hover effect for buttons and links.

This is also done via adding custom CSS code for your Squarespace site. You can check out this tutorial from Rebecca on how to remove underline from links in Squarespace.

Yes. You can set the link color for a particular page by applying a specific template for that page and then applying the link style and color for that template.

This process is the same as changing the link color for a specific section on your Squarespace site.

David Nge

David is the founder of MakingThatWebsite.com and started making websites for businesses back in 2014. He's a keen learner and wants to share his journey and knowledge with other business owners and freelancers. He launched MakingThatWebsite.com in 2021 to make website building more approachable and scalable for businesses.

Have a tutorial you want to learn? Leave a suggestion here.