Five Squarespace hacks every newbie needs to know

 
Photo+Mar+19%2C+6+02+28+PM.jpg
 
 

When I migrated my website from Wordpress to Squarespace three years ago, I had no idea what I was getting myself into. Squarespace markets itself as a user-friendly, drag-and-drop website builder, and it totally is — once you get the hang of it. But it took me a while to figure out the hacks that I now use every day to make my Squarespace web developer life 1000% easier.

Luckily for you, if you’re a Squarespace newbie, you don’t have to learn the hard way like I did. Below are my five favorite hacks you need to know to start building yourself a gorgeous site.

1. make your spaces mobile-friendly with this trick.

Let’s start simple. The Squarespace spacer blocks are both the best thing and the worst thing about Squarespace, in my opinion. Sometimes we love them, and sometimes, they’re straight up aggravating. Like, why is it that your spacers can be the perfect height on your desktop, but look gigantic on mobile?

Well, here’s a secret. Not only are spacers expandable (select the block, then click and drag the dark gray dot at the bottom of the block to make the spacer taller or shorter), but if you add two spacers side-by-side on desktop, they will actually cancel each other out and disappear on mobile.

So, this will show up on both mobile and desktop:

 
 
spacer1.jpg

But this will show up on desktop only:

Screen+Shot+2019-03-25+at+4.31.15+PM.jpg

Yep. Life-changing.

2. view your design on any device size.

How did I know how those two spacers disappeared on mobile? Well, I could have pulled out my phone. But I didn’t. I used a simple tool that any Squarespace user has access to.

Go look at the editor view of your website right now. Do you see that thin gray bar at the very top, above your website’s navigation? That gray bar, when clicked, expands with options to preview your design as it would appear on mobile, tablet, and desktop. All you have to do is toggle between the devices (which I do a lot during design) to see how something you added in desktop view will look on your iPhone, for example. Saves you from having to work in multiple devices and a lot of headache!

 
 
blog-desktop.png
blog-mobile.png
 
 

3. adjust the focal points on your images + media banners.

Have you been trying to crop your banner images just right so that they fit perfectly?

Here’s an easier solution: on every image/media banner, there’s a small gray dot that appears in the content editor (hint: click the “edit” button on your image and hover over the thumbnail that pops up to find the dot). That dot is your focal point.

 
 

Instead of croppingcroppingcropping, which can cause weird resizing issues on mobile, just click and drag that little dot over to whatever part of the image you want centered. That way, it will automatically crop perfectly on mobile (so that you don’t lose any of the important parts of the image) and center your focal point on both mobile and desktop.

Pro-tip: If you’re trying to create some off-centered composition with your image, you can do that too using a focal point — just move that dot over to the far left or right side of the image. Larger images with lots of negative space work great with this trick.

See the gray dot? Move it around your image and see what happens!

See the gray dot? Move it around your image and see what happens!

 
 

4. enable your cover page while your site is under construction.

If you are doing one of the following things:

a.) still working on your site before the launch,
b.) doing some major maintenance on your site, or
c.) making a big announcement,

…you should enable that cover page, girl. What’s a cover page? Well! *gestures grandly*

 
 

If you add a “new page,” you can select the Cover Page option from the bottom of the list. You can use these as placeholders for pages on your website, adding a “Coming Soon” message and choosing from a list of actions for your user to take (including email/newsletter sign-up, navigation buttons, and more) when they land on your cover page. Cover pages also have a variety of pre-designed templates that you can choose from and customize to match your branding. Add your logo!

If you want to make your cover page the first thing a user sees when they visit your website (this is great for big announcements or for when your site is undergoing maintenance), go into the Basic settings of the cover page and scroll down until you see Page Controls, then select “Set as Homepage” and save. When you’re ready, you can disable the cover page and reset your real homepage as the default.

Scroll to the bottom to find the Cover Page.

Scroll to the bottom to find the Cover Page.

 
 
setashomepage.png
 
 

5. two words: shift + enter.

If you’ve played with text formatting on Squarespace for 30 seconds or more, I guarantee that you’ve already run into this issue.

How do you make your line breaks smaller??

Squarespace defaults to adding a new paragraph when you hit the enter or return key, which creates a large space between your last line and the new one. But sometimes, we don’t want that! The solution is easy, but only if you know the keyboard shortcut. So memorize this, and you can use short line breaks to your heart’s content: shift + enter.

Watch this:
I just did it.
See that? I just did it again.
I’m making my line breaks super short.
I could do this all day.

I didn’t do it there.
But here, I did.

Okay, I’m done. But seriously, creating a short line break is one of those things that nobody on Squarespace tells you and you’re just expected to know for some reason. So now you know! Tell your friends (especially your poetry-writing/formatting friends — we can’t have them pulling their hair out).

 

what would you add? let me know in the comments and don’t forget to share this post with other Squarespace newbies to help them out!