Code blocks serve as a valuable tool for enhancing your website with custom HTML, Markdown, CSS, and other code types. They allow you to integrate third-party widgets, display code snippets, and add functionality beyond standard features.

Adding a Code Block:

1. Click Add Block or find your insertion point
2. Select Code from the block options
3. Click the pencil icon to open the block editor
4. Enter your code in the text field

For code snippets display:

• Select "View Source" option
• Choose HTML or Markdown from the Type menu
• Paste your code using CTRL + V (Windows) or Command + V (Mac)

For CSS and JavaScript:

• Select HTML from the dropdown menu
• Wrap CSS code in

  <style>

  tags
• Wrap JavaScript in

  <script>

  tags

Troubleshooting Tips:

• Code may not display when logged in due to security measures
• Use "Preview in Safe Mode" to view embedded elements
• Remove pages from Index if code isn't displaying properly
• Disable Ajax to test for loading issues
• If editing becomes difficult, disable script preview

Best Practices:

• Test code thoroughly before implementation
• Keep code organized and documented
• Contact third-party providers for widget-specific issues
• Consider hiring a Squarespace Expert for complex customizations

For optimal results, ensure your code follows platform guidelines and security best practices. Regular testing across different devices and browsers will help maintain functionality and user experience.

Related Articles

Previous Articles