Getting started with SquareKicker Tools

Transcript

In this video, we will explore SquareKicker's tools inside a Squarespace website, and look at the details for understanding the SquareKicker menu, including hover features, the device toggle, the indicator dot system and the reset button. This will ensure you're ready to hit the ground running on your website project.

There are four places to find the SquareKicker.

For site-wide and page tools, click the SK button in the upper right corner of your website. Sometimes you may see a small flashing dot on your SK button. This will flash blue if your site is saving customizations to the SquareKicker server, or SquareKicker is saving customizations to your site.

The red indicates SquareKicker is disabled and green means you have a notification.

Page tools are found next to site on the main menu.

This will affect changes on the current page you have open.

Each Squarespace section has a specific set of SquareKicker tools, these are located in the Squarespace section toolbars. Simply click the SK button to open the tool set.

Similar to sections, each block has a unique set of tools related to the blocks type you're working on. So it pays to take some time to explore them. When you're beginning with SquareKicker

To set a design change for a specific screen size you can do so by navigating to the screen size, using the device toggle in the upper right-hand corner of the SquareKicker menu. Changes made inside the selected device settings will affect that screen size and smaller. For example, designs made with the desktop sitting will make changes to every screen size unless a unique change is made on a smaller device, such as tablet, which will overwrite the desktop settings for tablet and mobile.

Advanced tools are located next to the design tab in the SquareKicker menu. These are premium features available on Pro, Sesigner and Agency plans only.

Presets are a time-saving premium feature allowing you to save customizations from a specific block or section and reuse these sittings elsewhere. This is a powerful feature, allowing you to add customizations at lightning speed.

For more information on presets, check out the tutorial on our website.

Hover animations can be applied to a specific element. And a lightning bolt will show on your menu when this is available. When you click the hover icon, your SquareKicker menu will turn blue, and now any design changes you make will show when you hover over their element. Click the hover icon again to return to the design seatings.

A helpful feature built into SquareKicker is the indicator dots. You will see these pop up throughout your menu as you work with SquareKicker. They showed the lift of any tool that you've added customizations to. You can see here, I have a yellow dot indicating that I have made some design changes using this tool.

A purple dot will show where a preset has been used and a blue dot if a hover state was added. These allow you to quickly see we have applied SquareKicker customizations.

On the other side of the title is a reset button. If you wish to remove SquareKicker changes, hover over this reset icon, pause and click. All SquareKicker could changes made with that tool will be reset.

If you would like a more detailed look into specific tools, be sure to check out our tutorials.

Previous
Previous

Connecting a Website to SquareKicker

Next
Next

Managing Websites in Your Designer Plan