How to create an new header in Squarespace

Squarespace

I’ve been using Squarespace since July of 2016 and ever since then, I fall in love with this platform and its features. Also, cannot forget that you can customize some elements on this platform using basic CSS coding.

(image cover)

Well, today I am going to show you how you can add new headers to your Squarespace site that surpass the 3 headers that most of the Squarespace template comes with. However, has it different than adding extra headings to your Squarespace site then you would in WordPress would but there is always a way we can do so.

Here I will go over the different things that you need to know when it comes to adding extra headings.

Have a plan for the “extra heading”

My best advice is to have a plan when it comes to extra headings because even though you can have extra headings in your Squarespace site; you would not be adding the heading like you would with the other 3 headings that Squarespace gives you with your template.

Adding the custom CSS coding

This is where you want to go to “Design -> Custom CSS”. There you would enter your Custom CSS code here:

/*** h4 - New Custom Header ***/
h4 {
  font-family: Helvetica;
  font-size: 16px;
  color: #A9A9A9;
  text-transform: uppercase;
  letter-spacing:.3em
}

CSS cheat sheet:

‘font-family’ = The font name you wish to use

‘font-size’ = The size of the font you like

‘color’ = The color of the font for your header

‘text-transform’ = it will determine if your heading will be capitalized, uppercase, or all lowercase.

‘letter-spacing’ = The spacing between the letters of your header

Putting your header to use

Now that we have the custom CSS coding in place; it is time to put your new header to use.

Now go over to the page that you wish to use your new header and go to edit that page, there you will find a gray/black tear-drop shape to add a block. You want to add the <code block> so you can get your new custom header.

In the code block, you want to type in:

YOUR TEXT OR HEADLINE HERE

That is how you can use your very own header onto your site/blog.

HTML cheat sheet:

<h4> = adds your new header; in the case it a Header 4

</h4> = you add this to close the code of your heading.

Now that you have your new header coding installed, now its time for you to enjoy it. Also if you are interested in learning more about Squarespace feel free to check out my other post here!

<br />