This Squarespace plugin is a shortcut in designing your page so you don't need to go back and forth opening your CSS code tab.

Blocks Classes

$25.00

This plugin allows you to add custom classes to Squarespace blocks (Text, Image, Summary, etc..)

Add To Cart

This plugin allows you to add custom classes to Squarespace blocks (Text, Image, Summary, etc..)

I've seen many times on Circles and Squarespace FB groups questions like: "I don't want to search for block-ids or want my client able to add styles for new created content.How to achieve that??".

Well, Squarespace has no mechanism to achieve this for this moment, and we have no ways to affect on this, as we need backend access to do this sort of things.

But we may save some classes config to Injections and then add them as soon as page loaded.And this is exactly what Blocks Classes plugin does. Yes, someone will be not ok with that, but it is enough for a number of cases.

So the plugin takes custom classes from Custom Css tab on site and allows to choose these classes for any Squarespace block (you may also add your own classes not listed in Custom Css, just add them after) and saves the config to Footer Injection.

After purchasing you will get the code you need to insert into Header or Footer Injection Tab. Notice that Blocks Classes plugin requires Sitewide Code Injection, a premium feature available only on Squarespace "Commerce" and "Business" plans. After adding plugin to site you may start to add blocks classes!

To set available custom classes you should use the template below. All classes between "/*===CUSTOMCLASSES===*/" lines will be listed as you current available classes. Setting custom --name value allows you to add more readable description to your classes, you may avoid this if not needed.

/*===CUSTOMCLASSES===*/
.grey-class{
  --name: "Add Awesome Grey color";
  background-color: #ccc;
}
.red-class{
  --name: "Red";
  background-color: #f00;
}
.green-class{
  --name: "Green";
  background-color: #0a0;
}
.yellow-class{
  background-color: #fe0;
}
.more-block-padding{
    --name: "Add more space around";
    padding: 5% 10%!important;
}
.more-marging {
  --name: "More margin";
  margin: 5% 0;
}
/*===CUSTOMCLASSES===*/