Website Building » Squarespace » Can You Edit HTML in Squarespace?

Can You Edit HTML in Squarespace?

Last updated on April 12, 2023 @ 10:04 am

You can edit HTML in Squarespace by accessing the Code Injection Tool and the Code Block Tool. You can also use the “Inspect” option to edit HTML code on your Squarespace website.

1. Using the Code Injection Tool

The Code Injection Tool can be found in the Page Settings, which can be used to add HTML code to a specific page of your Squarespace Website.

To access the Code Injection Tool, open your Squarespace website and hover your cursor over the page where you want to add or edit your HTML Code. From there, click on the gear icon that will appear to open the Page Settings window.

In the Page Settings window, select the “Advanced” settings from the left panel. This will open up the Code Injection field, where you can add or edit the HTML code.

In this case, we will add an HTML code to change the color of the heading to blue. The heading that will be affected will depend on the original heading code designated for each text, meaning that all text elements on the current page with the <h1> tag will have their font colors changed to blue. Once done, click the “Save” button to apply your changes.

NOTE: The <h1> tag is a type of heading that pertains to the most important heading on a page. You can check the designated tag of each element using the “Inspect” option, which will be discussed in option number 3 of this article.

To check the effect of the HTML code, simply refresh your page, and that’s it!

2. Using the Code Block Tool

The Code Block Tool is used to add HTML code to a specific section of your Squarespace website page.

To use the Code Block Tool, select the page where you want to add the HTML code and click the “Edit” button.

From there, go to your target section and click on the “Add Block” button.

Select “Code” from the list of blocks to add a Code Block to your section.

From there, place the Code Block in your preferred space and click on the pen icon to add code to your Code Block.

Paste the HTML code in the space provided. You will then see the effect of the added HTML code on your element in real time. Once done, click the “Done” button in the upper-left corner to save your changes.

3. Using the Inspect Element Tool

The last way that you can go about editing HTML in Squarespace is by using the Inspect option. You can use this to edit the HTML code of a specific element in your website.

To access this, simply go to the page containing the element that you want to edit, then right-click on it and select “Inspect” from the options.

This will open the Inspect window on the right side of your screen. From there, click the Element Selector button and hover your cursor over the element that you want to edit the HTML code of.

The HTML codes used for that specific element will then be shown in the Inspect window on the right.

Here, you can change the style of the element that you selected by editing the HTML code. The changes will be automatically applied to your element in real-time. Once done, select the “x” icon to close the Inspect window. Your changes will also be automatically saved.

PRO TIP: If you are considering editing HTML in Squarespace, be warned that this can potentially break your site. Only do this if you are comfortable working with code and confident you won’t accidentally break something.
Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.