Adding H4 and H5 Titles to Squarespace using HTML and CSS: Enhance Your Heading Formats

Are you looking to expand the heading formats available on your Squarespace website? Good news! You can easily add additional heading formats to any Squarespace template without the need for Code Blocks. In this guide, we'll walk you through the process of incorporating H4 and H5 headings using Custom CSS and Markdown Blocks.

Experimenting with Heading Formats

To begin, navigate to a page on your Squarespace website where you'd like to add the new heading formats. Insert a Markdown Block and enter the following text:

 

# This is an example of Heading 1

## This is an example of Heading 2

### This is an example of Heading 3

#### This is an example of Heading 4

##### This is an example of Heading 5

 

After saving the page, you'll notice that the first three headings (H1, H2, and H3) are formatted correctly, while the last two headings (H4 and H5) appear unformatted. The number of hash characters preceding the text determines the heading level. For further Markdown guidance, refer to the helpful Markdown Cheat Sheet provided by Squarespace.

Adding Custom Styles:

Now, let's proceed to Design > Custom CSS to incorporate styles for the H4 and H5 headings. Consider the following example:

 

h4 {
color: blue;
font-family: Rubik;
font-weight: 400;
font-size: 18px;
}

h5 {
color: green;
font-family: Rubik;
font-weight: 400;
font-size: 15px;
}

 

Feel free to customize these styles to match your website's design. Remember to select a font-family that is already in use on your Squarespace site; otherwise, it won't display correctly. You can customize the color, weight (boldness), and size (PX) by adjusting the code as you deem fit.

Putting it into Practice

Now, whenever you want to include an H5 header on your website, insert a Markdown Block and prefix the heading name with four hash characters, like this:

#####This is my H5 title

Conclusion

By following these simple steps, you can expand the range of heading formats available on your Squarespace website. With the flexibility to incorporate H4 and H5 headings, you have more control over the visual hierarchy and organization of your content. Enjoy the enhanced heading options and make your Squarespace website even more engaging and appealing to your audience.

As always, feel free to reach out with any questions!

Previous
Previous

Raising Image Blocks on Hover Using CSS on SquareSpace

Next
Next

US CPI Inflation Slows for 10th Straight Month; How Does This Affect Bitcoin?