Squarespace is pretty awesome straight out of the box. However, there are times when you want to or need to break free from your template and do more. Like add a layered background image or create a really cool split layout.

When that happens, the most common solution is to create a custom background image in Canva. Or, if you’re code savvy (or don’t mind writing code) you take advantage of CSS (Cascading Style Sheets).

But let’s face it: Canva background images can make your website load slow, not to mention they don’t scale nicely on mobile devices. And custom code is great but not all of us have the time or the desire to write custom code.

So what’s a girl to do? Give up on her dream of having a great-looking website? Not necessarily.

Thanks to this nifty tool, you can create a truly amazing Squarespace website — without code.

In this post, I’ll explain what SquareKicker is, how it works, and give you a quick overview of what you can do with it.

Heads up: this post contains affiliate links which means I may earn a small commission if you use my link to make a purchase. However, I only promote products I truly stand behind and use myself.

What Is SquareKicker?

You can add all sorts of customizations to your website such as:

• split layout sections

• section dividers

• overlap blocks

• layered/collage look

• text highlight

• add a custom back to top button

• add box shadow to images

• and more

How Does SquareKicker Work?

Essentially, SquareKicker is similar to how Squarespace works. You’ll use a combination of sliders and drop-down tools to make your changes. In the background, SquareKicker will create the necessary code. This code is stored in your website’s Code Injection area and it’s also backed up on their servers. Watch the video below to get a sense for what’s possible with SquareKicker and how it works.

SquareKicker Video Review

Transcript: SquareKicker Review

Have you ever come across a website that looks so beautiful and has this super cool and creative layout and wondered how they do it?

Well in most cases, it's done with CSS; which stands for Cascading Style Sheets. And it's basically what controls the look of your website.

Now if you're not very code savvy or have zero interest in learning how to code, you might be wondering if you're stuck just using the basic layouts that are available to you through Squarespace.

And I have good news for you! You're not! Thanks to this awesome tool... plugin... extension... for Squarespace called SquareKicker.

And in today's video I want to talk a little bit about it and show you what you can do with it.

Basically, you install SquareKicker onto your Squarespace website and it allows you to make really cool modifications to your website without having to write a single line of code.

For example, this layout. Usually I would achieve something like this by writing CSS or by creating a background image in Canva, and then overlaying it, putting it as a background. And then adding the text box and adding the CSS for the text box to create this type of layout.

The problem with that is when you use an image like that, when you use the background that you made in Canva, it doesn't flow nicely when you resize it to a smaller screen.

Usually, it uh the images either get really smushed or they get cut off and it's not really clear what the background is. Not to mention, the more images you have on your website the slower your website loads.

The solution is, of course, to learn code. Learn CSS. But let's face it, not everybody wants to do that and if I'm being perfectly honest; sometimes even I as a designer don't really feel like writing lines and lines and lines of CSS just to achieve something.

So SquareKicker basically solves that problem because you can achieve a layout like this, with a simple... with a couple of simple clicks without having to learn code, or create an image background in Canva, or you know... contact a designer // developer to write the code for you, or anything of the sort.

So I want to show you what kinds of layouts you can create with this, and I'll also give you a little demo of how the tool works. And show you more, talk more about the features that it has.

So basically, I was able to achieve this very layered collage type look simply by placing two images into one section and setting one as the collage layout and pushing one a little bit to the side and off // above so that it stands out a little. And we get this nice layered look.

Then you can also make split sections like this without having to write code or fiddle with galleries or using image cards or anything of the sort. And the best part is, you can add any type of content into these sections.

So, as you can see, this one uses a background image with some text and a button; while this one uses a plain color background. Then you can create this cool section dividers, you can have an angle divider, you can also create a wavy divider like this, and you can also create background color behind text and a button; so that the text stands out more!

And it's easier to read if you have an image background that has a slightly busy background.

So basically once you install SquareKicker on your website, and you go into the image editing mode or page editing mode; you'll see that basically SquareKicker will load over not only over sections, but it'll also load over every element on the page. So if we click this little SK icon, now you get access to all the tools and all the options that you have for each particular image.

So when it comes to the image you can change the layout. You can play around with the layout. You can even crop or set the ratio for the images here, and you can control how wide the image actually is. And you can control the positioning of the image.

So as you can see, all I'm doing is dragging the slider up and down and that is basically moving the image on the page. And if you ever decide that you don't like a particular change that you've made, all you really have to do is press this undo arrow and it'll undo the changes for you.

And then you can also click Cancel to cancel out all the changes or you can click Apply to apply them now.

You can also customize the text that appears on the image. You can change the font family, the size, the color, the font weight, the line height; basically all the editing tools that you have in Squarespace for the text tools you can play around with them in SquareKicker!

And what's really cool, you can also add a highlight to the text, you can change the layout of the text, you can change how the text fits on the image, where it's positioned.

This particular image is a bad example because I don't have text on it.

And then you can also apply the changes to the block itself! So for this particular block, you can change the position you can move the entire block up and down. And this is how I was able to position it on the page the way I did.

You can change the spacing around the image, which basically makes the image smaller or it kind of sort of creates a zoom effect. You can change the image, so let's say I want to place this over the text, over the this collage part.

All I have to do is change this level, make this number bigger than what this block has, and it'll show up above it. If you're familiar with CSS, this is called the z-index.

