Image is Everything

Our developers share the customizations that take site visuals to the next level.


While your site should be packed with essential info — mission, products, prices, contact, bios, etc. — let’s be honest: the images do the heavy lifting. Bold, captivating images draw viewers into your site and keep them engaged as they scroll around and learn about you.

While a simple, static image is always in style, our developers love to customize images in a way that breathes even more life into your site. Here are a few of our favorite image customizations, sure to make your images leap off the page — and into your audience’s hearts.

 

Hover Effect

What it does: Sometimes clients need images to do more work. A hover effect customization allows photos to change when the user hovers over it — think morphing into a different picture or showing text over the image. While you shouldn’t rely too heavily on it (you can’t guarantee where your user’s mouse will hover, after all), it incorporates movement and visual interest into your site. 

TLDR: You need image versatility.

WOTW sites that use it: Jasmine Snow, Poor Devil Pepper Co.

What our developers say:

“I love adding movement to any site and having an image change unexpectedly is a surprising treat for your visitors. I also love changing an image’s shape on hover — it’s slightly more subtle but just as impactful.
(See it in action here.)”
Alex Lucke, developer

 

Rotating Images

What it does: Moving images are fun and engaging — when used in moderation, of course. From images to logos and any graphic in between, we can control how the effects rotate, including the speed and direction, making your design stand out in a way that’s unique and polished — without going off the rails.

TLDR: You want a logo or graphic to stand out in a fun and engaging way.

WOTW sites that use it: Jam Jar Wines, The Bourse, American Bocce Co.

What our developers say:

“Looking to use this feature in a way that makes your site shine? Keep it slow and bold. Simple shapes, moving slowly, will make sure your user gets the point without getting the spins.”
Kelsey Gilbert-Kreiling, founder/lead developer

 

Image Borders

What it does: In general, images added to Squarespace are added without a border. You could apply borders to the actual image file using a tool like Canva or Photoshop, but who has time for that? If you favor the clean, polished look of photo borders, we can add site-wide customization, so no matter what photo you add to the site in the future, it has the same sleek, border-decked treatment.

TLDR: You want the clean, polished look of photo borders without any extra work.

WOTW sites that use it: Natalie’s Outlet, Zeal Grass Milk Creamery

What our developers say:

"
I like adding a border to an image because it helps the site feel even more modern. Zeal Grass Milk is a great example of the difference a 1px or 2px border can make.”
Alex Lucke, developer

 

Image Swaps on Mobile

What it does:
What works on desktop doesn’t always translate to mobile. For example, what shines as a vibrant horizontal image can fall flat in a vertical format. Enter the image swap. We allow visitors to only see certain images from mobile or desktop, so they work perfectly on a mobile device without losing impact. (Note that it will take a little more maintenance — there’s a small amount of custom code — so we recommend image swaps only when you don’t anticipate too many future changes.

TLDR: You want your site images to have a similar impact on mobile.

WOTW sites that uses it: Bucklebath

What our developers say:

"This is the type of change that feels more like magic than code. So if you ask your developer to implement it, make sure you have a conversation about handling future changes. It will require a little bit of know-how and the ability to disable some code — but it’s far from impossible!”
Kelsey Gilbert-Kreiling, founder/lead developer


Previous
Previous

One Week Later: American Bocce

Next
Next

Onboarding: Jeannine Gallagher