Create a longer cross-fade transition on your simple or full-width gallery section in Squarespace. And yup, it works in Firefox.

Add a caption to your background images that are placed perfectly in the bottom right of your sections.

Learn how to create custom triggers to open a lightbox form.

Conditionally display the Cart icon in your header depending on whether or not you have items in the cart.

Create a scrollable text block for transcripts or other long-form text content. Great for podcasts and Youtube videos.

A floating “quick escape” button that lets victims of domestic violence more safely access resources for escaping abusive situations.

Choose from 6 different CSS customizations to add an overlay on top of your list section items. Use gradients, multiple colors, or add a hover effect.

The joy of starting any new venture or learning a new skill can quickly turn into fear. Fear of not being good enough. Fear of being an imposter.

Choose from 3 different code snippets to add a background image, GIF, or video to the mobile overlay menu in Squarespace.

In this series, we’ll explore two different setups for adding icons to the links in your main nav. The first will be a CSS-only setup, but it comes with the caveat that it’s not very flexible with different color themes. The next is my preferred method, which is the javascript setup. With this setup, I inject SVG icons into the header which are much more dynamic with different color themes.

This code snippet should be in everyone’s code snippet library. It allows you to show one section on mobile and a different one on desktop. This is great for fine-tuning page sections for specific screen sizes.

Let’s build a read more component with no javascript whatsoever.

Here is a fun little design for a featured product on your products collection page in Squarespace.

Media queries let us get really targeted with our CSS. Here are the 3 most important media queries that I use when coding.

Move an accordion block in the Additional Info area into the Product Details area.

Wrap some text around an image on desktop, mobile, and Squarespace Fluid Engine.

Create a beautiful looking vertical timeline (or process) component, from scratch, in Squarespace.

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.