How to add text effects on Squarespace : The Guide
Squarespace has recently seriously upgraded the options you have for styling text - adding things like underlines, circles, highlights, squiggles and even strikethroughs to text on your Squarespace website are now super simple, and don’t need you to add CSS, plugins or code anymore (like they did previously)
That means that this guide to how to add text effects on Squarespace is a zillion times more accessible! Even if you’re allergic to code.
The range of text effects also means you’re sure to find one that fits your brand style.
Plus… and this one deserves a drum roll (and was super exciting for this Squarespace Website Designer!), you can add an animation to any of these effects making them super engaging, fun & allowing you to draw your visitors attention to a specific word, phrase or point.
My particular fave is the drawing animation for the circle effect, making it look like you’re circling a word with a pen (but maybe that’s because I used to be a school teacher!)
Anyway - let’s go through all of ‘em how you can style your text effects and a few little pro tips for you on the way too!
Pst - before we begin - items marked with a star are affiliate links, I only use them for things I use & love! Thanks in advance if you choose to use ‘em'!
Why use text effects (also called Text Highlights) on your Squarespace website?
Text effects allow you to break up big chunks of text by drawing attention to the most important words or points. They allow you to add interest and make your copy what’s called in the industry “skimmable”. Meaning people can very quickly see the key info without needing to read the whole thing.
Text effects used well also take your website to the next level, making it look more designed, custom and professional. Think about how you might be able to use text effects to infuse your brand feel - for example, if you’re a children’s education brand you might find the drawing animation applied to underlining or scribble circling a word works well, or if you’re a designer, the squiggle could make sense.
There are so many awesome text effects on Squarespace now, you can really get super creative, and all without code!
Just make sure that whatever you choose to add is on brand & added with your ideal client in mind! Not sure who they are? Grab my free workbook that’ll help you find out!
how do you add text effects on Squarespace?
All text effects can be found in the text options panel, so let’s take a quick look at it.
If you click on any text block, or highlight any word on your site you’ll see the text options menu pop up. Here you’re lookin’ for the A with a little squiggle underneath it icon. This is where you’ll find your text effects!
To add a text effect to a specific word, or words, highlight them, then simply click on the icon & the text effects options will come up.
Let’s look at what effects you have & how you can go about styling them!
What text effects and animations are there on Squarespace?
So let’s take a look at the different text effects and animations available to add on Squarespace.
When you want to add text effects on Squarespace you have so much choice!!
You have everything from a solid underline, to a low-light, a squiggly underline, hand drawn underline, strikethrough & circle.
In fact there are 12 text effects (also known as text highlights on Squarespace) to choose from!
And for each of these twelve you can change the color, thickness and animation settings to suit your style!
You can also choose if you’d like the ends of your lines to be curved or square AND whether you’d like to position the effect in front of or behind the word itself (great for effects that go over or through the word, like the highlight or strikethrough).
How to change the color of your text effect on Squarespace
To change the color of your text effect in squarespace simply click on the color dot icon - you’ll then see the choice to select any of your color palette colors or to choose a custom color which you can do by clicking on the color section, or pasting in a RGB or Hex Code.
Pro tip: You can also edit the opacity of the effect, although you might not see this option at first. To activate it, click on “color”, “custom”, then choose any color - you’ll see the opacity bar appears.
Then toggle on back to “palette” and you’ll see the opacity bar has appeared here too!
How to add a simple text underline on Squarespace
Now actually, to add a very simple text underline on squarespace you don’t even need to use text effects.
You can simply highlight the word you’d like to underline, then click command “U” or control “U” on a PC and the word will be underlined (you can remove it by doing the same thing. But if you’d like to animate your text underline, or have it in a different color or thickness you’ll want to choose it from your text effects.
How to animate your text underline on Squarespace
To animate your text underline on squarespace you’ll first want to highlight the word you’d like to underline (or words, you can select a short phrase if you want).
Next click on the icon that shows an A and a little squiggle for the text effect options to show up. Select the first one and you’ll see an underline appear underneath the word or words you selected.
To animate the word, toggle on the animation button, and then tweak the settings.
How to change the speed of your text animation on Squarespace
You can choose the speed of your animation by toggling on animation, then adjusting the speed using the slider that appears (I suggest choosing a slower speed as animations as triggered on scroll & sometimes the faster animations are finished before you get a chance to see ‘em!)
Other text effect animation settings
As well as the speed you can also edit a few other animation settings:
Whether you’d like it to be “drawn on” ie appearing from one side or another, or to fade in, or even to fade and scale whereby it looks like it’s appearing and growing from the center of your word or phrase. If you chose the “draw” animation you can also select which side you’d like it to appear from - left or right!
You can find these choices in the “animation type” drop down.
Once you’re happy with your settings (to see ‘em in action just refresh your page) you can save your page & you’re set!
How to add a text highlight on Squarespace
To add something that looks like a text highlight, you’ll want to choose the 4th option (the one that looks like a text highlight haha!) and then play with some of the settings.
Firstly I suggest setting an opacity of around 50% in a color that contrasts enough with the font colors to ensure it’s visible. Then toggle on animation effects, choose “drawn on” and slow it right down. The effect is very much like a word being highlighted with a highlighter pen (you can see it in action on this one page Squarespace site I made for Engineer, Adriana Grueschow).
How to add a drawing text effect on Squarespace
A number of the text effects look like “drawing” - from the circling of words, to the drawing underline, when paired with the “draw on” animation.
To find the one that works in your context I recommend having a play around with the different effects and seeing what you like.
Remember the animations will be more prominent if you slow ‘em down, and the lines may look more “drawing” esque if you opt for the “round” option in the “end caps” section.
How to remove text effects on Squarespace?
Put your text effect in the wrong spot, or decided it’s not for you? You’ll want to highlight the word or words that you want to remove the effect from, click the text effects icon, then scroll right on down to the bottom and click remove. You’re back to where you started from!
Loving customising your Squarespace site? It’s awesome isn’t it! Check out these 21 FREE Squarespace plugins to give you even more customisation options!!
