How to Create Categories with Icons on Squarespace
📌 Pin it!
How do you create categories with icons in Squarespace? It's actually pretty simple and I'll break it down into 3 easy steps.
Step 1 | Create your icon
I use Illustrator for this, but you can just upload a stock photo, or make an icon in an app like Canva (they have an app too), Typorama, Phoster, and many more like those.
I know a lot of people who don't use Adobe products like Canva, but for me, I prefer Piclab for uber-simple, on-the-go images if I want to add some quick text or my URL at the bottom of an image, though I do have & use Canva myself if I need an app with more capability than PicLab, while I'm on the go.
Snapseed (one of my favorite apps; read about it here!) allows you to add very simple text on your images too.
PRO TIP :: If you are using Illustrator, don't forget it has a Save for Web option that drastically reduces the file size, without losing the clear hi-res quality you want. To find it in:
CS6: go to File < Save for Web
Creative Cloud: go to File < Export < Save for Web (Legacy)
Step 2 | Add your icons to the page
On the page you want to have the icons, add Image Blocks next to each other, by clicking and dragging the image block (from the Add Block section of your page editor bar), and dropping them side by side. Keep an eye on that dark grey insert bar that pops up, showing you where you can place the block you're adding.
If you drag it too far to the left of an image that's already been placed, it will add the new image block to the left of everything in that page layout, automatically moving everything else to the right in order to make room for it.
If you only hover over the center of the image, the insert bar will change in height, showing you that it will place the new image block right next to that image block, on the same line.
Once you've added all the images, you can start to add your descriptions or buttons!
Step 3 | Add descriptions or buttons
There are 2 options here. If you want a description under each icon, then add a Text Block under each caption image, noting the placement of the insert bar, the same way you did when you wanted to add the Image Block in specific places (described in Step 2, above).
If you want to add buttons under each icon image, just select the Button Block from the Add Block section, and edit the settings for each block. Make sure you don't forget to add a link to each button, or it won't go anywhere! ;)
With buttons, you can choose the type of click action from 1 of 3 options:
Content: point to your own content (choose one of your pages)
Files: upload a file the user will download when they click the button
External: point to someone else's content, by pasting in the URL
Your button can point to a huge variety of places, including tags or categories from blogs, or even your shop!
Make sure you change the button text, choose your button size and alignment, then click Save. You're done!
Wish your website was easy to edit?
That’s why I primarily build websites using Squarespace, for myself & for my clients!
