How to change the font color of only one paragraph in squarespace
Have you ever wanted to change the color or size of just one little section of text in Squarespace without it affecting your entire site? Gosh, I'm pretty sure we've all been there! Well, today I'm showing you exactly how to do that (AND I’m giving you 5 other Squarespace secrets just like this to take your website to the next level… click here to grab all 6 secrets in one place!!). Keep reading to find out how and watch the tutorial video below.
But first, a little info about how Squarespace works…
When you select your headers and body fonts and colors, it will change it throughout your ENTIRE site. So, if you change it on one page, you’ll notice that it changes it throughout your entire site. This is nice if you want to keep things super simple. But when you want to customize something further, it can be frustrating! I get it. But rest assured that with Squarespace, there are ways to pretty much customize ANY aspect of your site… you just have to know how.
In this post, I’m showing you how to change the color/size of your font in just ONE block of text vs needing to change it throughout your entire site. YAY!
Just watch the video below to get started.
How to change one font block in Squarespace…
In my example, I have set the heading 2 script font color to a pretty pink... but you'll see in the video that the banner image I want to display behind the text is also a rose color. Ugh!
Well friend, in the past you would let out a big sigh and go into the design site styles so you could pick a new color for ALL of your heading 2 fonts... which would change the color throughout your entire site. Orrrrr you might just change the background color.
BUT... after reading this post, the new you will be able to change the color of that one little section of text without breaking a sweat (and without having to sacrifice every other header 2 font in your site ;)
You ready??
Well first thing's first... you need to install this Google Chrome Squarespace Block Identifier...
Next, you will identify your block, click on the little "B" in the browser corner, and copy the block ID code.
Go into your DESIGN tab and click on CUSTOM CSS.
Next, you will paste your block code into the CSS box. You will call out your font by putting 'h1' ... 'h2' ... 'h3' or 'p' right after the block ID.
Add your curly brackets... and then you will be able to add the following code...
If you want to change the color you will put "color: #000000;" (put your own color numbers there. Use this tool to find your own hex code color numbers)
If you want to change the size you will put "font-size: SIZEpx;" (you can also use 'em' instead of 'px')
WAIT! Want 5 more Squarespace secrets just like the one on this page?
Grab my 6 Squarespace Secrets that will help you take your mediocre DIY site to BOOM-CHIKA (yeeeah, I’m that old) in just a few easy steps. Click the button to grab all 6 secrets that I use in almost every custom client ($5,000) website I build!
Here's an example of what that could look like (you can copy and paste this and add your own Squarespace block ID, color code, and font size - the underlined sections are what you would change to customize it)...
BLOCK-ID-CODE h1 {
color: #000000;
font-size: 35px;
}
There you go! Wasn't that simple?? I bet you didn't think you would be able to code, but I bet it was easier than you were expecting!
Pssst… I have 5 other simple tricks like this one that will help you take your Squarespace website from “eeeehhhh, just ok” to truly WOW-ING your dream clients. I’m show you all my best secrets for free over on this page here. So go grab it before it’s gone!
Was this tutorial helpful? I want to know if you want more tutorials like this or if you want me to stick to more 'basic' stuff... so please let me know below!
Cheering you on!