5 Squarespace Tips and Tricks

Like a lot of small businesses, Squarespace is the platform I have used to create my website in.  I also create my clients' websites in Squarespace.  It's so awesome I seriously wouldn't have it any other way. I would definitely say Squarespace is the way forward for you if you want a beautiful website or blog which is easy to maintain.
Related: Why I Choose Squarespace, and Why You Should Too

Since working with Squarespace I have found a few tips and tricks which are pretty handy.  So today, I wanted to share 5 really handy things I have come across or have been asked by clients.

1 | The ESC key

As daft as this sounds I used to log into my Squarespace site the long way round, by going to squarespace.com and entering my login details. Then one day, whilst I was snooping around in the settings area (Settings > Advanced) and I noticed "Escape Key".
In a nutshell, by enabling the "Login with Escape Key" checkbox, I am able to log into my Squarespace website by simply being on my website and pressing "ESC".
How awesome is that!

2 | Form content block - lightbox mode

So I browsing some of my favourite sites and spotted a button that would "pop up" a form - usually this has been for opt-in boxes - and all of a sudden I get a pop up with a form.  I know the site is a Squarespace site, and I often wondered if it was a third party plug-in of some kind. Boy was I wrong!! - So again, after digging around and doing some reading I worked out it's been right in front of me this whole time.
So once you have added a Form Content Block to your page, you will be presented with a pop-up.  Now click on the "Advanced" tab and SCROLL DOWN (this is why I missed it!! because it's further down the pop-up!) - You will notice a section called "Lightbox mode".  You need to ensure that you have ticked the Enable Lightbox Mode checkbox.  Once you have down that you can tweak the words for the button and there you have it! Your form is now enabled by a button!

3 | Image focal point

I came across this handy little setting when I was working on a clients site.  Her site utilised full-width images (and parallax scrolling) and I noticed that in certain images, once uploaded, her head was cut off.  Not ideal really, so I looked into the issue and found that if you go back to where the image is uploaded there is little circle that appears on the image - this is the focal point of the image.  It is naturally placed in the centre of the image header.  To ensure there are no awkward parts cut off move the focal point to show the part of the image you want to be displayed.  There are some restrictions to this as there is only a certain amount you can move the image.  If all fails you may need a different image.

4 | Create a page without navigation

This is one of those "oh so easy" things that can get overthought so quickly! There is no coding required or hard work in disabling the navigation on certain pages. It is literally as easy as "drag and drop"!
So for example, say you wanted to create a special page for your latest course, or your opt-in all you have to do is create the page in the normal way, but instead of placing in under the "Main navigation" section, you want it to be under the "Not linked" section. So if you created it under the main navigation section, just drag and drop it so that it now sits under the "Not linked" section. Simple!!

5 | Change heading/title colours

Squarespace is fab in being able to give you the option to make certain styles of text into headings.  You get 3 different headings styles and the body copy text as well.  You can adjust the fonts and colours of these headings, but more recently I found out that you are restricted when you want to adjust the heading colour.  Once you set a heading colour, this will be used for all 3 headings.  But what if I wanted my second (h2) or third heading (h3) to be a different colour I hear you say?  Well, you just need to add this in your Custom CSS editor, changing the #hex code reference to your chosen colour.
Note: h1 will change your heading 1, h2 will change your heading 2, and h3 will change your heading 3 style.

h1{
color: #cccccc;
}

h2{
color: #cccccc;
}

h3{
color: #cccccc;
}

By changing the #CCCCCC to whatever your hex reference is you will amend the relevant heading style.

There you have it! My 5 Squarespace tips and tricks. Although they are not HUGE they are really useful and can definitely help differentiate your site or get you logged in quicker.

What do you think about these tips? Do you have tips to share?