How to Add Custom Code to Your Squarespace Website
When it comes to building highly customized websites, code blocks are an essential tool for experienced designers who want to add custom code to a page, blog post, sidebar, footer, or other content area. With code blocks, you can make changes to content and pages using CSS, HTML, and Markdown as well as iframes and JavaScript. The Squarespace platform is already powerful, and custom code helps professional users take things a step further to make advanced customizations and style changes.
We asked Circle members to share some of the creative ways they use code blocks. Here’s what we learned:
1. Set up anchor links
An anchor link, also known as a page jump, is a special URL that directs visitors to a specific spot on a page. Anchor links make it easy for visitors to navigate through a site, particularly on pages that are content-heavy and require a lot of scrolling.
Anchor links improve the overall user experience and serve as markers for information you want visitors to see. They can be used on a landing page to help visitors navigate to relevant content, and are especially useful for collecting leads by directing visitors to contact forms or call-to-action buttons.
Overall, anchor links are used to enhance websites built with one-page layouts, ensuring visitors see everything your site has to offer. Follow these steps to create an anchor link.
2. Autoplay videos
Fortunately, code blocks make it possible for videos and .gif images to play automatically when a page loads. Autoplay videos have the power to grab a visitor’s attention and can be used to showcase important aspects of a business or brand.
It’s always a good practice to use videos without sound, as some visitors prefer to avoid surprising and potentially disruptive noises when they’re on a website. If you determine that sound is necessary to get the message of the video across, include the option to mute the sound. Another good practice is to avoid overwhelming visitors by only having one video autoplay per page. Learn more about autoplay videos.
3. Add animations
Animations bring life and energy to a website. Like autoplay videos, they’re a fun way to draw visitors’ attention and emphasize sections of a website. Animations can be used as an accent piece to excite visitors, making for an unforgettable digital journey.
Experienced designers can use code blocks to animate text to fade in and out, wiggle, bounce, flash, pulse, or spin. They can also use code blocks to animate buttons.
On Squarespace, users can add site-wide animations and visual flair to image blocks and quote blocks without using custom code. Please be advised that the site-wide animations mentioned in this guide are only available on version 7.1 websites.
4. Customize colors
Take a website’s design a step further with color gradients. Through code blocks, color gradients can be applied in your choice of style (linear or circular) to various site elements including text, buttons, or backgrounds. The effects add visual interest to your site and can help create a unique aesthetic to represent a brand or business.
In version 7.1 websites, it’s possible to build a site header with a gradient background using a site’s color palette or custom colors.
5. Embed third-party widgets
If you want to add widgets or modifications that aren’t on Squarespace’s list of official integrations, code blocks are a great solution for seamlessly embedding elements to your website from a third-party service. There are numerous additional features you can add to your website, such as event registration and reservation services, tools for embedding .pdfs and other files, and MLS search capability for real estate listings, to name a few.
Best practices
You can build on Squarespace without coding expertise. The platform is extremely flexible, and you can easily solve design challenges with built-in style options. Squarespace version 7.1 websites are now powered by Fluid Engine*, a brand new drag-and-drop editor that offers even more design flexibility for building creative layouts.
If you do choose to make advanced modifications, only use code blocks if you have coding experience or reference a step-by-step guide in the Squarespace Help Center. Depending on the complexity of customization in a code block, Squarespace customer service might not always be able to assist you. Consider asking a question in the Squarespace Forum or join Squarespace Circle to access the Circle Forum, an exclusive community for freelancers and professional web designers using Squarespace. Learn more about membership.
Special thanks to the Circle members who contributed to this article through the Circle Forum: Tom Creedon, Rasmus Myhrberg, Anna Yates, and Stepfanie McCaffrey.
*Fluid Engine is currently only available to new/existing English users on 7.1 websites.
Want more?
Check out Squarespace Circle, Squarespace’s program for professional designers. Along with exclusive content, discounts, and other perks, Circle brings professionals together from all across the globe to exchange advice while connecting with new clients and collaborators.
