Squarespace provides plenty of tools for customizing the size and color of text blocks on a website, but what happens if you only need to alter one text block at once?
There are multiple approaches to making this happen, both requiring some knowledge of CSS and HTML but still easy to execute.
Background Color
Squarespace provides numerous font styling options for headlines, paragraph text and body text – however there may be times when additional flair may be desired, like adding a period or exclamation point to one piece of text on your site.
Squarespace provides several tools that enable you to change the background color of a block, but these only apply to an entire block; not individual pieces of text within a page section. If you want to alter any particular piece of text within a section’s background color, CSS is likely your best bet.
Add a CSS code snippet to your website template to do just this. There are multiple approaches, but we will cover one of the simpler techniques in our weekly Squarespace video tutorial:
To change the color of a specific block on your website, it’s essential that you know its ID. You can quickly identify any block by right clicking and choosing Inspect or by using Google Chrome’s Inspector tool; once selected Inspect will open up and display its code. Starting with its id and name as well as any desired hex colors.
Changes made to text blocks within Template Designer will apply across your entire site. Alterations made to links through Page Settings allow for changes in style and color as well. Previously, changing their colors required adding custom CSS code; but Squarespace now provides improved quality-of-life features which enable this.
Note that changing the default link color for any page section will affect all pages with that template in its application, making this important when working with multiple templates across your site. When editing template-specific default link colors in Page Settings panels, these changes will apply across the board if applicable.
Headline Color
Modifying even one text block on your website can have a dramatic impact on its overall design, so it’s crucial to use a method which doesn’t alter all instances of that font across your entire site – especially if there is dynamic header content or navigation links on it.
In this video I demonstrate how you can use custom CSS to change the color of a specific text block without altering all your site texts. You will discover how to find its identifier, add CSS code and save!
Not every solution fits every situation perfectly, but knowing there are options available if you need to make small modifications is comforting. Remember that Google prioritizes text content over visual changes to the design of a site – don’t be intimidated to experiment!
Custom fonts are another fantastic way to customize your Squarespace site and can be added within the Squarespace design editor, though some considerations must be kept in mind when doing this. First and foremost, only Adobe fonts (Google fonts don’t work) should be used; and secondly, subscription to Adobe Creative Cloud may also be necessary.
Start off by logging into your Squarespace site, selecting “Design,” and opening up “Site Styles” panel on the right. From this list of themes for your website, find one that meets your design goals and select it.
Once you’ve chosen a theme, you can easily change its colors to suit your brand. Furthermore, creating your own color palette allows for quick changes throughout your site.
As this will add a personal touch, creating separate color palettes for headings and paragraph text is also recommended in order to maintain a cohesive appearance on your site and help maintain SEO rankings by giving Google access to actual text rather than layout alone.
Paragraph Color
Change paragraph color on Squarespace used to require using custom CSS code, but recently they’ve introduced quality-of-life enhancements that make it simpler and faster to change links without using code. Whether you want to emphasize specific text or just quickly change its link color in one block on your website, this tutorial will show you how with just a few easy steps.
Before altering paragraph font color in Squarespace, you must first identify the block containing your text that you would like to change. You can either use a Squarespace Block Identifier (free Google Chrome extension), or right-clicking and selecting “Inspect.” From here, note the block ID (it usually starts with either “h1 or p”) as well as its hex color code (which comes after #).
Once you’ve identified the block to modify, simply update your custom CSS to include its new text color. Simply replace ‘FONTNAME’ with the name of the font that you wish to use and add this line of code:
This will automatically adjust the paragraph color to your new hue of orange! It’s a quick and straightforward way of changing font color on a Squarespace website; expect this process to only take minutes!
Another advantage of using CSS to modify any element on your site – from background colors to the font size of headers and headlines – is its versatility: you can also use this technique to modify any element, from background hues to font sizes for headers and headlines. Just be wary when using too much CSS so as not to overscale your website and potentially lose content or images as a result; for your own safety always back-up frequently before testing changes on a live page prior to publishing them!
Text Color
When creating a text block on your website, you have several font options available to you that will affect how the text displays on the page – from font weight (thicker or thinner), style, line height and letter spacing to letter spacing and line spacing. Each of these settings will influence how your text appears on its respective pages and can add extra flare and style to your design.
Adjust the font size on your website using the Font Size control in Block Settings menu. By default, 16px font size will be set; you can change this according to your needs or even opt to make content easier to read on mobile devices by hiding font sizes altogether.
Squarespace provides access to multiple font families, but you won’t gain instantaneous access. Instead, they showcase popular fonts for you to select. However, you can add additional fonts using Custom CSS method–just note that each addition must be done individually.
Note that any changes you make to the text color will affect all instances of that text throughout your website, rather than just one instance at a time. Depending on your needs and desired look for your website, this can either be positive or negative depending on its overall effect.
Squarespace also provides several other methods of customizing text that may be more complex, such as using the p> tag with style attribute to change text color for individual paragraphs and headlines. Although this requires knowledge of HTML and CSS, this approach can be effective when making more specific adjustments to your site.
