Top 5 Squarespace 7.1 Hacks
In this video, I'm going to share with you my top five Squarespace hacks. They're super simple things that you can do with Squarespace to make your life a lot easier and your website a lot better.
I am a Squarespace Authorized Trainer and Squarespace Expert (those are their words, not mine), but I work in Squarespace everyday, all day and have for the past five or six years. So a lot of these things I figured out just because I use Squarespace all the time. These hacks are easy, but if you are doing your own website or are new to Squarespace, these are things that might be hiding that you don't know about. So, let’s get into it…
Enable the escape key to login to your Squarespace website
So my first one is my favorite one, and that is to enable the escape key to log into your website. So to get to the backend of your website, to be able to edit it, maybe you're going to account.squarespace.com, clicking on your site, and then into edit mode. But if you enable the escape key, you can just go to any page on your website, hit escape, and it will prompt you to log in. And if you're already logged in, it'll just take you right to this sidebar here.
To enable this go into your Settings > Advanced > Escape key > enable login with escape key > Save. Once you’ve done that, all you have to do is go to your website, click escape, and you’re logged in,
Squarespace’s Social Share Image
So whenever you share your website on Facebook or whatever social media (or even text message), it will pop up with a picture preview. And sometimes it pulls a picture that you don't want it to, or it pulls your logo and makes it look like really cropped or stretched. So to fix that, go to your home dashboard, click on Design > Social Sharing.
I recommend you take the main picture on your homepage and set it as the Social Share Image too. That way when you share your website, the preview will have a nice picture of you (or a branded image) along with the title and description of your website.
How to keep your Squarespace website text from hyphenating
My hack #3 is how to avoid your text from hyphenating. All you have to do is go into Design > Custom CSS and paste the following code. What this means is for Header 1, Header 2, etc. and for your paragraph text, it will NOT hyphenate your text.
h1, h2, h3, h4, p {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
Squarespace button sizing consistency
Normally by default, Squarespace will make buttons the size of whatever your button text is. But if you’re like me and appreciate consistency, you’re going to want your buttons to be the same width no matter what the button text is, right? Especially if you have a couple buttons that can be seen all at one time.
To do this, copy and paste the following code into the same place you just put the hyphenating code from above (Design > Custom CSS).
.sqs-block-button-element--small {width: 140px !important;}
.sqs-block-button-element--medium {width: 170px !important;}
.sqs-block-button-element--large {width: 180px !important;}
You’ll see there are 3 “rules” here, one for each size button. Feel free to use just one specific line, or all three. Also, you can change the 140 (or 170/180) pixel specifications to adjust the width of your buttons.
How to avoid looking like you have a DIY Squarespace website
My last tip (which is actually two for one) is another way to avoid looking like you have a DIY Squarespace website.
The first thing is to add a favicon. A black box icon is the Squarespace default. So if you do not add a custom favicon to your website, it's going to have this black box. And anybody like me who knows Squarespace, goes to your website and sees that black box… well, I personally am like, “hmm, that's not very professional. They don't know what they're doing or maybe they did this themselves or hired someone for cheap.”
So to add your own favicon, you are going to back into Design > Browser Icon. Your favicon (or browser icon) needs to be a small design and file size. I recommend creating it in Canva at 50x50 pixels.
The other thing that really makes you stand out as having done your own website is if you keep “Powered by Squarespace” in the footer of your website which you can easily delete. You’re not required to keep that there. I recommend putting your name or your brand name and the copyright year to it look much more professional and on-brand. You can copy and paste what I have below into your footer:
Your Name © 2021 | All Rights Reserved | email@address.com
To recap…
Enable the escape key to make it easier on yourself, to log in
Add that social share image to make it look good on other platforms online
Make your text not hyphenate with that CSS code that I will link for you in the description. Um, I will also put the button sizing, um, CSS code in the description. So you can
Make your buttons all the same size (width)
Add a custom favicon
Customize your footer text
Get on THE List
It’s not your job to keep up with the current online marketing and website design trends… but it is ours! Sign up with your name and email address to receive free weekly tutorials and advice (with a side of motivation) from DTR founder, Katherine.