How to Use Canva to Add Flair to Your Squarespace Website

Squarespace Tips

Jul 11

Squarespace gets a bad rap for producing cookie-cutter websites. You know the kind, the ones that clearly were created from one of the free Squarespace templates with no originality incorporated.

There’s nothing wrong with the free templates Squarespace provides, and they are great for the needs of a lot of people. But why would you just pick a template, drop in your copy and images and then stop there? You can take it a step further by utilizing Canva (you can get a free account here) to give your website that custom feel.

Canva is an incredibly useful companion tool to use when designing your Squarespace website. If you aren’t familiar with Canva. It is a free design tool that makes graphic design for both experienced and novice designers a breeze!

So let’s get into a couple ways you can use Canva to make a truly stunning website!

1. Level up your images by making custom image layouts in Canva.

We can create this graphic in Canva and upload it to an image block on our website. It’s a easy way to add interest to your site.

Depending on where you will be using the image on your site, you may need to change the size of the document in Canva.

I usually use either a 1:1 image or a 2:3, so let’s look at both.

Step 1.

Create a new document in Canva. Let’s start with a 1:1. Now, you want to make sure your final image is large enough that it does not become pixelated when it is enlarged, but not so big that the file size slows down your website.

This example I created is 1500 x 1500 px.

Step 2.

Now that we have our blank Canvas to work on, open the “Elements” menu. For this example, I wanted to use the polaroid frame.

Any element with this blue sky background is a frame. The great thing about these are you can easily drag and drop any image into the frame.

When you find the one (or more) you’d like to use, just click them to add to your blank canvas and arrange them by dragging them into position.

You can also rotate and change the position of the elements if you want to move one behind the other.

Step 3.

I’d like to add something extra by including another element. From within the “Elements” menu, search for keywords you’d like. For this element I searched “abstract” and found this cute hand drawn element.

Add the element you choose and then further customize it by changing the color to match your brand.

Tip: Keep in mind, if you have a free account, you will want to use elements that don’t have the crown symbol next to them. These are only for pro accounts.

Step 4.

Now that the design is laid out, you can either upload your own photos to use and just drag and drop into the frame or you can search the photos menu for stock images to use.

Step 5.

When you’re happy with your design, you will want to save it for upload to your website. Click “Share” in the upper right corner and click “Download”. If you have a pro account, you will want to select “PNG” and “Transparent background”.

If you have a free account, you will not be able to download a transparent background. If this is the case, make sure the background color of your image matches the section color where it will be placed on your website. Otherwise, you will end up with a colored box around your image.

This is how your image will look if you don’t save as a PNG with a transparent background. Make sure your settings are set properly to avoid this.

Step 6.

Now let’s upload your image to your website. Click the “+” and select an the image block. Then you will upload your image. You can leave it as an inline image or you can further customize by changing the design to an overlap, collage, or any other design type available to you.

2. Create section banner images

You might have noticed several sections throughout my website where there are graphics behind the content. I’ve dropped an example below. Well, guess what? You can create these too! Let me show you how.