Use jQuery to create a “Choose Your Own Adventure” component that lets users display a specific page section based on the button they click.

Using a simple gradient trick, we save ourselves a bunch of tedious work in order to get this overlapping image effect.

Create stylized numbered lists that matches the brand of your website. Learn to create rounded numbers with backgrounds, or add in “Step” before each number.

This series teaches you how to create beautiful and unique bullet points in Squarespace to enhance your website's design. From simple tweaks to more complex customization, like using images and icons as bullets, this guide provides step-by-step instructions for you to make your bullet points stand out and impress.

Learn how to create four different background gradients in Squarespace. From simple to trendy, you'll be equipped to add depth and dimension to your website. Let's get started exploring the 50 (err, four) shades of gradient!

Add a little down arrow icon to indicate to your visitors to keep scrolling, and when they click on it, they’ll automatically be scrolled down to the next section.

jQuery provides us with a simple syntax to create UI Components on our website. Today, let’s use jQuery to turn a Squarespace button into a toggle that shows or hides a section.

Refactor your code to make it more reusable, and spend less time copying and pasting code around.

The jQuery fadeToggle() and slideToggle() methods give us simple ways to animate the visibility of elements on our page. But there are a few adjustments we need to make to get them to work properly in Squarespace.

The :not() pseudo-class allows us to select and style elements that do not match a specified selector.

Target elements that don’t contain a specific selector using the :not() pseudo-class.

Learn how to code out a common design pattern - adding dividers between a list of elements.

In this intro lesson to the sticky property, we’re going to get a high-level understanding of what It does and how to use it.

Make any column of blocks sticky in Classic Editor sections.

Turn any fluid engine block into on that sticks within it’s section.

Maintain the perfect amount of space for your header when offsetting a sticky element.

To wrap up our content on sticky, let’s take a look at making a sticky page section. This is great if you want to add a sticky call-to-action on a sales page.

To wrap up our content on sticky, let’s take a look at the most common issues and solutions that I run into when using it.

Prevent your logo from clashing with the background color of your mobile menu. Use this quick CSS snippet to replace your logo when the mobile menu is open.

The pagination at the bottom of blog posts can be a little close to the footer. Let’s learn how to adjust the pagination spacing on blog posts on desktop and on mobile.