So basically by modifying the z-index, we can change how the image is positioned on the page. Again I'm going to cancel out of this, and then for this block switch over because this one has more going on.

As you can see, I've added some styles to the image itself. I've changed the layout. Basically, I reduce the width of it and I change the positioning of it so that it's positioned more towards the edge of the screen.

You can also add a filter to an image. You can increase the blur so it's blurry.

You can change the brightness of the image. You can up or reduce the contrast, and you can also apply the grayscale filter to it, or the sepia filter to it and play around with how the image is styled.

You can also add the overlay to the image, which is useful if you want to make like the text stand out more. You can add a border, a shadow, you can control the visibility and lots of other cool things! And then you can also control the text that appears on the image!

So because this is a collage block, what I've done here is I've changed the width of the collage portion. And I've also changed how it's positioned and then, I've also adjusted some spacing between the headline and the rest of the text and the button in the overall padding to give it a more, to give it some more breathing room and space around it. And then I've also added a border around it, just a simple white border.

And one thing that's really cool is that you can use SquareKicker to basically create a rounded image, so you can crop your images into circles, and uh without having to do it in Canva or every... anywhere else! So that's really cool!

One other cool thing that SquareKicker makes it easy to do is, you can add a highlight to any text that you want! So basically, just by, let me quickly change the color of our header here, and then we're going to add a highlight. Let's say like that, and then you can also change the highlight height which basically controls how big the highlight is.

So you can make it bigger, you can make it smaller... yeah I think that looks fine. And then you can also change, uh, whether you want the text to be capitalized uppercase or lowercase or just leave it as none. And if we apply that now, our changes are saved.

And you can also use SquareKicker for sections, which basically allows you to change the background for the section, for the content on that page, or for the image. This is where you can also add those dividers that I showed you. And of course, with this layout tool you can create the sections, the split sections that I showed you on the page, and of course you can control visibility.

So which devices each section is visible on; so maybe you have a section that you don't want to show on mobile or tablet devices, or maybe you have something that you want to show on mobile but don't want to show on desktop devices.

And what's really cool about SquareKicker is that you can adjust the settings for each device type! So let me show you what this basically means. So this is how this section looks on desktop devices.

But if I click the SquareKicker icon and I select the tablet, you'll see that this is still visible, but as soon as I switch to the phone, you'll notice that that other picture is gone and all we have is this one picture with the text uh left over here. Because having that other picture, it will just look a little silly.

So we've changed it, changed it uh how it looks on mobile devices. And then also the same applies basically for these split section layouts, they display as a split layout on desktop, laptop, and tablet devices; but as soon as we switch to mobile they display stacked so that they don't look squished on smaller screens. So that's one feature that I really really like about SquareKicker and their tool!

And of course, everything else that they offer just makes your life so much easier if you want to have a unique course-based website without learning code.

How to Use SquareKicker To Create A Split Layout

So let me show you how you can create the split, for example, the split layout sections.

Okay, so we're going to start by adding a section and I'm just going to add one headline section.

Okay, so we have one section, we're going to add one more and we're going to make this a simple text section.

Yeah let's go with that one.

And the only thing I'm going to do here is going to change the background color of it.

So let's set this one to, I don't know, light one or right... yeah let's go with that one.

And now for this first section I'm going to hit the SK icon, and under Layout, I'm going to select half a width and click on Apply.

And for the other one, I'm going to do the same thing and hit Apply.

And just like that, we have a split layout with two sections that you can add all types of content to!

Now of course, you're not limited to just two. You can add, um, you can create like a third. Like not third, but like three split sections.

So let's set this one to one third, and you can set this one to either be like two thirds of it, or not.

This was three quarters, obviously that's not going to fit, but like two thirds. Or you can set it to be one third again.

Apply, and then, if you want to fill this up with a third section, you can add another section; um let's go with a headline again.

Go with that one and then hit the SK icon on that one, and under Layout select one third again.

Click Apply, and as you can see now we have essentially three sections right next to each other that create a nice effect on your website!

There's lots more that you can do with the extension, now this is a paid tool.

However, you do get a 14 day free trial.

So you can sign up for it, you can test it out on your website. You can see if you like it.

And I'm telling you you're gonna love it! Because it, it really allows you to do lots of cool stuff with it. And you can get really really creative with it.

And yeah, sign up for it and give it a test run! And see how you like it, and make your website stand out from the rest!!

That's it for this video and I'll see you in the next one!

SquareKicker Pros And Cons

Honestly, I tried really hard to find a con for using SquareKicker. And I couldn’t find one. SquareKicker is easy to install and use and it doesn’t slow down your website. So in a nutshell, I only have a list of pros for you:

• Easy to use

• Doesn’t slow down your website

• Changes are backed up onto their server

• Customize individual blocks as well as sections

• Optimize your design separately for desktop and mobile devices

SquareKicker Pricing

So now that you know how SquareKicker works, you might be wondering how much does it cost.

Once you decide to upgrade, you can choose between monthly or yearly billing.

If you have only one website, pricing starts at $12/mo and if you' have multiple Squarespace websites or if you’re a designer, pricing starts at $39/mo for 10 active websites.

It’s worth mentioning that your changes are saved forever so even if you decide you don’t want to use it, you can cancel your subscription and keep your customizations.

Final Thoughts: Is SquareKicker Worth It?

More posts like this:

Pin for later: