Showcase your work using this fully customizable display component.

Prevent cropping on full width images within gallery sections. In this tutorial, I’ll walk you making your gallery sections responsive through a single line of code.

Increase the number of viewable items on mobile and tablet for the Auto List Carousel section.

This tutorial walks you through creating your own Auto Scrolling Logo Slider on your website. We’ll be using a Squarespace 7.1 gallery section to get this done.

Flip a poster image to show a description on the back as you hover over it.

Let’s build a Before / After Image Block in our Squarespace website. As we hover our mouse over an image, this code will show a different image.

Easily add a before / after image slider to your Squarespace website using image blocks.

This plugin allows you add a simple & clean autoplaying video element to your website.

Let’s add this polaroid image effect to an image block in Squarespace. Complete with that textured feel of a polaroid, lighting, and arts-y tilts.

A tutorial on adding blur effects in Squarespace. I will go over adding this effect in Squarespace 7.1, but if you’re on Squarespace 7.0, I have some code for you at the bottom. Blurring an image is actually quite simple through CSS, all we need to use is the filter property.

The super easy Squarespace Slider allows you to add a slider onto your Squarespace 7.1 or Squarespace 7.0 Brine Template website. For beginner users - no advanced knowledge of code necessary.

Finding and using CSS that others have shared is a key skill in becoming an expert web designer and developer. So in this tutorial. I’m going to show you how to apply the code, that Polypane has shared, to a few images in Squarespace, specifically, to Summary Block images & Image Block images.

In the code section, I’ve provided a CSS snippet for each each different image block that you might want to apply an opacity too.

✓ Works in Squarespace 7.1 & 7.0 Brine Templates
✓ Auto-advance slider
✓ Play / Pause button
✓ Slider Dots
✓ Gradient overlay on background-images
✓ Additional button layouts
✓ Same easy setup and install

I’ve rebuilt this from the ground up to be more integrated with Squarespace’s platform, super simple to install, and with a paid version that has an auto transitions for the slider.

[UPDATED] In this tutorial, I’m going to walk through installing the code necessary to make a full-weight, full-width, sliding image banner that you can put text on top of. Squarespace 7.1 still doesn’t have the background image slider. I’ve taken the base of this code here from W3Schools and adjusted it for Squarespace 7.1.

The background image parallax effect is definitely one of the most missing elements of Squarespace 7.1. In this tutorial, I walk you through how to setup the parallax effect on a background image.