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.

Get web design tricks from Squarespace pros! Learn 20+ unique ways you can easily customize your Squarespace website to look exactly the way you want. These hacks can either be done with what is available to you in your template or by adding simple HTML or CSS code. Design the on brand website of your dreams with Squarespace! #webdesign #designtips #designhacks #squarespace

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:

1. Add a Sidebar

from stnsvn.com

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.


2. Use the Sidebar Plugin

from paigebrunton.com

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!


3. Add an H4 Header

from thirtyeightvisuals.com

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.


4. Create Branded Short Links

from meganminns.com

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!

Learn Squarespace design tips and tricks from fellow girl bosses


5. Create a Layered Slideshow

from boldandpop.com

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!



6. Create a Dropdown Accordion Style Menu

from launchwitherika.com

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!



7. Add an Animated Counter

from styleddigital.com

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!



8. Create Colored Background Sections

from helloginger.com

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!



9. Add a Half Colored Background

from thirtyeightvisuals.com

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.

10. Customize “Read More” Links

from meganminns.com

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.



11. Hide Headers and Footers

from thequriouseffect.com

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.



12. Create a Testimonial Slide

from squarecodehq.com

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.

Keep note of all the Squarespace design hacks and tips so you can customize your website even further


13. Add a Colored Background With Rotating Logos

from paigebrunton.com

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!



14. Make Your Last Nav Item a Button

from thirtyeightvisuals.com

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

from fallonmade.com

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!



16. Embed a PDF on Your Website

from solopreneursidekick.com

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.


17. Add Custom Pin-it Buttons

from stnsvn.com

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

Take action and start implementing these Squarespace tips




18. 2 Speed Parallax Scrolling

from paigebrunton.com

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!




19. Customize Your Contact Form

from forthandcreate.com

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

from thirtyeightvisuals.com

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 >>>



21. Customize Your Cookie Banner

from stnsvn.com

Because of the GDPR regulations, you must have a cookie banner displayed on your website letting your visitors know that you collect cookie data and link to your privacy policy.

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.




22. Change Blog Layout

from paigebrunton.com

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




 
profile-photo.png

I am Amanda and I am the wearer of all hats at Blondepreneur. This blog is here to help creative online entrepreneurs, like you, design and grow the successful business of your dreams. You can find blogging and business tips on the blog.