A Beginner’s Guide to Squarespace Tag Cloud Block
Creatively show a list of your categories or tags with a Squarespace tag cloud blocks.
A tag cloud is a creative twist on a basic list. This collection of text based links shows a list of tags or categories for a selected collection. The size of each category/tag word reflects how often it's used. The bigger the word, the more popular the category or tag!
You can also choose how you want the tags to be displayed:
Alphabetical: Just like in a dictionary, all the tags appear in alphabetical order.
By Weight: This option uses the size thing again – tags used more often appear larger and "weigh" more in the cloud.
By Activity: This shows the most recently used tags with a bigger font, keeping your cloud up-to-date.
It's a fun way to add a visual element to your categories and help visitors discover content they might be interested in.
How to add a tag cloud block to Squarespace
Select edit on the top left-hand side of your website preview.
Click the add block option on a page section, or the plus sign inside classic editor.*
Select the tag cloud option form the list of content blocks
Double click on the tag cloud content block, or click once and select the pencil icon to open the content block edit options.
Select the collection you want to pull data from. This can be a blog, a store, or a list of events.
Choose the display type: tags or categories
Choose the sort option: alphabetical, by weight or by (recent) activity
Choose the number of tags or categories to display; from 5 - 100
*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*
Squarespace tag cloud design settings
Unfortunately we do not have a lot of options for editing the tag cloud content block style using Squarespace.
The text in a tag cloud will match the font family, style, and weight of your paragraph fonts assigned in your site style menu.
For all other design changes, you’ll need to use custom CSS.
How to customize the content in Squarespace tag clouds with CSS
CSS stands for Cascading Style Sheet and it’s a special type of code that you can use to customize Squarespace. To add any of these codes to your website, navigate to website and select website tools then custom css. Paste the code in the CSS window and press save. Reload your page to see the changes.
To learn more about CSS for Squarespace, visit tutorials.squarespace.com/learn
Increase the space between words by changing 5px to a larger value
.tagcloud-block ul li {
margin-right: 5px
}Change the color of a word on the tag cloud on a hover. This code will change it to red; update that color for your own site style!
.tagcloud-block a:hover {
color:red
}Where you can learn more about adding content to your Squarespace website
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog