#Text blocks code

When you’ve pasted the code into the block, make sure to hit save on the Code Block and then save again on the page section.Get access to all my video courses, 2 monthly Q&A calls, monthly coding challenges, a community of like-minded developers, and regular expert sessions. You can change this class name to whatever you want, as long as they are the same they will be linked together. The key here is to make sure that div class matches up with the CSS class. The code within the tags is the CSS, and this is where you control your background color, padding and anything else you want to add, just like we did in the first method. You can experiment with these to get the desired look you’re going for. The and tags indicate Heading 2, Heading 3 and Paragraph text. The code within the tags is the HTML part. Here is the code I used for the box at the top of this page: Instead of just adding CSS styles to a Text Block like we did above, this time we’re actually going to add our text and our CSS styles within the Code Block, so everything is contained in the one block. Once you’re happy with how your CSS looks make sure to hit Save in the top left hand corner!

If you can’t, it’s likely that you have the Block ID wrong (or maybe you have altered the code, compare it to the code above to make sure you haven’t accidentally deleted or changed something) You should be able to see the changes happening while you adjust this in your CSS editor. Just replace the Block Id (with the one that you copied/found earlier), the color hex code, the padding value and the text alignment value. Use the following code to add a background to your text block: Paste your Block ID into the CSS editor, and make sure it has a hash (#) at the beginning of it. TIP: I recommend having the page you’re planning to work on (with the said block) open while you are working on the CSS, because when you make the CSS changes you will be able to see them happening on the page. Once you have found the correct Block ID, make sure you have it copied.

If it starts with anything else, it’s not the correct ID. TIP: Make sure the Block number starts with Block. Though there are a lot of “ID’s” so make sure you look for the correct one, it needs to start with block. Somewhere in the code for that certain object it will say ID=block etc. Otherwise, you can right click on the block and then click Inspect. Squarespace also recommends you use Google Chrome for the best experience when you’re editing in Squarespace anyway, so it’s a win-win. Open up the page with the block you want to identify, click on the Identifier Tool in your Chrome Extensions and it will instantly reveal the Block Identification Numbers (which will be something like #block-53c818fd6d3f39517aed or #block-yui_3_17_2_1_1556302617094_72323)Ĭlick on the Block you want to use and it will automatically copy the Block number for you!įirstly, I recommend downloading it even if it’s just to use this extension, it will save you a bunch of time. This extension is designed to help you find the Block Identification Number of each Block on your Squarespace Site.

#Text blocks download

If you’re using Google Chrome, download this Squarespace Block Identifier extension for Chrome. The easiest way to find the block number: Once you have the identification number of a certain block, you can easily make CSS changes to it over in the Squarespace CSS Editor. Using a Block Identifier and adding basic CSSĮach Block on your site has a different identification number. Also, adding your CSS in one area, rather than throughout the site in different areas (as the other method below) is better overall for SEO. We use the universal CSS editor which is available to everyone on a personal plan. I recommend this method for most instances.