As a marketer, you know how important it is to have a visually appealing website that is easy to navigate. After all, your website is often the first impression that potential customers will have of your business. Squarespace is an intuitive, beautiful website builder with many excellent Global Design Style Guides. However, sometimes you want an element to stand out from the rest, and the default styles are not enough.
If you're using Squarespace to build your website, you may wonder how to change the font color of a specific text or block. Perhaps you are emphasizing this part on your website and want it to be different from the rest of the page. Unfortunately, Squarespace limits the customization options, leaving you with a uniformly looking page. This is because the Squarespace designers know the best styles to work cohesively on your site. This allows them to help you create professional-looking websites in minutes.
But what if you want to make a text stand out? Can you change the font color on Squarespace? Luckily, you can, and it's a relatively simple process.
If you’re already using Squarespace 7.1, changing a font color is as simple as if you’re editing a Word document. Just highlight the text and select the color from the pop-up editor. Squarespace provides an excellent 1-minute tutorial video about this here.
But if you’re using Squarespace 7.0, the process gets trickier but still doable. Fair warning, though. You’d have to know a bit of CSS and HTML to execute this.
There are two ways to change the font color in Squarespace 7.0. It all involves understanding CSS and HTML, but don’t be intimidated. These are simple codes, and once you get the hang of HTML and CSS, the customization possibilities are limitless.
When you want to change a specific portion of the text, simply use a Markdown Block rather than a regular text block.
Here’s a code template you can enter in the Markdown block.
<div style="text-align:center"><h3><span style="color:#c70000">YOUR TEXT 1 HERE</span> <span style="color:gray">YOUR TEXT 2 HERE</span>
You can play around with various CSS and HTML codes when using Markdown text. The ones in the example above are the most common ones that involve changing the color. Any text inside the <span> </span> headers will have the color and style you assigned to it.
Using the format above, you can change anything in your text - from headers, blog text, punctuation, and even certain letters inside a word. It’s a great way to make your content stand out.
This option helps change large blocks of text.
#block-53c818fd6d3f39517aed p,
#block-53c818fd6d3f39517aed h1,
#block-53c818fd6d3f39517aed h2,
#block-53c818fd6d3f39517aed h3,
#block-53c818fd6d3f39517aed h4 {
color: #ffffff !important;
}
Changing the font color on your Squarespace website is a quick and easy way to give your site a fresh look. By following the options outlined in this blog post, you can easily customize the appearance of your Squarespace site without having to hire a designer.
To learn more about customizing your Squarespace site, check out the Page Kits blog.
With loads of experience working in IT under her belt, she has a solid grasp on the field.