Jump to content

Creating More Text-Formatting Dropdown Options - Adding H4, H5, H6, etc?

Recommended Posts

Guest Explosive

I'm working with a lot of text blocks on my site and I'm wondering if I can add more drop-down options to the text formatting bar.

By default there are: Normal, Heading 1, Heading 2, Heading 3, Quote, Code

Can I add custom CSS to create new options here, or do I have to add code blocks to format the text?

If I need to add a code block to do it, how?

Link to comment
  • Replies 5
  • Views 9.3k
  • Created
  • Last Reply

Hmm. That text formatting bar is programmed by SQSP as part of the system. It's not changeable. You're stuck with the options on it.

You cannot use CSS code to change the HTML structure. You can only use it to change the appearance of the content in your site: font, color, background, etc. See the SQSP KB article How should I use custom CSS?

If you know HTML code, you can put content in a code block and use HTML to structure it as you like. But it's only effective for the content in that particular code block. While doing this, you won't have a text formatting bar. You will have all the power and options afforded by HTML which includes all those options on the formatting bar and more. But you'll have to use HTML code.

Does this make sense?

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

If you use Markdown blocks rather than text blocks you can have additional levels of header.

# This is H1
## This is H2
### This is H3
#### This is H4
##### This is H5
###### This is H6

It even works on here:

This is H1

This is H2

This is H3

This is H4

This is H5
This is H6

> This is quote

This is quote

4 leading spaces is code

4 leading spaces is code

You can also _italicise_ and **embolden**

You can also italicise and embolden

More here: http://daringfireball.net/projects/markdown/syntax

Link to comment
  • 2 weeks later...

Can I use mark down to change from one heading to different heading in the same line?

For example, if the all caps words are heading 3 and the other text is normal can I do something like this:

THE SQUARESPACE COMMINITY is really helpful answering my questions.

How can I do something like this using markdown?

Link to comment

No. Headings implicitly have a line break at the end of them.

However, you could use something like:

## Here is a heading <span> for you </span>


h2 span {

Would apply red text to the part of the h2 that is wrapped in a span.

Link to comment
  • 3 years later...

I've actually created a plugin that adds h4, h5, h6 to the Squarespace text editor. So it can be done. The Advanced version also allows for additional headings, custom styles, superscript, subscript, underline and more.

Project Mgr. and Developer at Ignertia
Creator of Squint - H4, H5, H6 & Custom Styles for Squarespace

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.