My Top 5 Squarespace Design Tips

All Squarespace sites start out as a template, but you’re way too unique for that! This article covers my top 5 tips for turning any Squarespace template into a gorgeous site you’re ready to brag about. Sound good? Well, let's get into these tips! 🤩 I created a 5ish minute video to show you examples, but I also wrote out all 5 tips below.


Squarespace Design Tip #1

Pair your color themes, giving them the same background.

Alternate button colors and header colors, leaving almost everything else the same. This gives you some design flexibility without the user seeing a big change in the layout; it still flows.


Squarespace Design Tip #2

Follow the z reading pattern.

Top left, top right, bottom left, bottom right. Keep that call to action - the main thing you want a site visitor to do above the fold or before the scroll.


Squarespace Design Tip #3

Create unique edges with images.

There is no need to keep a flat line separating everything. Think about angles, split colors; use your backgrounds to creatively to keep someone eyes flowing around your content. I have a link below to creating gradient backgrounds with code but you can use big ol' images too - totally up to you. ​I use a 16:9-ish size for background images: 3000px width x 1700px height


Squarespace Design Tip #4

Turn your page sections into a slide deck.

Browse slide decks on Creative Market or Canva to see what kind of creative flow those designers use to take people from one slide to the next. It's a great place to look for inspiration; just think of each slide as a new page section.


Squarespace Design Tip #5

Resize your images on mobile screens.

This is a design trick that absolutely requires a little code but it makes a HUGE difference in the mobile version of your site. Here is a link to my tutorial video all about it; it's super easy to implement on any subscription level and will make a big difference in making your site look awesome.

insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous
Previous

The Programs & Tools That I Use To Run InsideTheSquare