(No-code Squarespace tutorial) Adding hover text on images
IMPORTANT UPDATE: As of 2023, Squarespace has a NEW editor you can use, called “Fluid Engine”. (You’ll know if you’re using a Fluid Engine section if there is a visible grid when you move an element around on the page.) This blog post tutorial does not apply to Fluid Engine sections, since Squarespace removed the “captions on hover” feature. However, this tutorial will still work for older editors and for any images on blog posts.
This is a great feature to use on your site in cases like these:
You work in the wedding industry and want to credit other photographers’ work
You are selling prints or other products, and want the price or product dimensions to show when you hover the mouse over it
You want to sneak in fun little bits of personality throughout your website to help create a playful atmosphere!
Roll your mouse over the image below to see it in action:
Hey there good lookin(;
How to add captions to an image when scroll over it
No custom CSS needed!
And yes, this works for your mobile site too. :)
Add an image block to your page in Squarespace
Add your image to the edit box that pops up
Below the image in the pop-up box, click the drop-down menu to the right of where it says “Caption”
Select the option “Caption overlay on hover”
Now click on the actual image block itself, and you will see the overlay bar appear at the bottom of the image
Click inside the overlay bar to type in your caption text
Then you can format the text to your liking, just like you would with a text block. Change it to the font of your choice, adjust the centering, add a link, etc.!
Click below to see the video walk-through tutorial on Instagram.
How to change the color of the caption overlay bar using CSS
You’ll want to copy the following code in Design > Custom CSS :
.image-caption-wrapper { background: #ffffff !important; opacity: 1 !important; }
This will make the background color white behind the hover text, and will apply to all images on the site.
You can of course swap out the #ffffff with the color code of your choice.
hey, you made it to the bottom!
Here are some more Squarespace tutorials for ya :)
If you’ve ever tried building a Squarespace 7.1 site from scratch, I’m sure you’ve experienced how quickly your design settings can get scrambled. But after creating dozens of these sites, I finally figured out the optimal method to get started and stay organized (and basically just make your life easier).
Let’s look out how to create a connection between these two fantastic tools, so that you can start to grow your email list without getting overwhelmed.
Tutorial + video to create wedding albums in SQSP using the special Portfolio format. The difference between Portfolio pages and blogs.
5 step tutorial on how to share a QR code that leads to a digital PDF file hosted on your website! Great for wedding programs, food menus, gratuity guides, and more.
New Squarespace design options allow you to change the look of your navigation bar in any 7.1 template. This video tutorial will show you how!
This is a new block that's being added to all 7.0 & 7.1 SQSP sites. It's great for 'frequently asked questions' and 'read more' sections of text.
Even without any coding knowledge, you can use some fantastic CSS hacks in SQSP & even customize them yourself!
You can use Squarespace’s new Scheduling system to book consultations, appointments, photoshoots, weddings, tastings, meetings, or classes; and it syncs with Google, iCloud, and Outlook!
If you’ve played around with the newest iteration of Squarespace, version 7.1, you may have seen that under the Design > Fonts settings they have some pre-selected font pairings available to choose from. But what if you actually wanted to come up with your own font selections? How do you access all the fonts that are available to use? And where the heck are they keeping the option to change your navigation and site title fonts?!
If you’ve ever found a broken link, or clicked through an old viral Pin that no longer leads to anything, or misspelled some URL you heard on a podcast; then you’re familiar with the 404 error page. Even if we misplaced an outdated URL, we’ve worked hard to get visitors to our website; we don’t want to lose them now! So how do you create a more engaging error page just in case you wind up leading internet users down a broken path? Well Squarespace makes it easy!
Normally if you want to change how long a Squarespace line block appears on your page, you’d have to add a spacer block next to it and drag it over. I recently found myself working on a client website where I wanted all the lines to be the same width (or length depending on how you see things, haha). I wanted all the lines on the website to take up about 75% of the typical allotted space. So I used the simple code hack below to make this adjustment! Additionally, it’s kind of annoying that in the older versions of Squarespace, you can only have a black line… or a white line. The end. But sometimes, I want the lines to be an element of the color scheme, with a minimal pop of color. Other times, I want all the lines in the design to be subtle and fade into the background. This code will solve that for you too!
So you’ve decided on Squarespace, because it’s the best all-in-one platform for your website. But you’re not sure whether to choose the Personal or Business plan? Let’s dive into it, and make it super clear for you 🙂 For many, many people the Personal plan is more than sufficient for a beautiful functioning website with great SEO, mobile responsiveness, a blog, and some coding capabilities. I’ll just walk through all the common scenarios in which you would need the Business plan’s premium features. And the great thing is, you can upgrade your plan at any time if your business’s needs grow!
If you’re looking for a way to make your header a rotating set of images, you’re in the right place!
A common way of showcasing photos is by using Squarespace’s carousel gallery block (or the new slideshow reel in 7.1). But this forces your photos right up next to each other, which can sometimes look crowded or confusing. So to let the photos breathe and pop more, I came up with a CSS solution that can be tweaked to your liking. Here are some before and after shots!
Depending on which template you start with in Squarespace; your logo, navigation menu, and other elements may have a solid background color; or they may sit right on top of a photo. If you want to switch up these style settings, here’s where you can find them!
One downside of the new version of Squarespace, at least for the time being, is that you don’t have the option to create a blog sidebar.
Emily Jane
I’m a photographer-turned-web-designer, running a business since 2016. In my eyes, life is a short gift. You should be able to relax & enjoy it, but you gotta make money to do that. Enter your money making machine: Your website.
Your website should be making your life easier, not harder! I help take the headache out of websites so busy creatives like you move on to your next big goal :)