An Overview of Squarespace Blocks
If you’re a website DIYer, Squarespace blocks are arguably one of the first and most basic aspects you’d need to learn first about designing on the platform.
If you’re not familiar, blocks are strips of content that make up website pages. These can be images, text, search bars, etc…
Generally, every website page consists of multiple blocks that range in function and order. While the first blocks on a page may contain clear, bold info about you and/or your services, later blocks may encompass signups for newsletters or freebies that people who have made it further down the page may be interested in.
Today, I’m going to cover the most common and important types of Squarespace blocks that you can use on your website to communicate clearly with your audience and convert visitors into customers!
Below is the full list you can find inside Squarespace.
Basic beginner blocks every Squarespace website will use
Text
Text blocks are perhaps the MOST common types of blocks used on websites. Anything you can read on a website - from titles to paragraphs of content - are text blocks.
These blocks are used to convey some sort of information to a site visitor - whether it be information about their services, their background, or how to get in touch.
Image
Image blocks are also very common Squarespace blocks. As you may have guessed, just like text blocks, image blocks are used whenever you see an image on a website page.
The best part is that there are multiple different image layouts you can choose from.
Oftentimes, website pages will have image blocks placed in order to show relevant photos of customers, products, general stock images, or headshots of the business owner.
Before you uploading images to your Squarespace website, you’ll want to optimize all photos to load fast for SEO purposes.
Spacer
Spacer blocks are used to create space between other blocks so website pages don’t look cluttered or crowded.
As a Squarespace website designer, I can say that spacer blocks are probably one of most underrated blocks.
I use spacer blocks all the time in my designing work to ensure that my clients’ websites offer easy-to-read, aesthetic experiences instead of sections of crammed text and images.
While you can certainly overuse spacer blocks (making it look like there is nothing way to ensure visitors don’t lose their place.
Line
Line blocks can be used a couple different ways.
I typically use a full horizontal line that spans the full width of a page to show separation between blocks of content that don’t directly relate.
But sometimes, I use line blocks as a visual element if I have just text in one section, whether it’s between two paragraphs or on top and bottom of the text block.
You can totally play around with this block, which is awesome when it comes to creativity during the design process.
Button
Button blocks are just what they sound like - buttons!
Buttons are essentially aesthetically-pleasing links that can lead to other places on your website (including other pages) or to anywhere else on the Internet!
Buttons can be used for many reasons:
Send a site visitor to another page on a website
Sign up for a free offer
Set up a consultation call
Buttons are much more strategic than text links (here’s why!).
Social Links
Social links blocks are used on websites to link a business’s or brand’s social media accounts.
This is especially nice for anyone who stumbles across your website on a smartphone or tablet, allowing them to pull up your accounts and give you a “follow” with just a few clicks!
Search
Search blocks are also known as search bars, and though they’re primarily used by visitors to search your content-rich blog posts by keyword, they can work on your whole website.
For example, if someone is looking to see whether you offer social media management services, they can easily type that phrase into a search bar on your website to see if you mention it in any blog posts or on your services page.
It’s pretty handy!
Here you can see all the above being used on a page. I used the spacer block to make the search bar smaller.
Form
There are a variety of uses for form blocks, including surveys, order forms, and contact forms.
Whenever you see a “Contact Me” line of text (in a text block!) followed by boxes where you can enter your name, message, and click “submit,” congrats! You’ve found a form block.
Newsletter
Newsletter blocks are used to collect information for email list opt-ins.
This is one of my favorite Squarespace blocks to use on my clients’ websites because it allows visitors an easy way to download your freebie and receive emails regarding their services.
Having a way for someone to “opt in” is essential if you want to capture your website visitors’ information and make more sales!
These blocks usually have a space for you to enter your email address and click “I’m in!” or “Sign up!”
You can directly connect the newsletter form to your Mailchimp account. If you have another email marketing platform like Convertkit or Active Campaign, you’ll have to either use a tool like Zapier to connect the two platforms or embed a form from your email marketing service.
Advanced Blocks for CSS Customization
Besides using normal Squarespace blocks to build website pages, you can also do other things with them by doing more advanced CSS customization - also using Squarespace blocks.
Below, I’ll detail a few to help you get started:
Markdown
Markdown language is used to add a flair to text on your website pages, such as to make it bold, italicized, or insert links. Though Squarespace offers easy ways to do this in its text editor (which looks a lot like Microsoft Word’s toolbar,) you can also dictate how your text should look using this language.
I commonly use the markdown block to add a dropdown section for my clients’ frequently asked questions.
Embed
Embedding happens when you insert outside links, videos, images, etc… into your website content. If you want to add links to Facebook posts, tweets, Instagram photos, or other websites’ pages, use embed blocks! You can view more info on embed blocks here. (Note: Don’t use embed blocks just to add videos! Use video blocks instead.)
Code
Lastly, code blocks are used when you want to add custom code to your website. Embedding third-party widgets (such as third-party forms, third-party payment processors, etc…) is done using code blocks - and the sky is the limit as far as customization goes!
You can also use the code block to style fonts and add other fun design elements to your website, like vertical lines or customized forms.
If you’re ready to take your coaching or creative business to the next level with a Squarespace website designer who is going to build your dream website, I’VE GOT YOU!
You might also love these Squarespace blog posts…