Hack your website: Highlighting Text

We thought we’d start a series of blog posts where we will share with you tips on how to make changes to the look of your Squarespace website. Whether emphasizing text in a blog, or adding background colours and images, or changing your fonts - it’s all easy to do with Squarespace’s new Fluid Engine. Let’s start with highlighting text.

Highlighting Text

Squarespace has added a cool new feature to the familiar text tool bar that allows you to customize the look of text headings easily. Highlighting text is only supported in text blocks on version 7.1 sites - be sure to connect with us if you’re interested in updating!

In this 3 minute video Sky walks through some of the features, and below the video you will find an outline for reference.

How to Highlight Text in your Squarespace website with Sky Goodwin from Goodwin Creative Web Design Vancouver BC

Select the text you want to highlight. Note it’s difficult to highlight two words on the same line differently. In the text toolbar, you can now use the Text highlight tool to add emphasis to your text. In the drop-down menu, select a text highlight option:

  • Underline

  • Freehand

  • Wave

  • Cross

  • Double

  • Jagged

  • Circle

  • Scribble

  • Over and underline

  • Diagonal

  • Strikethrough

Customize the text highlight using the following style options:

  • Animation - Choose a style of animation: draw, fade, or fade and scale. Use the Duration slider to set the length of time for the animation. If you choose the draw animation, use Direction to select if the animation goes left to right or right to left.

  • Bring to front - Enable to bring the highlight in front of the text. When disabled, the highlight appears behind the text.

  • Color - Select a color from your site’s palette or a custom color. Use the slider to adjust the opacity.

  • End caps - Set a square or round shape for the ends of the highlight.

  • Thickness - Adjust the thickness of the highlight.

You’ll notice there’s lots more on this toolbar - watch for more articles on our Creative Blog which will help you ‘hack your website’ !

Previous
Previous

Hack your website: A Guide to Manipulating Text

Next
Next

What are Next-Gen Image Formats WebP and AVIF (and Why Do I Care)?