Everything You Need To Know About Squarespace Blocks
If you are wondering what Squarespace blocks are then more than likely you either already have a Squarespace website, or you are thinking to sign up to Squarespace and are probably slightly confused.
Well worry not my friend, I was once in your shoes - confused and new to Squarespace - and it took me some time to understand what Squarespace blocks actually are.
It's one of those things I learnt along the way and so to save you time, I wanted to write a detailed post to help you learn about Squarespace blocks. The information I have pulled together is based on my learnings, reading numerous blog posts, and also information I have found on the Squarespace site.
What are Squarespace blocks?
Squarespace blocks are the bones of your Squarespace website. They allow you to add content to pages and blog posts to create custom layouts for your Squarespace website.
There are a number of different blocks which will allow to you to add different types of content, let's get started on the Basic Blocks.
Basic Blocks
You can see there are 7 types of basic blocks.
Text Block:
The Text Block is the primary means of adding text to your site. You can use Text Blocks to add headings, links, lists, quotes, and preformatted text.
Markdown Block:
The Markdown Block lets you add text to your site using the Markdown language. The block supports lists, links, bolded and italicised text, and block quotes.
Quote Block:
You can use the Quote Block to add styled quotes and testimonials to your site. Most templates have a default style for the Quote Block that you can change in the Style Editor.
Image Block:
The Image Block adds a single image to a page or blog post. You can resize and arrange multiple Image Blocks to create unique page layouts. Using this block is a great way to break up text and personalize your site.
Video Block:
The Video Block adds an externally hosted video to your site. When embedding a video using a URL, only YouTube, Vimeo, Animoto, and Wistia are supported.
Audio Block:
The Audio Block adds a single audio file in a player to a page or blog post. You can upload a file from your computer or link to an externally hosted file.
Embed Block:
The Embed Block adds external content to your site by using links to tweets, videos, and more.
Gallery Blocks
Gallery Blocks add galleries of images and videos to pages and blog posts. You can upload images, add Getty Images, embed video, or display content from an existing Gallery Page. There are four Gallery Blocks, and their design and behaviour are consistent across all templates.
Slideshow Gallery Block:
The Slideshow Block adds a slideshow of images and videos to a page or blog post. Clicking an item will display the next image or video in the gallery. Clicking a video will play the video.
Carousel Gallery Block:
The Carousel Gallery Block adds a gallery of images and videos to a page or blog post in a horizontal strip without padding between the items.
Grid Gallery Block:
The Grid Gallery Block adds a gallery of images and videos to a page or blog post in a symmetrical grid.
Stack Gallery Block:
The Stack Gallery Block adds a gallery of images and videos to a page or blog post in a single column with one pixel of space between items. Images and videos span the full width of the block.
This is a great option if you want visitors to scroll up and down your gallery. It's also a time-saving alternative to adding multiple Image Blocks on top of each other.
Summary Blocks
Summary Blocks present your content (blog posts, products, gallery or project images, or events) in magazine-style layouts. There are four Summary Blocks, and their design and behaviour are consistent across all templates.
Wall Summary Block
The Wall Summary Block presents your content (blog posts, products, gallery images, or events) in a masonry-style grid, ie, like Pinterest. It works by positioning items in the best layout based on the available space while reducing any gaps, giving it the look of a mosaic.
Carousel Summary Block
The Carousel Summary Block presents your content (blog posts, products, gallery images, or events) in a slideshow-like format, with a set number of items at a time and arrows for navigation.
List Summary Block
The List Summary Block presents your content (blog posts, products, gallery images, or events) in one column with thumbnails on one side and text on the other.
This is a great option if you want to display existing content in a linear, straightforward layout that may not be available in your template's design.
Grid Summary Block
The Grid Summary Block presents your content (blog posts, products, gallery images, or events) in an even grid. This is a popular option if you want to manually recreate the built-in grid designs.
Filter and List Blocks
Search Block
The Search Block adds a search field to your site. You can set the Search Block to show results from across your site or limit results to one content collection.
Content Link Block
The Content Link Block creates a visual link to a content collection or page. This is a great way to display content in multiple places on your site.
Button Block
The Button Block adds a button or call to action to your site. Button Blocks can link to your content, external content, or a downloadable file.
Tag Cloud Block
The Tag Cloud Block displays tags or categories from a Blog, Gallery, Album, or Products Page in a graphic cloud formation. You can display the tags in alphabetical order, by weight, or by activity.
The Tag Cloud Block gives visitors an eye-catching option to discover the topics you cover. It's common to place this block in a sidebar.
Archive Block
The Archive Block creates organized lists of links to blog posts, gallery images, products, and events. You can display content by tags, categories, author, and date.
This block encourages visitors to find content that interests them. You can use it to create a text-only index or add navigation to sidebars, footers, and other areas. The lists update automatically when you add, edit, or delete content.
Commerce Blocks
Product Block
The Product Block displays a product from a Products Page on a Regular Page or blog post with an optional Add to Cart button. This is an alternate way to display products from your store, letting you promote them on a homepage or create a customized layout different than your template's Products Pages.
Amazon Block
The Amazon Block displays and links to any item on Amazon. When a visitor clicks the block, they'll be directed to its page on Amazon. This is a great way to highlight an item you're selling, promoting, or reviewing without Associate links or third-party code embeds.
Donation Block
You can use the Donation Block to allow visitors to donate to your cause or organization. You can also use it to set up a customized cash gift registry on a wedding website.
The Donation Block appears as Donate button on the page. When a visitor clicks the button, they're led to a page where they can enter and submit a donation amount.
Chart Blocks
Chart Blocks for creating data visualizations on your site. Charts are great for explaining relationships between different series of data in a compelling way.
Bar Chart Block
The Bar Chart Block adds a bar chart or bar graph to a page or post. Bar charts are typically used to compare values and/or track their changes over time. You can compare multiple results for the same subject.
Line Chart Block
The Line Chart Block adds a line chart (line graph) to a page or post. Line charts are typically used to display changes over time. You can compare changes between multiple subjects by adding multiple lines.
Pie Chart Block
The Pie Chart Block adds a pie chart (also known as a pie graph or donut chart) to a page or post. Pie charts display data as “slices of pie” or parts of a whole. They’re useful for showing poll numbers, preferences, or percentages.
Social Blocks
Twitter Block
The Twitter Block displays a feed of recent tweets and a Follow button that leads to your Twitter profile. This block is a great option for embedding tweets on your site without third-party widgets.
Foursquare Block
The Foursquare Block displays a feed of your Foursquare check-ins.
This block is designed to display activity from a personal Foursquare account. It doesn't display information from a business listing on Foursquare like reviews or tips.
Social Links Block
Use the Social Links Block to link to social media profiles on any parts of your site that support blocks.
RSS Block
The RSS Block adds a link to an RSS feed of your Blog Page. It includes an RSS icon and the Blog Page's title. Clicking the icon opens a new page with the blog's RSS feed. Visitors can copy and paste its URL into any RSS reader. It's common to place this block in a sidebar.
500px Block
The 500px Block displays images from your 500px account on your site.
Instagram Block
You can use the Instagram Block to display Instagram photos on your site.
Flicker Block
The Flickr Block displays images from your Flickr account on your site. This is a great way to create a gallery of your Flickr photos without using Gallery Blocks or Gallery Pages.
SoundCloud Block
You can use the SoundCloud Block to embed tracks, playlists, and profiles content from SoundCloud.
More Blocks
Spacer Block
The Spacer Block adds an adjustable amount of empty space between blocks. You can use the Spacer Block to create padding and white space on pages and blog posts. The Spacer Block can also help resize images and other blocks.
Line Block
The Line Block adds a horizontal line (<hr> in HTML) between blocks on your site. This is a great way to break up text or visually separate content on pages, posts, sidebars, and footers.
Form Block
The Form Block adds a form to collect information from visitors. You can use the Form Block to create a contact form, survey, poll, signup form, application, and more.
Newsletter Block
The Newsletter Block adds a newsletter subscribe option to your site allowing your visitors to sign up to your newsletter.
Map Block
The Map Block embeds a Google Map with a location pin on your site. This is a great way to display your business or event's location.
Code Block
You can use the Code Block to add custom code to a page, blog post, sidebar, or footer. The Code Block is a good option if you want to embed third-party widgets or customize a page beyond what's possible with other blocks. You can also use the Code Block to display code snippets.
The Code Block renders HTML and Markdown.
Menu Block
You can use the Menu Block to display your restaurant's menu on your site. This is a great alternative to embedding .pdf menus, which aren't always as SEO-friendly as text directly on the page.
Calendar Block
The Calendar Block displays upcoming events and collection items, sorted by publication date. While the Calendar Block is ideal for displaying events from an Events Page, you can also use it to display chronological links to blog posts, products, gallery images, and album tracks.
Zola Block
Use the Zola Block to display a selection of items from your Zola wedding registry.
Opentable Block
You can use the OpenTable Block to add restaurant reservation booking to your site.
Bandsintown Block
The Bandsintown Block displays tour dates from your Bandsintown profile. Visitors can buy tickets through links in the block.
I hope this article was helpful and I hope it saves you time as well.
