Hey friend,
New Tutorial
I have a new tutorial for you about how to switch an image on hover of an image block, check it out below. This tutorial uses pseudo-elements pretty extensively, so if you’re interested in learning more about those in CSS, I’d recommend checking it out.
Coming soon: new lesson on Grid Layouts in Squarespace.
I’ve spent a lot of time these last few weeks putting together a new lesson on Grid Layouts in Squarespace. I’m hoping to release this sometime next month.
It will come with a bunch of examples that you can use for laying out an entire page, summary blocks, and the new auto-list sections. I’m quite excited about this one because it really allows you to break out of the normal flow of Squarespace templates. And y’all are incredible designers, so I can’t wait to see what you build with it.
New Portfolio Piece:
I recently completed a pricing element for a client in Squarespace. I really like how it turned out, check it out below.
Pricing Changes:
One more friendly reminder about pricing changes coming up. If you missed this update, you can read about it here.
Best,
Will
TUTORIAL
Before After Image Hover Effect for Your Squarespace Website
Here’s my YouTube tutorial on how to replace your image with a different image on hover. This is great for before / after transformations or maybe fun / serious portrait photos.
If you’re interested in improving your CSS skills, I’d highly recommend watching the full video. I walk through writing this code, line-by-line and go in-depth into using pseudo-elements.
COMING SOON: BUILDING GRID LAYOUTS
Building Grid Layouts in Squarespace
(working title)
This is a new lesson that I’m working on for my CSS Course (so anyone who has already purchased that will get it for free), but I’m also planning on selling this as a stand-alone mini-course for anyone who wants to learn specifically about Grid design in CSS & Squarespace.
I’ve had a lot of fun researching and putting this together. We’ll go on a quick journey learning about the use of grids in art and design over the past 500 years. Then we’ll jump into learn CSS Grid, the CSS code that allows us to create these grid-layout design. And finally we’ll build out some examples specifically on our Squarespace website. The below images are a couple of examples that I’m currently working on.
Full-Page Grid Designs
Summary Block Grid Design
PORTFOLIO
Here is a recent project I finished for a client who needed a responsive pricing table, and I’m really happy with how this one turned out. It’s a nice clean design, but it’s built using regular Squarespace blocks, very little custom HTML, so it’s easy for the client to edit and update without getting into the code.
LEARN CSS IN SQUARESPACE
I built this course to help you understand CSS, so that you aren't limited by copying and pasting other people’s code. Learn the skills to create beautiful and customized websites in Squarespace, fast.
Take your skillset and business to the next level.