Awesome Tools & Resources for Squarespace Web Designers
I’ve been using Squarespace to create beautiful websites for my clients for just over a year now. In that time, I’ve scoured the web for for design inspiration, answers to problems, and learning resources to make my job easier and grow my business.
I’d like to share some of my favourite tools and resources because all of these tools are free to use, and sharing them is my way of showing appreciation for the help and guidance they’ve provided.
1. Ghost Plugins
Did someone say FREE Squarespace plugins? I don’t know, someone probably did at some point. But, more importantly, the folks over at Moov Labs created a whole website chock-full of amazing free Squarespace plugins.
Take as many plugins as you want for free, or be a good samaritan and contribute to their Code For Good mission by paying what you want for plugins that help you out. Choose one of their six preferred charities, or add your own. It’s a win-win 🙌🏽
2. Laws of UX
Laws of UX is a collection of principles that designers can consider when building user interfaces.
I’ve found this to be an incredible resource that helps me hone my skills creating beautiful websites with great user experiences.
Clients often get ideas in their heads about what they want based on something they’ve seen or feedback from inexperienced friends and family. Laws of UX is a fantastic learning resource, but I love using it as a reference to help me articulate the reasons behind the decisions I’ve made during the design process. Most of the time, I find clients tend to rescind their suggestions and revisions when I can present a rational argument about my design direction. This website helps me do that.
3. Lorem Ipsum
Lorem Ipusm, what’s that!? It sounds like Latin!
That’s because it is. Lorem ipsum is placeholder text used in laying out print, graphic or web design to create a natural looking block of text that doesn't distract from the layout and simulates real text when you don’t have it.
Fun fact: the scrambled Latin used in lorem ipsum bears a striking similarity to sections 1.10.32–33 of Cicero's work: “Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora…”
Learn more, and generate your own Lorem Ipsum text at loremipsum.io
4. CSS Tricks
When I decided to start my own business doing web design, I didn’t know the first thing about web design or any type of coding. Whenever I have a Google inquiry about CSS, this website is one of the first results and one of my go-to resources for CSS modifications.
CSS Tricks is the brainchild of the brilliant web designer Chris Coyier. It’s another amazing resource for learning about all things related to web design. It’s not specifically targeted at Squarespace designers, but you can apply any of the lessons and principals to your Squarespace project.
These are go-to tools for me. Check out my other articles for stock photo resources and choosing a colour palette. If you've got a tool that you use, I want to hear about it. Drop a comment below, I love hearing from you.
Related Articles:
Learn how to turn the inset border on a Squarespace section into a blurred image frame using just 6 lines of custom CSS. Step-by-step tutorial with a code generator.
Create a vertical scrolling testimonial carousel to any Squarespace site. Includes a live code generator where you can type in your own reviews, customize colors, speed, and card styles, and copy the finished code in one click.
Uploaded a video to Squarespace but can't find a way to download it back? Here's a quick workaround to retrieve your hosted video files when the download button is missing.
Learn how to add quizes, polls, and surveys to your Squarespace website without code using Opinion Stage. A free tool to turn quizes and polls into lead generators.
Create anchor links in Squarespace 7.1 without coding! Learn to make smooth scrolling internal links for same-page navigation, links to other pages, and SEO-friendly anchor links. Get solutions for unsupported sections too.
A complete guide to the 2026 Squarespace Circle program changes, including how to qualify for Gold and Platinum status, earn points, and unlock exclusive discounts.
Create a typewriter effect header with a blinking cursor on your Squarespace site using one simple code block.
Add a 'View Project' button overlay to your Squarespace portfolio thumbnails. This code snippet is an easy plug-and-play solution to enhance your Squarespace website design.
Learn how to write original content as a Squarespace designer without relying on AI-generated templates. This guide covers a five-step process for creating blog posts that keep your unique voice while using AI as a helpful tool.
Add a collapsible floating side navigation menu to your Squarespace site with this code snippet. Keep links accessible without clutter, customize icons and colors, while being fully responsive. Follow the step-by-step guide to integrate it seamlessly.
Learn how to customize the default 'Sign up for News and Updates' text in Squarespace forms with a simple JavaScript snippet. This quick guide will help you align your forms with your brand’s tone and messaging, boosting engagement and maintaining consistency.
Discover Generative Engine Optimization (GEO) and learn how to rank in AI-generated search results from tools like ChatGPT and Google Gemini. Build a strong SEO foundation, optimize for informational queries, and adapt to AI-driven search behavior for future-proof visibility.
Learn how to reposition your Squarespace header to the bottom of the page using a simple CSS code snippet.
In this tutorial I will teach you how to add a polaroid photo effect to the Squarespace Instagram block.
In this tutorial I will teach you how to change images on hover in Squarespace Fluid Engine and 7.1 using a very simple CSS code.
In this article I will guide you through the process of implementing the Ken Burns effect on your Squarespace images, galleries, and section banners using CSS.
When a member logs into their Member Area account, the page simply refreshes and the user panel opens. This can be confusing and not the best user experience. In today's article, I'll show you how to solve this problem by sharing a simple code snippet that you can add to your website
In today's digital landscape, websites must be designed with responsiveness in mind. As a Squarespace designer, one of the most important steps in my web design process is ensuring my websites are responsive and look amazing on all displays, be it mobile, tablet, or desktop.
If you’re a business owner or a freelancer, you know that it can be stressful enough having an unstable and variable income. The last thing you want to worry about is clients that ghost you after your work is done. Your livelihood depends entirely on invoices paid on time by your clients. Unfortunately, that doesn’t always happen. Since starting my web design business, I have not encountered this problem once. Here are some tips to prevent late and non-payments
If you're a fan of Squarespace like I am, you'll know that 2022 was a banner year for the platform. They completely revamped their website builder with the "Fluid Engine" layout editor and let me tell you - it was a game changer. Building websites on Squarespace just got a whole lot easier and more stylish. But that's not all - they also rolled out a ton of new features that made it possible to create professional-grade websites without any coding skills. These updates were a total dream for anyone who loves to tinker with their website and try out the latest design trends. In this article, I'll be sharing all the details about these new features and giving you my honest thoughts on them.
Adding floating social icons that are always visible to your website is an easy way to encourage visitors to follow you on your chosen platforms and stay up to date with your content. Not only do these icons provide an easy way for visitors to connect with you, but they also contribute to the professional and cohesive look of your site. The new Fluid Engine update to Squarespace means the codes we used on 7.1 to achieve this are no longer viable and they need some tweaking.
In the web design business, like any tech-related business, technologies and trends move & change at an impossibly rapid rate. You’ve probably noticed many of these trends emerging already. If not, you’re going to notice them after reading this article.
Squarespace has just released a new feature that I've been wanting for a while: Saved Sections. In this post, I'll give you an overview of what Saved Sections are, how to use them, and how they can improve your Squarespace workflow.
In this article, I’ll show you how to create an anchor link sidebar navigation in Squarespace 7.1 and Fluid Engine.
In this article, I’ll show you how you can force the mobile navigation to show all the time, even when viewing on desktop browsers in Squarespace 7.1.
Like many, I left high-school with the task (read: burden) of deciding, that very minute, what it was that I was going to do for the rest of my life to make some semblance of a living in this tremendously costly city I call home. What do I want to be when I grow up? In western society, what that really means is: Which profession will define me a person, and how many expensive and unnecessary things do I want to buy to impress people I don’t like?
The Brine family of templates in Squarespace 7.0 offered a lovely, optional parallax feature that could be applied to banner images. 7.1 does not currently offer this option. However, with a little bit of code, we can add a (more flexible) version of the parallax effect to banner images in this updated design system.
Logos are essential for the branding of your company, and can also have an effect on the overall design of your site. This can certainly be an intimidating process if you have never designed a logo before, but it doesn’t have to be.
A complete guide to Squarespace’s 2025 pricing—Basic, Core, Plus, and Advanced. Use our free plan selector to quickly find the perfect tier for your site.