Tutorials
Find a new fix, CSS trick or workflow tip for your Squarespace client projects.
Adding custom icons to the Accordion Block while keeping the arrow or plus sign
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
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
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
In today’s tutorial, we’ll be tackling how to create a typewriting effect for headings in Squarespace, in just a few minutes!
Looping rotating words effect for headings in Squarespace
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
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!
Changing the accordion block icon when a dropdown is open
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
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!
How to create custom shapes for images in Squarespace
Want to know how to create custom shapes for images in Squarespace? Then today’s tutorial is for you! Take a look.
Add custom bullet points to text blocks and image blocks in Squarespace
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!
One-way sliding underline on hover for button blocks
We haven’t really covered a lot of button customizations on the blog, so I thought I’d share one with you today! The final effect makes it seem like the underline loops around the button, so it’s a pretty cool effect. The code isn’t too complicated AND is flexible enough to allow you to target one particular button size or all at the same time. So, let’s get started!
Fixing uneven spacing inside a narrow Squarespace section with one block
In today’s post, we’ll be tackling a quick fix to help you even out the misalignment on those thinner index/page sections, where there’s only one block involved.
Changing the placeholder text color of form and newsletter blocks
A few members inside the Club recently asked about how the placeholder text color of form and newsletter blocks could be altered via CSS so, in case you’ve been wondering the same thing, today I wanted to share with you how to achieve that for your own client projects!
How to adjust your page/index section height on mobile
If you like creating really immersive designs for your clients, chances are you love setting your index sections (7.0) or page sections (7.1) to the full height of your screen. The effect looks amazing on desktop but, on smaller screens, that extra space can be a little bit too much…
Adding an image to buttons in Squarespace
Have you ever wanted to add something extra to Squarespace buttons to make them look a bit more custom with very little effort? If so, today’s CSS trick is for you!
Controlling gallery block grid images per row on mobile
I want to walk you through a nifty little CSS trick that you can use to rearrange your gallery block grid images in smaller devices, so you can choose how many thumbnails or slides to display per row!
How to create a multi-column text block in Squarespace, without using separate blocks
This depends on the font you’re using and the styles you’ve set for it, but most often than not, you feel you need just a bit more space between both columns. The problem is if you shove a spacer in there, the gap looks more like an airport runway than anything else.
Adding a background color to summary excerpts
In today’s tutorial, we’ll be looking at how to add a background color to those Summary Blocks with summary excerpts you have hanging around your site… AND how to make sure the colored portions have THE SAME HEIGHT. Oooh, intriguing right?
Create vertical lines in Squarespace
Today’s tutorial will be quick an painless, and it will help you create those nice vertical lines you keep seeing everywhere that can be used to guide the eye further down the page, or simply as decoration!