Create a New Heading With CSS


I love Squarespace, and have been a die hard Squarespace fan since I made the switch 2 years ago. I have studied the platform and learned (and I'm still learning) so many amazing things about the the platform. 

As a part of growing my business, and sharing my knowledge about the platform, I really want to start sharing a few css and html tricks to help you customize your websites.

How to create a whole new heading in Squarespace with the help of CSS - Melanie Craft and Company

First up on the list, I wanted to share how you can customize your website by creating a new heading in Squarespace.

Squarespace is a great platform, but sometimes does not allow you to customize and add different headings throughout your site like Wordpress had been able to do. Luckily there is a workaround for that, which doesn't require a whole lot of css knowledge. Here's how to do it.

1. Determine what you're heading will be

Before we go any further, you'll want to determine what you're going to be using this heading for. Is this heading going to be strictly for blog posts? Is it just to add a little 'something' to a specific page? 

Using this information, you'll determine what font you'll be using, what size your text will be, and what more. 

2. Add your css

I've provided a snippet of CSS below, that will create a whole new heading for your website. Since Squarespace has a total of 3 headings, we'll switch it up and name this one 'Heading 4' or 'h4' for css. 

Copy the text below. This will be the code we will be using to target 'heading 4':.

h4 {
  font-family: playfair display;

css breakdown:

'font-family' is the name of the font you'll be using.
'font-size' is the size of your text.
'color' is the color your text will be for this specific heading.
'text-transform' will determine whether your heading will be capitalized, uppercase, or all lowercase.
'letter-spacing' will determine how much space you'll have between your letters.

Copy the above code. This code will be inserted in your sites custom css section. Click on DESIGN, then scroll down and click CUSTOM CSS. Then paste the code in the white box and click SAVE at the top of your dashboard menu to save the code.


3. Add your heading onto your website

Now we want to add the heading onto your site. Go to the page where you'd like to include your new heading text. Click on the little black tab on the page to add a block, and you'll want to scroll a tiny bit until you get to the "more" section and click on the code block.

In this code block, you'll want to add the following html code:


html breakdown:

<h4> adds your new heading 4 text.
</h4> is added at the end of your heading to close it off.

If you're just copy and pasting my code, you should end up with something like this:

Heading 4 text

Now that you've set up your new heading, check out some other posts on how you can customize your website, or contact me to help you design it!