Using Squarespace Blocks

As with any website builder/platform, there's a little bit of an experimental phase as you're getting started. These past couple weeks, my goal has been to walk you through Squarespace and make that experimental phase shorter and easier for you as you set up and customize your own site. I started the series with an overview of why I choose and recommend the platform, I shared how to get started by choosing a plan and template, and last week I covered setting up pages and navigation

Today I'm reviewing Squarespace Blocks, which allow you to add content to pages and blog posts. I've gathered the information and help links from the Squarespace site and I've compiled them all onto one page for your convenience. My hope is that this post acts as a helpful resource for those of you who are new to this platform. And for those of you who have been using Squarespace already, you might come across some new blocks that you weren't aware of before.

Using Squarespace Blocks | Elle & Company

Basic Blocks

Using Squarespace Blocks | Elle & Company

Text
The Text Block is the primary means of adding text to your site. It allows you to add headings, quotes, pre-formatted text, links, and lists.

Markdown
The Markdown Block allows you to add text using the Markdown language. To use this block, you should have knowledge of the Markdown language.

Quote
You can use the Quote Block to add styled quotes and testimonials to your site. Each template has a default style for the Quote Block that you can change in the style editor.

Video
The Video Block adds an externally hosted video to your site. It's important to note that Squarespace doesn't support uploaded video. When embedding a video using a URL, only YouTube, Vimeo, Animoto, and Wistia are supported. You can use the embed code for other hosting services.

Image
The Image Block adds a single image to a page or blog post.

Audio
The Audio Blocks add 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
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 behavior are consistent across all templates.

Using Squarespace Blocks | Elle & Company

Slideshow
The Slideshow Gallery 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. 

Carousel
The Carousel Gallery Block adds a gallery of images and videos to a page or blog post in a horizontal strip without any space between the items. 

Grid
This block adds a gallery of images and videos to a page or blog post in a symmetrical grid.

Stacked
The Stacked 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 item. 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 images, or events) in magazine-style layouts.

Using Squarespace Blocks | Elle & Company

Wall
The Wall Summary Block presents your content in a masonry-style grid. The masonry design is growing increasingly popular on the web, you you've likely seen it before, like on 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. 

Grid
The Grid Summary Block presents your content in an even grid.

Carousel
The Carousel Summary Block presents your content in a slideshow-like format, with a set number of items at a time and arrows for navigation. This is a great option if you want visitors to browse through any featured content in a scrolling carousel.

List
The List Summary Block presents your content 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.

 


Filters and Lists Blocks 

Using Squarespace Blocks | Elle & Company

Search
The Search Block allows visitors to search for content on your site. You can configure the search block to return results from across your site or limit results to one content collection.

Content Link
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
You can use the Button Block to add buttons and call-to-actions on to your site. Button blocks can link to content on your site, external content, or a downloadable file.

Tag Cloud
The Tag Cloud Block displays tags and categories from a blog, gallery, album, or product page in a graphic cloud formation. You can display the tags in alphabetical order, by weight, or by activity. The Tag Cloud Block is an eye-catching way to display the subjects of your blogs or galleries and gives visitors an interesting option to  discover the topics you cover. It's common to place this block in a sidebar.

Tag List
The Tag List Block creates a link index of tags from one blog, event, gallery, or products page. When a visitor clicks a tag link in the block, they'll see all items with that tag. This is a great way to help visitors discover content by interest or topic. It's common to place this block in sidebar.

Author List
The Author List Block displays links to authors who've contributed content to the selected page. Clicking an author's name will display a sorted list of their content.

Category List
The Category List Block creates a link index of categories from one blog, event, gallery, or products page. When a visitor clicks a category link in the block, they'll see all items in that category.

Month List
The Month List Block creates an index for your blog, event, gallery, or products page content organized by year and month. When a visitor clicks a month link in the block, they'll see all items published in that month. This is a great way to help visitors discover content by publication date. It's common to place this block in a sidebar.


Commerce Blocks

Using Squarespace Blocks | Elle & Company

Amazon
The Amazon Block displays and links to an item on Amazon. This is a great way to promote your own items for sale or link to any other item you want. For example, if you're promoting a book, you can add an Amazon Block to link to the book. If you're reviewing a blog post, you can add the Amazon Block at the end of the post. If you participate in Amazon's affiliate program, you can add your affiliate tag to your site and use it with the Amazon block.

Product
The Product Block adds a product from your Squarespace ecommerce store to a page or blog post. This is a great way to promote a product or display products in different combinations than your product pages. Before using the product block, you'll need to add products to a products page.

Donation
You can use the Donation Block to allow visitors to donate to your cause or organization. The donation block works through the Squarespace commerce platform and uses Stripe to deposit donations to your bank account. This block is available on all plans.


Social Blocks

Using Squarespace Blocks | Elle & Company

Twitter
The Twitter Block displays your most recent tweets and a follow button for your profile. This is a great way to integrate your Twitter account with your site. The Twitter Block displays your most recent tweets, but won't display conversations. Replies to tweets won't display in the Twitter Block. If your tweets are password-protected, the Twitter block won't be able to pull your tweets.

Foursquare
The Foursquare Block displays a feed of your Foursquare check-ins. 

Social Links
Use the Social Links Block to add social icons that link to your social media profiles on any page of your site. 

RSS
The RSS Block adds a link for the RSS feed of a blog page on your site.

500px
The 500px Block displays images from your 500px account on your site.

Instagram
You can use the Instagram Block to display images from your Instagram feed on your site. This is a great way to create a gallery of your Instagram photos without using gallery blocks or gallery pages.

Flickr
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
You can use the SoundClound Block to embed tracks, playlists, and profiles content from SoundCloud.


More Blocks

Using Squarespace Blocks | Elle & Company

Spacer
The Spacer Block adds an adjustable amount of space between blocks. This is the primary method for adding and resizing blocks and images on a page or blog post.

Line
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 other elements.

Form
Use the Form Block to add a form to a page that collects information from visitors. You can use this to create a survey, poll, signup forms, or application.

Newsletter
The Newsletter Block lets visitors sign up for a newsletter or receive updates to your blog.

Map
The Map Block embeds a Google Map on your site. This is a great way to display the location of your business or event. You can use the Design tab to add color to your map and set its style.

Code
The Code Block allows you to add custom code to a page or display code on a page. The code block is a good option if you want to embed a third-party feature on your site.

Menu
You can use the Menu Block to display your restaurant's menu on your site. This is a great alternative to embedding .pdf menus on a site, which aren't always as SEO-friendly as on-page content. Squarespace scans the text you add in the menu block for certain formatting. If it detects certain patterns in how you entered the text, it transforms it into different sections of the menu.

Calendar
The Calendar Block organizes content collections into a calendar sorted by day. You can use the Calendar Block to display content from an events, blog, gallery, products, or album page.

OpenTable
You can use the OpenTable to add restaurant reservation booking to your site. Since the OpenTable block is designed to match the look of your site, it's a great alternative to OpenTable's reservation widget. 

Bandsintown
The Bandsintown Block allows you to display tour dates from your Bandsintown profile. Visitors can RSVP to your shows and buy tickets through links in the block. Since the Bandsintown Block is designed to match the look of your site, it's a great alternative to any third-party widget.