Combining Canva with Squarespace - Part One

Pull up a chair and get comfortable as we dive into the first chapter of our free online Squarespace & Canva course.

This video course is all about mixing and matching Canva with Squarespace, a blend as harmonious as coffee and cream, but this time we're serving it up in the realm of website design. In this kick-off part, we're not just talking about the basics; we're peeling back the layers to understand the 'why' behind the combination. Plus, we're sprinkling in some nifty, down-to-earth tips and real-deal examples to get your creative juices flowing.

Picture Canva as your digital artist's loft. It's a space where you can turn ideas into custom graphics from your web browser or on the go using their apps. No fancy equipment is needed, just you, your device, and a dash of creativity. Canva is your go-to tool for sprucing up anything visual, from social media posts to event invitations, and it's all just a click away.

Now, let's shift gears to Squarespace. Think of it as your virtual architect's workshop. You've got the power to create sleek and stylish websites, again all from your browser. It's your digital toolbox for building, tweaking, and perfecting your online presence. It's like being handed the keys to your own online real estate and saying, "Go on, make it your own!"

Here's where the fun part starts: we're throwing these two into a blender to create a cocktail of bespoke web design. This combo gets you more unique and stylish effects than if you were rolling with Squarespace. It's like taking your favourite pizza and adding your favourite toppings - it elevates the whole experience. By the end of this course, you won't just understand the nuts and bolts of web design; you'll be able to add your own creative flair.

But we're not stopping there. Oh no, we're going to show you how to break free from the traditional boxy approach to website design and add a little more swing to your step. By merging the creative possibilities of Canva with the structure and functionality of Squarespace, you're in for a smooth journey towards a more vibrant, engaging website that truly speaks your language. So fasten your seatbelt, turn up the volume, and let's get this show on the road..

Why and when do you need to connect Canva and Squarespace?

You can create an effective and professional website with Squarespace alone by using stock images and graphics to get what you need across to your viewers.

However, sometimes your brand might not fit into the basic Squarespace templates. For example, you may have a very playful and creative brand, and therefore to keep brand consistency, you may not want to have straight lines around your banner image. This is where we can use Canva to get these kinds of effects.

What are the potential drawbacks of this approach that you need to consider?

Combining Canva with Squarespace comes with a few trade-offs. For example, if we're using custom graphics, that may increase the load time of the page because transparency and using PNG files instead of JPEGs can sometimes mean larger files for the same effect. If our home page takes 15 seconds to load, there are a few issues. Firstly, Google isn't going to react well to long load times, so you won't appear in search engine rankings as competitively as you would otherwise. Secondly, your end users might not want to wait that long for your site to load, and they may leave your site and go to another one, such as a competitor.

We have to pick the right time to use these effects and get the balance right. 

Another issue is if we're trying to keep the file sizes small to ensure the load time isn't increased, we may end up with pixelation and problems with image quality. 

There are also technical constraints when we're using custom background graphics to achieve certain effects. When we reduce these down to tablet size, particularly in portrait mode and mobile devices, we can come into problems unless we ensure our graphics are rigorous and responsive enough to cope with the differing screen sizes.

Examples of what we'll be covering in future parts of the course:

• Hero banners

• Background effects

• Background and cut-out image combinations

• Duotone, pixelation, and other image effects

• Text and image combinations

• Combining with plugins and templates

When we're combining all of these things together, it's amazing some of the effects we can get.

Here's an example of what we'll be looking at in more detail over the course. We have a classic 'hero banner' which has a background texture with the chalkboard effect. We have our title and the image which is floating on the background.

With this image, you might wonder why we want it to float on the background. Because we don't have a fixed constraint over the size of the banner, Squarespace will use that and reduce or expand the background to respond to desktop, tablet, or mobile screen sizes. By having the image floating, it will move closer and further away from the text as the screen size changes. When we hit the mobile breakpoint where it breaks down into single columns, the image will move below the text. This is just one example of how we can use multiple images in banners to get a very bespoke feel and do it effectively.

You could do a lot of this in Squarespace, but you'd still need the floating image to be a PNG file with a transparent background because you couldn't simply slice a square out of your banner and put it below otherwise, we'd see differences between the textures of the banner and the overlapping image.

This is just one example of the type of things we'll be looking at on this free course. We will cover the example here in more detail in future parts of the course with more live examples.

A final point - build out from the brand

When designing your website or custom graphics, every step of the way, we need to make sure they tie in neatly with our brand. If your brand is playful, you want your website and the graphics to reflect that. Of course, you can use custom graphics to stretch your brand and take it in new directions and types of campaigns but it always needs to stay true to the roots of the brand. For more on this concept, check out this article.

Check out the free Combining Canva with Squarespace course on the PixelHaze YouTube channel, and stay tuned for the next part of the series.