All Articles
The Art of Bullet Points: A Guide to Customizing Bullet Points
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.
50 Shades of Gray-dient: Building Background Gradients in Squarespace
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!
Scrollin’ Along: Adding a “keep scrolling” arrow to your webpage
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.
Using jQuery to Build a Show / Hide Section Toggle
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.
Make It Repeatable - Show / Hide Toggle
Refactor your code to make it more reusable, and spend less time copying and pasting code around.
Transition Effects for Show / Hide Toggle
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() Selector
The :not() pseudo-class allows us to select and style elements that do not match a specified selector.
Preventing CSS when in edit mode
Target elements that don’t contain a specific selector using the :not() pseudo-class.
List Item Dividers
Learn how to code out a common design pattern - adding dividers between a list of elements.
How Does Sticky Work?
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.
Sticky Blocks In Classic Editor
Make any column of blocks sticky in Classic Editor sections.
Sticky Blocks In Fluid Engine
Turn any fluid engine block into on that sticks within it’s section.
Header Offset Variable
Maintain the perfect amount of space for your header when offsetting a sticky element.
Sticky Sections
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.
Troubleshooting the sticky property
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.
Switch the Logo When Mobile Menu is Open in Squarespace
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.
Adjust Pagination Spacing on Blog Post
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.
Ask Us Anything with Christy Price
Christy Price and I are doing an “Ask Us Anything” webinar on Oct 6th and I would love to see you in there! These webinars are info-packed, fun, and live discussions where we answer as many as your questions as we can. Register here, and ask a question in the Q&A tab. Even if you can’t make it live, you can still watch the replay!
Thoughts on Squarespace’s Circle Day & In-Person Meetups
There’s a special kind of fun that happens when you meet people you’ve only ever interacted with virtually. 3D!