Quickfire Squarespace Tip: use Spacer Blocks to break text

There are certain issues when formatting content to look best across all browser widths. You would naturally use line-breaks (pressing SHIFT + ENTER) on desktop widths to format the text— to make it easier to read. But that doesn't work on mobile. It looks awful when the text wants to naturally flow within its parent container. 

In Squarespace, instead of forcing line breaks in your text, just insert SPACER BLOCKS on both sides of your paragraph. They disappear on mobile widths, making them INCREDIBLY AWESOME for tweaks like this. 

In the video, I've added a full-wide Spacer Block to "cut the text apart". Then I drag/drop a few more, and make adjustments to center everything.

Squarespace docs on Spacer Blocks (that totally rhymes)

Squarespace Hack: "Image Needed" (image replacement)

When working on templates for clients, I'm typically inserting temporary image content to get through training. 

In this case, I'm using the default Squarespace "Default Image" to show the client admin: "you need an image here"

Simply, on mouse hover, the user would see an image is needed when they see the image I've provided.

Another class could be selected to normally display the helper image, or a logo could be added to replace the default image JUST IN CASE the site is launched with this "hack" in place.

Quick Responsive Squarespace Tip: Formatting Text using a Spacer Block Instead of using a Line Break

When adding site content, sometimes it's hard to remember that a site's text content should adapt across all device widths. This is the essence of Responsive Design.

Specifically, within Squarespace it's easy to adapt content to work across all devices.

The following is a bit of a hack, using a "Spacer Block", one of Squarespace's built-in content blocks.