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:
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 style the related video items section title in Squarespace 7.1
Are you working with Video Pages on your client's site? If so, today's tutorial may come in handy if you're wanting to style the inner related video items area. In this video, I'll be showing you one clean and simple way to customize it with a bit of 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!
Autoplay and Ken Burns effect for the Auto Layout Banner Slideshow (7.1)
Today, we'll be diving into Auto Layouts once more, but this time we'll be tackling how to make the Banner Slideshow autoplay and tweak its native transition just a tad to build a lovely Ken Burns effect.
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!
Adding a simple hover mode to main video pages in Squarespace 7.1
If you're using 7.1's Video Pages in your client sites and you want to add a fun little customization to the design, then this tutorial is for you!
Styling the related video items in Squarespace’s video pages (7.1)
If you’re working with video pages in your 7.1 projects, it’s very likely that you want to customize the look of some of its areas a little bit. If that’s the case, then this tutorial is for you!
Creating cool text effects in Squarespace with CSS (7.0 & 7.1)
This is a fun one! Today we’ll be looking at how we can create 3 awesome text effects in Squarespace, with just a little bit of CSS.
How to easily create an alternated column blog layout (7.0 & 7.1)
In today’s post, we’ll be going from the regular grid layout we always see on the main blog pages in Squarespace, to an alternated column layout that makes things more visually interesting!
Adding a fun twist to poster blocks (7.0 & 7.1)
Recently, I was testing a couple of customizations in 7.1 and ended up with a pretty cool one that I’d like to share with you today!
Turning a header into outline text in Squarespace
Today’s tutorial is a fun little trick inspired by a question asked by a member inside the Club. We’ll be looking at how you can turn any heading on your client’s site into outline text! This will be a quick one, so let’s dive right into it!
Creating an editorial look with overlap image blocks
Let’s take a look at another cool way you can use code in your client designs to make things look more, for a lack of a better word, “editorial” using the Overlap Image Block.
Long border illusion for stack image block (7.0 & 7.1CE)
Since the magazine-look for websites seems to be a trend meant to stick around for a while, I thought today I’d share the result of one of my recent experiments where I customized the Stack image block to give it a more “editorial” look.
Custom Squarespace templates: a tour behind the scenes
Wondering what it would be like to use a custom Squarespace template created by a third-party? Not sure if using one of these templates could work for your client projects? Take a look at this tour behind the scenes of one of Ghost Plugin templates to see what it’s all about!
Creating a bold Index Gallery slideshow
In a previous tutorial we saw how we can customize the Index Gallery slideshow in Squarespace to add fancy new arrows and subtly switching up the layout of the description portion. In today’s tutorial, we’re going to take a similar approach…
Creating big category thumbnails with a rollover effect
Today we’re going to be taking advantage of the grid layout of an Index Gallery to create big and bold category thumbnails that you can use to showcase your different service packages, blog categories, photo galleries, or pretty much anything else you want!
Customizing the index gallery slideshow in Squarespace
Templates like Brine allow us to add big and bold imagery through its Index Gallery pages. Fortunately, Squarespace gives us a couple of different options to style them through the Style Editor however, and depending on the design you’re after, this may not be enough.
“Podcastifying” Squarespace’s Summary Block
Podcasts are pretty much THE THING right now. So, if you or your client has a podcast that wants to promote on their site, what better way to do that than customizing one of Squarespace’s block to neatly display them?
Meet Ghost: your new resource for free Squarespace plugins
Ghost is a digital marketplace for designers to download plugins and code specifically for the Squarespace platform, and I invited Cody – the brains behind the project – to answer a few of the questions that I’m sure popped into your head when reading…
How to overlap headings in Squarespace
I'm a big fan of overlapping text on purpose to create cool-looking headers, I feel this gives a more interesting look to a rather "standard" section of your website without overthinking it. So, if you love mixing fonts and want to add a unique touch to…