Tips & Tricks to Grow Your Squarespace Skills

You can't grow without getting a bit uncomfortable.

Talented designers across the Internet have taken the time to draft amazing tutorials. Break outside the Squarespace box and experiment a bit with some clever coding solutions. 



Silva Bokis

Template Finder

Template choice is no secret. You can find it right in the Page Source code. Sound difficult? It's not and Silva Bokis makes it easy with a tutorial and searchable database.

Tracking Form Submissions

Ever wonder if your form is working? Silva has you covered. Find out how to easily track Squarespace form submissions in Google Analytics.


Hananiah Wilson

A graphic designer and owner of Hanoona Media, Hananiah has dropped some great and simple code snippets to spice up your blog.

Drop Cap Intro

Start with a bang! Use Hananiah's code and tutorial to highlight sections of text and a drop cap intro. (Shout out to DJ Khalid, star of Snapchat and the hiphop game, and @patrickswong for creating khalidipsum.com - dummy text inspired by the rapper.)

You see the hedges, how I got it shaped up? It’s important to shape up your hedges, it’s like getting a haircut, stay fresh. They will try to close the door on you, just open it. Life is what you make it, so let’s make it. To be successful you’ve got to work hard, to make history, simple, you’ve got to make it. The key to more success is to have a lot of pillows. Learning is cool, but knowing is better, and I know the key to success. The ladies always say Khaled you smell good, I use no cologne. Cocoa butter is the key.

Pull quote

Continue the slick magazine design with this code to highlight a quote or other text.

"I not only use all the brains that I have, but all that I can borrow."
- Woodrow Wilson


Squareplugins

One of the best resources to upgrade the design of your Squarespace website. Explore the colorful grid of available plugins for free or purchase. Well worth the look!

Freebies

Indulge in the Freebies section. You can find code to add a margin around the outside of your website, or hide the announcement bar icon, so no one thinks to close it.

Countdown timer

A sleek and modern version of one of the early relics of MySpace website design. 

Freeze Your Map Block

 

Ever get caught zooming in on a Map Block when you're scrolling down your Contact page? Well worry no more! You can scroll right by with Square Plugins custom code for freezing your Map Block: 

.sqs-block-map {pointer-events: none;}


Muno Space

Muno Creative blasted off with a new focus on sharing tips, tricks and tutorials for making the most of the Squarespace platform. They call it Muno Space. Plus, they are official Squarespace Specialists!

Inline tweeting

Boost your social media by offering your visitors the ability to share your words on Twitter with a few clicks: @@Sending a tweet from Squarespace has never been easier.@@


Rotating testimonials/quotes

Who doesn't want to humble brag a bit? Muno Space makes it easier to smoothly transition between endorsements or testimonials with this code and tutorial. 

  • Special Thanks to @danscharch for his fantastic work on my brand new website. Check it out: http://www.aatifnawaz.com . Go on.
    — Aatif Nawaz
  • Swanky on Squarespace thanks to Dan Scharch of Left Coast Websites! Check out my new domain here :) www.allisonstrong.com!
    — Allison Strong
  • I'm a fan and can personally endorse @danscharch & his website skills. Need a new website? Dan's your man. Trust me.
    — Ruby Veridiano
  • Cannot give a higher recommendation to @danscharch and his company Left Coast Designs. Did an excellent job!
    — Dee Raz

Quick CSS tricks

See the full Squarespace guide for CSS here.

CSS (Cascading Style Sheets) is generally the styling to your website. It is the color, font, and spacing language.

And there are some simple codes you can add right into the Design > Custom CSS section of your website to spice it up.


Broad + Main Design

Courtney at Broad + Main Design offers some great CSS customizations for professional photographers and creatives alike. I've highlighted a few from her blog post here.

+ Reduce the padding/spacing around your Image Blocks

.sqs-block.image-block {
padding: 2px !important;
}

+ Change Gallery Block arrow colors

.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
background: none !important;
color: #b7ab34 !important
}

+ Customize the Line Block

.sqs-block hr {
border-top: 1px solid #cfdbd3;
border-bottom: none;
background-color: transparent;
padding-bottom: 0px;
padding-top: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px
}

Notice the Line Blocks on this post are purple. I was able to do this by changing the border-top color (#cfdbd3).

Likewise, I decreased the padding-bottom and padding-top below 0px to -5px. It's possible this could cause some elements to clash, so it's not always recommended.


Markdown Tricks

 Read the Squarespace guide  here .

Read the Squarespace guide here.

Markdown is a code language you probably never heard of. Wikipedia states it's "often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor." Rarely used in Squarespace, the Markdown Block can offer some great features.


Create Hide/Show FAQs

Colin Irwin offers plenty of information and code for user experience solutions. Irwin made the process easy here, laying out the simple Markdown and jQuery code needed to make a sleek FAQ format.

You can see this in action with the CSS Tricks from Broad + Main Design above.


Hive Social

Create a Magnifying Glass Search icon in your Main Navigation

Hive Social offers this tidbit by first recognizing that every Squarespace website automatically has a Search page. You can find yours by typing /search after your primary domain. (Or you can try leftcoastwebsites.com/search

Leveraging the Search page, Hive Social shows how to inject code to add the magnifying glass icon. See it here.


Melanie Craft & Co.

Strikethrough and Underlined Text

The Squarespace Text Block has options to turn on bold and italic text, but where is the underline option?  Never fear! Melanie Craft & Co. offer a simple solution with Markdown code to spice up your blog posts and website copy. Check it out here and below:

Upgrade my Squarespace skills:
* Learn CSS tips
* Learn Markdown tricks


Video Backgrounds

Why add an image when you can add video?

Well, video has been tricky for Squarespace for some time. To add a video with the Video Block it needs to be hosted elsewhere, like YouTube or Vimeo.

But Waveney and Ruben of Muno Creative have broken down how to add video backgrounds to your Squarespace website. You can add video banners to regular Pages or video backgrounds to the Cover Page option. Check it out here.


Brian Carroll

Learn the Developer platform

If you want more than the template design, Squarespace offers the Developer Platform, where you can dive into the code side of the platform. As Squarespace says, the Developer Platform "gives you full control over your site's HTML, CSS, and JavaScript while providing you with a JSON API to output content from the CMS."

See the Developer Platform website here or Squarespace Template Developer Brian Carroll's tutorial on getting started.


Know more great solutions?
Want to share them?
Contact me!