Combining Canva with Squarespace – Part Five
Why This Matters
You’d be hard pressed to find anyone running a modern website who doesn’t want their visuals looking sharp, unified, and, let’s face it, a little bit stylish. Consistency across your images means you look like you know what you’re doing, even when you’re knee-deep in software. Hunting down banners, panels or services images that don’t jar with the rest of your site can quickly turn into a never-ending game of whack-a-mole.
Dragging the same old photos into Squarespace’s editor and endlessly fiddling with their filters can leave you with off-brand colours, muddy composites, and a nagging sense something is out of sync. That poses more than just an aesthetic issue; it can damage your credibility. If clients see lopsided design or mismatched colour grades, they start to wonder what else is out of alignment.
Duotone effects offer more than playful filtering. They unify your imagery, lock in your colour scheme, and create a deliberate, energetic vibe for your site. Striking, consistent images prevent your website from resembling a jumble sale. The right visuals speed up brand trust and make visitors stick around long enough to read the words as well.
Common Pitfalls
Too often, folks try to run before they can walk. Here’s where most hit the skids with Canva and Squarespace:
1. Skipping the Ratio and Resolution:
People grab images at any size, then stretch them to fit. The result? Pixel soup. If you want to look sharp, get the ratios right from the start.
2. Duotone Disaster:
Falling in love with Canva’s wild duotone presets only to discover they clash horrifically with the rest of your palette once on the site.
3. Inconsistent Colour Codes:
Applying slightly different shades across images, thinking nobody will notice. They will. On the web, it jumps off the screen.
4. Forgetting About File Types:
Uploading PNGs when JPGs would be sharper, or vice versa. Each has its place, and making the wrong choice impacts your site.
5. Sizing for Desktop and Ignoring Mobile:
Making everything look perfect on your 27-inch monitor, then discovering it looks like a postage stamp or blurry mess on a phone.
If any of this sounds chillingly familiar, don’t worry. Let’s iron it out.
Step-by-Step Fix
Step 1: Setting Up Your Canva Project Properly
First off, open Canva. Ignore every tempting template and go straight for ‘Create a design’ then ‘Custom size’. Set your dimensions at 600 by 400 pixels, which sticks to the 3:2 ratio that behaves itself on most modern sites.
If you’re taking up more screen real estate or have higher density hero images, scale the numbers up. Just keep the ratio locked. There’s nothing worse than loading a site only to watch your carefully crafted images stretch or shrink like cheap elastic. If in doubt, start large and scale down. It’s far easier than going the other way.
Keep a little cheat-sheet of your favourite size ratios for future projects. Don’t rely on memory. There’s always one image that slips through the net.
Step 2: Picking and Laying Out the Best Photos
Back in Canva, use the search bar in the Photos library to match your theme. Here, we’ll use ‘motocross’ for a bit of drama. Drag a few options onto your canvas. Try close-ups, silhouettes, and action shots for variety. The key is to keep a thread running through them. If your branding is bold and high-contrast, picking a washed-out stock photo won’t fit with the rest.
When you add each image, click and drag the corners until the picture fills the frame completely, letting nothing spill over the edge. Add new pages for each image, so you can whip through edits without doubling back.
Contrary to what the internet might tell you, picking different images for each panel isn’t reckless. Using the duotone effect on varied images helps maintain energy, while too many lookalikes make your site feel repetitive.
Step 3: Slapping on the Duotone Effect
Click your first chosen image, select ‘Edit Image’ from the top toolbar, and look for the ‘Duotone’ effect (you may have to scroll). Canva rolls out a host of preset duotones with names like ‘Peppermint’, but picking something punchy for its own sake isn’t the point. Your aim is to match or complement your site’s established palette, especially the colours on your headings, buttons, or logos.
Click through the presets to see them in action, but remember: presets are just a starting point. The real work is in customisation.
If you’re unsure about which duotone shade works best with your site, open your Squarespace editor in another tab and sample the background or accent colour you’ve already used. Screenshot it or use the colour pickers so you aren’t relying on your memory or good faith.
Step 4: Fine-Tuning Your Duotone for Consistency
Time to move beyond presets. Hit the settings icon beside your chosen duotone. Here you’ll get two choices: ‘Highlights’ and ‘Shadows’. Click the colour swatch beside ‘Highlights’ and use Canva’s colour picker to find the exact shade your site needs. Usually, this will be one of your brand’s accent or dominant colours. For motocross, this could be a jumpy orange or aggressive red.
At this point, copy the hexadecimal code (that 6-character string starting with #) for your highlight colour. Paste it somewhere you won’t lose it: notes app, sticky note, or right into Canva titles for safekeeping.
Set the shadows to black for maximum drama, or use a dark version of your chosen colour for a subtle effect. Repeat these colour settings for each image, dropping your saved hex code into the new highlight every time. This is how you avoid ending up with “nearly, but not quite” matches on your live site.
Don’t let perfectionism slow you down. It’s better to be consistent with a ‘good enough’ colour than to waste half a day in the weeds of the RGB spectrum.
Step 5: Downloading Your Images the Right Way
With your collection of hero images done, hit the download arrow at the top-right. Choose ‘JPG’ as the file type. This type handles gradients well, keeps the image size reasonable, and loads fast. Greyscale or high-contrast images shrink down nicely as JPG. Only use PNG if you need transparency, such as adding a shaped image over a coloured background in Squarespace.
If you only need a handful of images, download them individually. Canva zips larger batches, which can add unnecessary steps. Keep your downloaded images in a labelled folder where you can find them easily.
If you’re creating sets of images for different parts of your site, stick to naming conventions. A stray ‘Untitled(14).jpg’ will haunt you later.
Step 6: Uploading and Styling in Squarespace
Now, jump into your Squarespace site. In your chosen page, click ‘Edit’ and add a new section. Pick ‘Blank Section’ to give yourself complete control. Set the background colour to something understated (grey works, but match your site theme). Change the section height to small so your images don’t look marooned.
Create your columns: add horizontal lines and align them side by side. Under each line, tack on an image block, then upload your shiny new duotone images. When you stick to your 3:2 ratio, there’s no need to crop or resize — the images fit neatly.
If your images look blurry, don’t panic. Go back into Canva and export a size up, such as 900 by 600 pixels while keeping the same ratio. Replace your fuzzy image in Squarespace and refresh.
Put headings or captions beneath with a text block, using one of Squarespace’s heading options to keep structure and accessibility on point.
Dial in the content width controls. Too wide and your images get stretched; too narrow and they pile up vertically. For three equal images, ‘medium’ content width usually does the trick.
Step 7: Layering in Background Texture (Optional, But Satisfying)
If you want to add an extra bit of polish, try adding a subtle background texture to your image panel section. In Squarespace, choose a photo background and set it to a low opacity (30 to 40 per cent usually works). A light mud splatter, fabric weave, or geometric pattern is subtle enough to add depth without fighting your duotone images.
Crop or reposition your background photo using the built-in controls. Tweak the contrast and saturation for just enough impact. The golden rule is that a background should always support your foreground images instead of drawing attention away from them.
Don’t get too giddy with overlays. If in doubt, opacity is your friend.
What Most People Miss
Consistency isn’t glamourous, but it is king. Most folks get distracted by flashy Canva effects, or try to reinvent their palette with every update. Proper pros stick to a plan. They commit to one duotone and use it throughout every image for that page or section.
The real advantage comes from saving and reusing your hex codes. It might feel pedantic at the time, but your brand style guide (and your visitors) will thank you for not subjecting them to a “fifty shades of red” scenario.
Bonus: After uploading, check your images on both desktop and mobile. You want buttery smooth transitions between devices, not a jumble outside your monitor.
The Bigger Picture
Getting duotone images right in Canva and Squarespace improves more than just one panel or a single project. Once you develop this workflow, creating new banners, service images, or social graphics becomes a matter of minutes, not hours.
Consistency brings speed. It keeps your branding tight, makes site updates snappy, and shows your operation is professional, even if you built the site in your pyjamas.
And when you decide to do a site overhaul, you can batch process a fresh set of duotone images and get the results live before your coffee goes cold.
Wrap-Up
To recap: get your ratios right in Canva. Commit to one duotone look using hex codes and carry that through every image you need. Download as JPG for web sharpness, upload into clean, structured grids in Squarespace, and always preview your site in both desktop and mobile view. Add texture if it fits, but always keep your main images in the spotlight.
You can repeat this process each time, and as a result, your site stays tidy and stands out from lookalike designs.
Want more helpful systems like this? Join Pixelhaze Academy for free at https://www.pixelhaze.academy/membership.