Customizing icons in your social links block

Enhance your website's social link block effortlessly with SquareKicker, the must-have extension for Squarespace web designers. This powerful tool enables you to customize icons, ensuring flawless brand cohesion.

Elevate your design further by incorporating engaging hover effects, captivating visitors' attention and encouraging prolonged interaction with your social links. SquareKicker empowers you to create a dynamic and impactful social link block, enhancing your site's appeal and reinforcing your brand's identity.

How do I customize the social links on my website?

  1. Open SK tools

  2. Select customization

  3. Add hover effects

Accessing SquareKicker tools is easy. When you're in edit mode in your Squarespace website, simply look for the SK icon within the social links block.

Once inside the SquareKicker extension, a world of customization awaits. Explore options to tailor Icons, Background, Border, Position, Spacing, Shadow, and Effects. Let's delve into the Icons feature specifically.

Within Icons, unleash your creativity by customizing Logo, Background, Border, Effects, and Position. Click into each option to effortlessly add your desired customizations to the element. Elevate your social links with unique touches that resonate with your brand.

Adding hover to social link block icons

Take your icon customization a step further by incorporating engaging hover effects. These effects serve as an excellent way to captivate visitors' interest in specific areas of your website. Not only do they add visual appeal, but they also contribute to increased visitor engagement and extended dwell time on your page. Learn more about dwell time and how it can benefit your website.

To add hover effects, follow these simple steps: Select Logo, Background, Border, Effects, or Position, then click the yellow lightning bolt located in the top right corner. Once activated, the bolt turns blue, signaling that you're in hover mode. A banner alert confirms you’re now editing in hover mode. Any changes made in this mode will show in the finished design when your visitors hover over the element.

Feel free to apply multiple hover customizations. To exit hover mode, simply click the lightning bolt again or click apply to save your changes and close the editing tools. Below is a quick example demonstrating the addition of hover effects to icons within a Squarespace social links block. Elevate user interaction and make your social links stand out with these dynamic hover enhancements.

Previous
Previous

Create and customize a desktop overlay menu

Next
Next

How to add more colors to your Squarespace color palette