20+ Squarespace Design Tips From the Pros
One of the many reasons Squarespace is so amazing is how easy it is to customize your website.
The hardest part might be knowing what exactly to do to get what you want. But guess what, there are lots of Squarespace pros out there that know how and I’m about to share some of their best Squarespace design tips with you.
I say “20+” because I plan to keep adding to this list as I find more and more tricks for you.
Be sure to click on each of the design tricks to get the full details and how-to’s from the Squarespace pros themselves!
Are you still trying to work on setting your Squarespace website up? Get the exact steps you need to take to go from idea to design to launch your website with ease and attract the right people so you can grow your online biz >>>
Squarespace Design Tricks:
This is more for the bloggers out there, but of course anyone can use a sidebar! Most bloggers do want to have a sidebar on their blog, but sadly, not very many Squarespace templates include them.
Luckily for you, Mike and Brittini over at Station Seven has just the design trick you need! And no code is necessary.
In case you don’t like the way that DIY sidebar looks or you just want something to plug n’ play, Paige reviewed the Squarespace sidebar plugin from SQSP Themes. This is something you have to pay for, but if you have the budget for it and it’s something you absolutely want for your business, it just may be your answer!
If you are interested in adding more heading sizes to your website then this is the article for you. You can add an H4, H5, H6, or more! The best part is, Beatriz shows you how without having to use an HTML code block every single time.
This is probably my favorite Squarespace trick. Okay, it’s not exactly a design tricks, so maybe it doesn’t fit in so well with all the other tricks here. But I think it’s pretty dang handy and will be your lifesaver!
If you haven’t already, you will soon be getting tons and tons of ugly links that you need to link to for a variety of things such as landing pages hosted elsewhere and affiliate links.
With this trick from the lovely Megan Minns, you can easily create new links that include your domain name. This means branded and easy to remember links! Yay!
Thanks to Mallory and Anna from Bold and Pop, you can easily create a layered slideshow on your website! You can definitely have a lot of fun with these! Checkout their colorful website to learn how!
Having an accordion style dropdown menu is a really awesome idea for FAQ pages, especially if you have a lot of questions to display. It helps the page to look more clean and concise.
Erika from Launch with Erika shows you the exact code you need to make this happen and where to put it!
This is such a neat idea, I love it! You can add an animated counter to your website to display a count of whatever you want. For example, a count of how many clients you have helped. You can view a demo of this in action in the article explaining you how to make it work!
Susannah from Hello Ginger teaches you how to create a colored background section on your website. This only works if you are using index pages, which are only available with select Squarespace templates. But it’s such a great way to add a little pop of color to your website!
In case you don’t want your section to fully be one color, you can split the section into two colors! Beatriz shows you the step by step process to make this happen. Again, this only works if you are using index pages.
I used this for one of my email opt-in pages.
Megan breaks down the steps you need to take to customize your “read more” links. In case you aren’t sure what the heck I am talking about, the “read more” links are shown on your blog page with each blog post under the excerpt.
She includes the exact CSS you need to copy and paste into your CSS design.
You might want to create a landing page and have more customization than the options available to you with the Squarespace cover pages. You can do this by creating just a normal page and then hiding the header and footer. Sharon teaches you this design trick over at The Qurious Effect.
Melanie will walk you through the 4 simple steps to create a testimonial slide on your website. Seriously, it’s so easy, no coding required! And it’s a great way to show off your testimonials on your homepage or sales pages.
This is a similar idea to the testimonials, but instead you are showing off logos of brands you have worked with, been featured on, etc. Paige shows you how to do this for your Squarespace website, and even includes a video walking you through it!
There are a few Squarespace templates that have this built in, but in case you aren’t using one of those templates you can create it on your own! I actually used this to make my last nav item look like a button. It’s great for those nav items that you want to stand out from the rest, like for a shop or for services.
15. Add Custom Fonts
Squarespace offers tons of fonts for you to choose from. But what if your brand’s font isn’t available? Just follow the steps written out in this article!
Not only does Louise show you in video how to embed a PDF on your website, but she also shows you the other more common ways. So you can take your pick of which way works best for you. But sometimes, you want the PDF to actually be embedded on your Squarespace website.
Squarespace does have Pin-it buttons you can add to your website, but what if you just really don’t like those? You could buy some pretty ones, or make some yourself and add them! Just follow the steps laid out in the article from Brittni and Mike at Station Seven.
*Hint: they offer you free Pin-it buttons when you sign up for their email list
This is a cool little design hack that doesn’t require any code. You can make images parallax scroll at two different speeds. You’ll have to watch the video demonstrating this to really understand the full effect!
Let’s face it, the contact forms on Squarespace can be a bit boring. So, follow Meagen’s steps to customize yours to fit your brand and stand out!
20. Overlap Headings
This is such a unique design trick you can do with your Squarespace website! Using the code provided by Beatriz, you can overlap two headings so one is in the background and the other is in the foreground.
Yes this requires code, but she makes it super easy so you can just copy and paste!
Get the exact steps you need to take to go from idea to design to launch your website with ease and attract the right people so you can grow your online biz >>>
You can easily do this in Squarespace, but it doesn’t exactly look very pretty and it’s definitely not well-branded. At least Squarespace does provide ways for you to customize it slightly by selecting if you want it appear as a bar or a popup and what position you want it.
But it’s still not branded, unless light grey is your brand color then you can probably keep it as is. Otherwise, follow these easy steps to customize your cookie banner using CSS.
So, there’s a chance you don’t like your the layout of your blog page. If that’s the case, Paige shown you exactly how you can change it without using code!
Are there any other cool Squarespace design tricks you know about it? I would love to hear them and add them to the list! Comment below to let me know