Using Squarespace Code Blocks for Custom Design

Learning Objectives

• Understand how Code Blocks work and when to use them in Squarespace
• Learn to add HTML, CSS, and JavaScript to your Squarespace site using Code Blocks
• Identify common issues and how to fix them when working with custom code

Introduction

Code Blocks are one of Squarespace's most powerful features for customisation. They let you add HTML, CSS, and JavaScript directly to your pages, giving you control over design and functionality that goes beyond the standard blocks.

This chapter covers everything you need to know about Code Blocks, from basic HTML additions to interactive JavaScript features. You'll learn practical techniques that work reliably across different devices and browsers.

Lessons

Adding Your First Code Block

Code Blocks are available on all Squarespace plans and work the same way across both version 7.0 and 7.1 sites.

Step 1: Open the page editor and click an insert point where you want to add custom code.

Step 2: Select "Code" from the block menu.

Step 3: Paste or type your code into the text area.

Step 4: Click outside the Code Block to save your changes.

The code runs immediately once saved. You can edit it anytime by clicking back into the Code Block.

Working with HTML in Code Blocks

HTML in Code Blocks adds content elements like custom text formatting, embedded media, or form elements.

Step 1: Add a Code Block to your chosen location.

Step 2: Enter your HTML code. Start simple with something like:

<div class="custom-box">
  <h3>Custom Heading</h3>
  <p>Your custom content here.</p>
</div>

Step 3: Preview your page to see the changes.

HTML in Code Blocks follows the same rules as regular HTML, but it inherits your site's existing styles unless you override them with CSS.

Adding CSS for Custom Styling

CSS controls how your HTML elements look. You can add CSS directly in the same Code Block as your HTML.

Step 1: In your Code Block, add <style> tags around your CSS:

<style>
.custom-box {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
}
</style>
<div class="custom-box">
  <h3>Styled Heading</h3>
  <p>This box has custom styling.</p>
</div>

Step 2: Test your styling on different screen sizes using the preview options.

Keep your CSS and HTML in the same Code Block when they're related. This makes editing easier and keeps your code organised.

Adding JavaScript for Interactive Features

JavaScript adds interactive elements like animations, form validation, or dynamic content updates.

Step 1: Create a Code Block where you want the interactive element.

Step 2: Add your JavaScript within <script> tags:

<button id="myButton">Click Me</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});
</script>

Step 3: Test the functionality thoroughly before publishing.

Always test JavaScript in different browsers. Some features work differently across Chrome, Safari, Firefox, and mobile browsers.

Troubleshooting Common Issues

Here are the problems that come up most often with Code Blocks and how to fix them:

Code not displaying: Check for syntax errors like missing closing tags or brackets. Use a code validator to spot issues.

Styling looks wrong on mobile: Add responsive CSS using media queries to control how elements appear on different screen sizes.

JavaScript not working: Open your browser's developer console (F12) to check for error messages. Common issues include targeting elements that don't exist or conflicting with existing site scripts.

Code affects other parts of the page: Use specific class names and avoid generic selectors that might target unintended elements.

Practice

Create a simple custom alert box using HTML and CSS:

1. Add a Code Block to any page
2. Copy this code into the block:

   <style>
   .alert-box {
     background-color: #d4edda;
     border: 1px solid #c3e6cb;
     color: #155724;
     padding: 15px;
     border-radius: 4px;
     margin: 10px 0;
   }
   </style>
   <div class="alert-box">
     <strong>Success!</strong> This is your custom alert box.
   </div>
   

3. Save and preview to see your custom styled alert

FAQs

Can I use Code Blocks on all Squarespace plans?
Yes, Code Blocks are available on Personal, Business, and Commerce plans.

What's the difference between Code Blocks and Code Injection?
Code Blocks add code to specific locations on individual pages. Code Injection adds code site-wide to areas like the header or footer.

Why isn't my JavaScript working?
Check for syntax errors, make sure you're targeting the right elements, and verify there are no conflicts with existing site scripts. Use your browser's developer console to spot errors.

Can I embed third-party widgets using Code Blocks?
Yes, most embed codes from services like Google Maps, YouTube, or social media platforms work in Code Blocks.

How do I make my custom code mobile-friendly?
Use responsive CSS with media queries and test your code on different screen sizes using Squarespace's preview options.

Jargon Buster

Code Block: A Squarespace content block that lets you add custom HTML, CSS, and JavaScript to specific locations on your pages.

HTML: The markup language that structures web content using tags like <div>, <h1>, and <p>.

CSS: The styling language that controls how HTML elements look, including colours, fonts, spacing, and layout.

JavaScript: A programming language that adds interactive features to websites, like animations, form validation, and dynamic content updates.

Responsive Design: Code that adapts to different screen sizes and devices, ensuring your site looks good on desktop, tablet, and mobile.

Wrap-up

Code Blocks give you the flexibility to add custom features and styling that aren't possible with standard Squarespace blocks. Start with simple HTML and CSS, then gradually add JavaScript as you get more comfortable.

Remember to always test your code on different devices and browsers before publishing. Keep your code organised and well-commented so you can easily make changes later.

Ready to add more advanced customisation to your Squarespace site? Check out our advanced courses at https://www.pixelhaze.academy/membership