Squarespace CSS tricks
The Blog
Explore the Squarespace tutorials and tips available on the site to tackle that customization or fix you’re after!
And if you can’t find what you’re looking for:
Creating a scrolling text header button in Squarespace 7.1
Want to make the header button of your Squarespace project unmissable? Then why not turn it into a mini scrolling marquee with today's CSS trick! Let's get to it.
Customize and add an image to your Squarespace announcement bar (7.0 & 7.1)
Take a look at how you can create a super custom announcement bar look in Squarespace with a couple of CSS tricks and an icon or image!
How to add a wavy background to a wavy scrolling block in Squarespace (7.0, 7.1 CE & 7.1 FE)
Wondering if there’s a way to make Squarespace’s scrolling block background match the wavy pattern you’re using? Wonder no more! Find out how to make it happen.
Styling the Related Products section: number of items per row, title and price font (7.0 & 7.1)
Take a look at how you can customize the Related Products section of Shop pages in Squarespace, with a bit of CSS.
Creating an animated loading screen for Squarespace (7.0 & 7.1)
Let’s tackle how to build a loading screen or splash page for Squarespace sites that’s totally animated!
Adding custom icons to the Accordion Block while keeping the arrow or plus sign (7.0, 7.1 CE & 7.1 FE)
Want to know how to add a custom icon to your accordion items while also keeping the chevron arrow or plus sign indicator? Then this tutorial is for you!
Adding an accordion block to the details section of Product Pages in Squarespace (7.0 & 7.1)
Let’s take a look at how we can add an accordion block to the details section of product pages in Squarespace, with less code than you think!
Customizing the style and text of Read More links inside Summary Blocks (7.0, 7.1 CE & 7.1 FE)
In today’s video, you’ll learn how to replace the text of Read More links for Summary Blocks and how to turn them into buttons!
Create a typewriter effect for headings in Squarespace (7.0, 7.1 CE & 7.1 FE)
In today’s tutorial, we’ll be tackling how to create a typewriting effect for headings in Squarespace, in just a few minutes!
How to create a business info bar above the header in Squarespace (7.0 & 7.1)
In today’s tutorial, we’ll be creating a business info bar that carries the hours, email and phone number of a hypothetical company with the help of HTML and our friend, CSS.
Looping rotating words effect for headings in Squarespace (7.0, 7.1 CE & 7.1 FE)
Want to create a looping rotating effect for a heading on your client project? Then take a look at how you can easily achieve that with an awesome plugin!
Creating collapsible form sections in Squarespace (7.0, 7.1 CE & 7.1 FE)
Today’s tutorial is a really useful one, especially if you have to deal with large-ish form blocks on a regular basis when building your client sites. We’ll be using a crafty little trick to HIDE parts of a form when the page loads, and then reveal those hidden fields on click, almost like an accordion block!
How to make folder titles clickable in Squarespace (7.0 & 7.1)
Are you using folders in your Squarespace site’s navigation? Do you want to make the titles clickable? If so, tutorial will help you achieve that in no time!
Changing the accordion block icon when a dropdown is open (7.0, 7.1 CE & 7.1 FE)
If you want to add a little fun customization to your client’s accordion block, then this tutorial is for you! We'll be looking at how to use two custom icons for the accordion block items in Squarespace: one when the dropdowns are open and a different one when they are closed. Spoiler alert: the customization is easier than you think!
Adding custom icons to the Accordion Block in Squarespace (7.0, 7.1 CE & 7.1 FE)
In today's tutorial, we'll be looking at how to change the arrow or plus sign inside the accordion block for a custom icon. We'll tackle how to use the same image for ALL accordion items, and how to use a DIFFERENT icon for each individual dropdown!
Bringing back the quote block line in Squarespace (7.0 & 7.1)
In today's video, we'll look at why the quote block line disappears on the live site and how a super simple CSS trick can help bring it back and stay put at all times.
How to create responsive text, WITHOUT media queries, in Squarespace (7.0 & 7.1)
In today's video, we'll be tackling how to handle responsive text in Squarespace with ONE line of code and no media queries. Take a look!
How to create custom shapes for images in Squarespace (7.0 & 7.1)
Want to know how to create custom shapes for images in Squarespace? Then today’s tutorial is for you! Take a look.
How to create a hover mode for anything in Squarespace (7.0 & 7.1)
In this week's video, we'll be looking at the steps behind creating a hover mode for anything you want in Squarespace. Sounds good? Then let’s jump right into it!
Add custom bullet points to text blocks and image blocks in Squarespace (7.0 & 7.1)
Want to create branded bullet points for your client’s site? Then take a look at this tutorial to learn how you can make that happen, only with CSS, for both text blocks and image blocks!