SQUARESPACE 7.1
Squarespace 7.1 tools
Start with your site's built-in settings, then use a tool when you need more control. Explore free references and previews, with paid exports where noted. Check each tool's plan and installation requirements.
For Squarespace 7.1
Everything you need without touching code.
Generate CSS, pick fonts, build gradients, and more. Just copy and paste into Design → Custom CSS.
CSS Cheat Sheet
Every Squarespace CSS selector organized and searchable. 117 selectors.
SEO Checklist
45-item checklist to optimize your site for Google. Step by step.
Accessibility Checker
Check color contrast and run a 23-item accessibility audit.
Version Detector
Find out if any Squarespace site is running 7.0 or 7.1.
Floating Social Links
Add sticky social media icons that float on the side of every page. Pick your platforms, colors, and style, visitors can follow you without scrolling.
Back to Top Button
A smooth-scroll button that appears after visitors scroll down. Customize the shape, color, icon, and position, then paste one snippet and you're done.
Announcement Bar
Create a custom announcement bar with your own colors, a dismiss button, and even a countdown timer for sales or launches. Way better than Squarespace's built-in one.
FAQ Accordion
Build beautiful collapsible FAQ sections that actually look good. Three styles, smooth animations, and it even generates the Google FAQ schema so your questions show up in search results.
Pricing Table
Create professional pricing comparison tables with up to 4 tiers, feature lists, and a monthly/yearly toggle. Drop it into any page as a Code Block.
Countdown Timer
Add urgency to any page with a live countdown to your launch, sale, or event. Three styles including a flip-card animation. Ticks in real time.
Popup Generator
Build email capture popups that trigger on exit intent, after a time delay, or when someone scrolls a certain percentage. No plugins, no monthly fees.
Newsletter Insert
Automatically inject a newsletter signup form into the middle of every blog post. Way more effective than a sidebar, readers see it when they're most engaged.
Testimonial Slider
Create auto-rotating testimonial carousels with star ratings, quotes, and author details. Three beautiful styles with dots and arrow navigation.
Before/After Slider
Let visitors drag to compare two images side by side. Perfect for showing transformations, restaurants, fitness, real estate, design work. Horizontal or vertical.
Scroll Progress Bar
Show a thin progress bar at the top of the page that fills as visitors scroll down. Great for blog posts, readers know exactly how much is left.
Reading Time Badge
Automatically calculate and display reading time on every blog post. '5 min read', it builds trust and sets expectations so more people actually read your content.
Table of Contents
Automatically generate a clickable table of contents from your page headings. Highlights the current section as you scroll. Three layout styles.
Cookie Consent Banner
Add a GDPR-compliant cookie consent banner that matches your site's design. Remembers visitor choices so it only shows once. Three positions, three themes.
Masonry Gallery
Turn any Squarespace gallery into a Pinterest-style masonry layout with CSS only. Set columns, gaps, hover effects, no JavaScript required.
Custom Cursor
Replace the boring default cursor with something memorable. Dot follower, glowing ring, trailing particles, or custom text. Makes your site feel premium and interactive.
Typing Animation
Add a typewriter effect to any heading, it types, deletes, and cycles through multiple phrases. Eye-catching hero sections that keep visitors watching.
Parallax Sections
Make any section background scroll at a different speed for that premium depth effect. CSS-only or smooth JS option. One paste and your sections come alive.
Sticky Header
Take full control of your header, shrink on scroll, change colors, go transparent at the top, hide when scrolling down. Make it feel like a custom-built site.
Dark Mode Toggle
Give your visitors the option to switch between light and dark mode. Remembers their preference, respects system settings, and works on any Squarespace 7.1 site.
Spacing & Type Scale Calculator
Preview a custom text-size range and export CSS for a Squarespace 7.1 Text Block. Includes a saved installation example.
Button Style Generator
Design custom buttons with live preview and 10 presets. Copy the CSS into your Custom CSS panel.
Box Shadow Generator
Create multi-layer shadows with visual sliders. Paste into Custom CSS.
Gradient Generator
Build beautiful CSS gradients with up to 5 color stops and 12 presets.
Color Palette Generator
Pick a brand color, get a complete palette with contrast ratios.
Font Pairing Tool
Browse 15 curated Google Font combinations with live previews.
Animation Generator
Preview hover effects and scroll animations, then export the CSS for your site.
Code Snippet Library
17 ready-to-use CSS snippets. Sticky headers, hover effects, and more.
Section Style Builder
Preview section padding, colors, and borders, then generate CSS for your site.
Favicon Generator
Create favicons from text, emoji, or shapes. Download all sizes.
How to use these tools
Pick a tool above
Check its requirements and try the preview
Customize the output and unlock a paid export if required
Follow the tool's instructions for Custom CSS, a Code Block, or Code Injection
Save on a test page, then check desktop and mobile
Need a hand with your site?
Get help installing, styling, or troubleshooting your changes.
