All Articles
Blur a background image in Squarespace (and other fun effects)
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.
Sidebar Page Nav Plugin Demo
Add a sidebar page navigation to your Squarespace 7.1 website. This plugin comes with 4 different styles, each with an indicator showing the user where on the page they’re located. Check out this demo to see what it looks like!
Super Easy Image Slider in Squarespace - Version 3.0
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.
What Happened Last Friday?
Let’s switch the date and month fields from MM/DD/YYYY to DD/MM/YYYY. Us American’s (as well as a few other stragglers) are sticking to our confusing date configurations. And as long as Squarespace doesn’t update their form date fields, you will also have to deal with it.
Switching the Day And Month Fields on Squarespace Forms
Let’s switch the date and month fields from MM/DD/YYYY to DD/MM/YYYY. Us American’s (as well as a few other stragglers) are sticking to our confusing date configurations. And as long as Squarespace doesn’t update their form date fields, you will also have to deal with it.
Change Background on Scroll
Change the background of your page as you scroll down. It works with different colors, videos, or images in your section background. Choose to transition the entire page or just a few sections.
Loading Animation for Squarespace
Let’s build a loading animation that automatically imports the favicon (browser icon) of your website and makes it bounce (through CSS animations) until the page is fully loaded.
Clickable Thumbnail Over Entire Section [Section Link]
In this tutorial, we’re going to make a clickable thumbnail over any Section in Squarespace 71. This is great for making the entire slide on my sliding image banner a link.
Overflow Carousel Pro
Have your carousel items scroll in from the side of the page to give it a nice overflow effect.
✓ Super Easy Installation
✓ Easy to Edit
✓ Works in Squarespace 7.0 & 7.1
✓ Easy to Hand-off
✓ Mobile Friendly
✓ Touch to Scroll
Floating Scroll Back to Top Button in Squarespace
In this tutorial I walk you through, step-by-step, building a Scroll To Top button. If you just want the code though, you can just copy and paste that.
Mega Menu in Squarespace 7.1
Easily add a Mega Menu to your Squarespace 7.1 website. With my simple copy and paste code and clear installation video, you'll be up and running in no time.
✓ Super Easy Installation
✓ Easy to Edit
✓ Add Content Using Squarespace Blocks
✓ Easy to Hand-off
✓ Mobile Friendly
Super Easy Mega Menu for Squarespace 7.1
Mega Menu’s are all over the place in website-land these days. Unfortunately, Squarespace doesn’t have a native way to build these out, so in this tutorial I’m going to show you how to build one.
Targeting Image Blocks & Summary Images in Squarespace
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.
Squarespace Background Image Effects
Parallax is back in Squarespace 7.1, plus more, with Image Effects for background images in sections! Currently there are 7 different Image effects. Check them out here.
Plugin Update - Split Sections Version 3.0
New Features & Updates
Works in Squarespace 7.0 - this plugin now works in Squarespace 7.0 Brine websites.
Multiple Sections per Group - add 2, 3, 4 or more sections to a split group. You can even customize each sections width.
Enhanced Sticky mode - no need to add CSS to make a section sticky, just enable it in the code block.
Improved Color Management - The background color of the sticky section is improved.
How to Style Individual Category Tags in Squarespace
Tutorial on how to style individual category tags in a Squarespace summary block. We’ll use the attribute selector to select an element by its href value.
Add Secondary Navigation to Your Squarespace 7.1 Website
Time to add that secondary navigation to your entire website or maybe just a product page. In this tutorial, I walk you through installing the free version of my secondary navigation plugin.
Secondary Navigation in Squarespace 7.1
✓ Super Easy Installation
✓ Fully Customizable
✓ Simple Nav Mode
✓ Easy to Hand-off
✓ Multiple Styles
✓ Mobile Friendly
Secondary Navigation for Squarespace 7.1 Plugin Demo
I just finished building a secondary nav for Squarespace 7.1 websites. It’s similar to what we had for 7.0 Brine templates and it also has some additional features. You can check out the demo here.
What is a block id in Squarespace and how to find one
Let’s say you found an awesome plugin that makes your summary blocks look amazing, like this one on Ghost Plugins. However, you only want it to apply to one summary blocks. How do you do that? In this tutorial, I’m going to explain what a “Block ID” is, how to find it, and how to use it to apply code to just one block in Squarespace.