looking to enhance the design & functionality of your Squarespace site?
Look no further! In this Kool section, we will explore 24 CSS code snippets & plugins that will take your Squarespace site to the next level.
CSS code snippets are small pieces of code that can be easily added to your website's CSS file. They allow you to customize various elements of your site, such as fonts, colors, spacing, and more. With these snippets, you can make your Squarespace site truly unique and tailored to your brand.
Additionally, we will also discuss plugins specifically designed for Squarespace. These plugins offer additional functionality that goes beyond what is provided by the platform itself. Whether you want to add a custom gallery or integrate social media feeds into your blog, these plugins have got you covered.
So if you're ready to elevate the design and functionality of your Squarespace site, keep reading as we dive into these 24 CSS code snippets and plugins that will transform your online presence!
1. CUSTOM FONT-SIZE CSS FOR MOBILE RESPONSIVENESS
Do you find yourself choosing between mobile and desktop when styling your fonts? Now you don’t have to. Laceypassmandesign.com has the CSS you need in her post How To: Customize Squarespace for Mobile | Part Two.
2. TEXT ANIMATIONS
Looking to fade in text when loading a page? Chris from Schwartz-edmisten.com is your man! Check out his video tutorial to see just how you can use custom CSS to add test animation to your Squarespace.
3. ADD TEXT OVERLAY TO IMAGE ON HOVER
Need a good hover-text effect? Here’s a great way to ad it to your images! Follow Carl Johnson as he walks you through the steps to adding text to an image on hover in this video tutorial!
4. CREATE GRADIENT BUTTONS
If a basic color button just won’t cut it, why not add a gradient to your Squarespace design. Check out this post over at InsideTheSquare.co.
5. SET A FIXED WIDTH ON BUTTONS
Unless the text appearing on your buttons is exactly the same length, Squarespace is automatically going to scale your button to fit the text. If you are looking for a way to keep button widths consistent, head over to Jessicahainesdesign.com to get her simple CSS solution to fix this!
6. CROP IMAGES IN A CIRCLE
Tired of editing your images in Canva or Adobe Photoshop? Insidethesquare.co has the CSS snippet you need to crop images into a circle right in Squarespace!
7. ADD ICONS TO YOUR NAVIGATION LINKS
Need your Squarespace navigation to stand-out? Thirtyeightvisuals.com has custom icons! And they’re sharing the CSS code that you need to add them in this post.
8. ADD A CUSTOM BACKGROUND TO YOUR SITE NAVIGATION
This Squarespace custom navigation comes to you from mybilliedesigns.com. Check out this post to see how she uses CSS to add flare to her site navigation.
9. CONTROL INDEX PAGE BANNER HEIGHT
Need all the functionality of an index page whilst blending in with your other pages? Chris has a CSS hack waiting for you over here.
10. HIDE IMAGES ON MOBILE
Sometimes, no matter what you do, your images don’t look quite right on mobile. In this post from Ljmediahouse.com, they show you which bit of CSS you need to keep your images in desktop and make them disappear in mobile!
11. CUSTOMIZE YOUR COOKIE BANNER
White text on black background isn’t your style? (obviously mine is). Station Seven is showing us how to style banners in this post (including CSS to change up your cookie banner typography, background, and button style.
12. ADD A uNIQUE BACKGROUND + BORDER TO YOUR QUOTES
Squarespace has a few different options for including quotes on your website or blog post.
“If your’e not pushing, you're not grinding… Sk8 or Die!”
— KOOL
If your looking for ways to add a little more flare to your quotes. MyBillieDesigns.com has just the Squarespace CSS hack you need to make that happen.
(You can find that post here.)
13. MAKE A VERTICAL LINE
Squarespace has made it super easy for users to add a horizontal line block.
But, to add a vertical line use this handy little snippet of CSS from Minimist.ca.
14. REMOVE HYPHENS ON MOBILE
You’ve spent a lot of time designing your site, and then you switch to mobile mode.
Suddenly, your beautiful words are now chock full of annoying hyphens. Not to worry, Jgdigital.co has CSS you need to say goodbye to these awkward hyphens once and for all. You can find that post here.
15. RESIZE IMAGES ON MOBILE
As Rebeccagracedesigns.com points out, making sure your site is mobile friendly is key. In this post, Rebecca shows us how to use CSS to resize your images in Squarespace mobile.
16. DISPLAY ONE PRODUCT PER ROW ON MOBILE
Check out this post from Decibelpromo.com for the CSS tweek to make your products display single file!
17. CUSTOMIZE THE COLOR AND HEADING SIZE ON SUMMARY BLOCKS
Squarespace’s default settings for displaying summary block info may not be to your liking. Once again, Jessicahainesdesign.com comes to the rescue with this post.
18. CHANGE THE BACKGROUND COLOR OF A GALLERY BLOCK
Finding the background color of the gallery block boring? Ditto. You can find the CCS snippet change here.
19. HIDE THE UNDERLINE BELOW LINKS IN YOUR FOOTER
If you're not a fan of the underline look, then I have just the CSS you need to get rid of it in this post.
20. CREATE A CUSTOM COVER PAGE
If you’re not a fan of the cover page layouts currently offered in Squarespace, you’re going to want to check out this CSS hack from Heathertovey.com.
21. CREATE ROLLOVER EFFECTS ON SQUARESPACE IMAGE BLOCKS
For another fun way to add animation to your Squarespace site, check out this post by Pixelhaze.academy. This CSS snippet allows you to add a custom overlay to your image that only appears when a visitor hovers over that particular image.
22. SET A CUSTOM BLOG WIDTH
As Juniperandroots.com points out, your blog page width will automatically default to whatever you set your page width to be in your site’s style editor. Depending on how wide you have this set, your blog posts may become difficult for readers to follow along with. She suggests narrowing your blog width, and in this post, she shares how to make that happen using custom CSS.
22. ADD A BACKGROUND COLOR TO A TEXT BLOCK
Bigcatcreative.com is bringing all the technical CSS you need to add color to your text block’s background. (Check out that post here).
