How to Create Categories with Icons on Squarespace

S1862_How-to-create-categories-with-icons.jpg

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 options, (I believe)

 

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: 

  1. Content: point to your own content (choose one of your pages)
  2. Files: upload a file the user will download when they click the button
  3. 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!

 

 

Want to see the final product? There's an example of this type of layout on the top of my home page. There's also one on my Blog Archive page, which you can visit by clicking the button below:

Next time, I'm going to walk you through setting up a (hidden) Style Guide page, which will help you get the most out of your Squarespace Style Editor!

 

 

Have any other suggestions to add to this topic? Add yours in the comments below!

Katelyn Dekle

Studio 1862, P.O. Box 244, Calvary, Ga, 39828

I'm a freelance graphic designer. I've been designing for 10 years, and still love it! My passion is helping small businesses, startups and entrepreneurs become successful by providing professional branding and website design services.

What do you need help with right now? Visit my website for advice from my blog, sign up for my newsletter + access to freebies, or follow me on Twitter, Facebook, Instagram or Pinterest to stay connected! =) 

Follow