How to Add a Countdown Timer to a Canva Website
Want to add a countdown to your Canva wedding website? Or works for any website that has an upcoming offer or event.
It’s a lovely way to build a little excitement as the day gets closer, and you can change the colours and layout to suit your design.
In this tutorial, I’ll show you how to add a countdown using the Countdown Timer app in Canva. If you’re using one of my templates and already have a countdown in place, I’ll also show you how to change it to your own date.
You can follow the same steps for a birthday, engagement party or any other event you’re counting down to.
Watch the Countdown Tutorial
Follow along with the video, or work through the steps below.
How to Add a Countdown Timer to Your Canva Website
1. Open the Countdown Timer App
Already have a countdown in your template? Click the countdown, then click Edit in the toolbar above it. This opens its settings, so you can make your changes without adding another timer.
If not, open your Canva website and go to the section where you’d like your countdown to sit.
Click Apps in the left-hand menu and search for Countdown Timer. Choose the app with the 0:05 icon shown in the video.
You’ll see four tabs: Date, Content, Layout and Background. These are where you’ll set the date and change how your countdown looks.
2. Set Your Event Date and Time
Under Date, click the calendar icon beside Target date and choose your event date.
Then set the Hour, Minute and Second. For a wedding, you might want the countdown to finish at the ceremony time. If you’d rather count down to the start of the wedding day, use midnight.
Check the Timezone underneath. Choose the time zone where your event is taking place, especially if you’re planning a destination wedding.
Leave Repeat switched off for a one-off event.
3. Choose What Your Countdown Shows
Open the Content tab. Here you can choose which units to include, from years and months through to days, hours, minutes and seconds.
For a simple wedding countdown, select Days, Hours, Minutes and Seconds, and untick the others. You can leave seconds off if you prefer a simpler display.
Keep Unit labels switched on if you want words such as “Days” and “Hours” beneath the numbers. These help guests see what they’re counting down.
There’s also a Title option. In my design, I already have “We can’t wait to see you in” written above the countdown, so I leave the app’s title switched off.
4. Adjust the Colours and Font
Still in Content, scroll down to the colour settings. Click the colour circles to choose your colours, or enter a hex code to match your website.
Check both Unit labels color and Last label color so the last part of your countdown fits with the rest of the design.
Underneath, you can choose the Language and Font style from the available options.
I’m using a light countdown on a black background in this example. Choose colours that are easy to read against your own website background.
5. Check the Layout
Open the Layout tab to see the layout, height and spacing options.
If you’re editing a template and like how the countdown already looks, you can leave these settings as they are. If you’re adding a new one, adjust them to suit the space you’ve made for it.
You can also resize the countdown on the page after adding it.
6. Set the Background
Open Background. You can switch the countdown’s background and border on or off, and adjust the background colour and transparency when the background is enabled.
For the look in my example, switch Background and Border off. This lets the countdown sit directly over the black section I’ve already created in Canva.
If you’d like your countdown to have its own coloured box instead, turn the background on and choose a colour that suits your design.
7. Add or Update Your Countdown
Once you’re happy with the settings, click Add countdown to design.
If you’re editing a countdown that’s already in your template, click Update countdown instead.
Give it a moment to load, then check the result. If you want to change anything, select the countdown, click Edit, make your adjustments and click Update countdown again.
A quick note for template users: you may see a message saying the countdown was created by another Canva user and that updating it will use one countdown credit. This message appears in my recording too. Check the allowance shown in your app before continuing.
8. Resize and Move It Into Place
Drag the countdown into position and use the corner handles to resize it.
I’ve placed mine underneath the heading, with a little space around it so it’s easy to read.
If you change the units later, check the size and position again. Adding another unit can make the countdown wider.
9. Preview Your Website on Mobile and Desktop
Open Canva’s website preview and check both the phone and desktop views.
Scroll down to your countdown and make sure the numbers and labels fit neatly in the section. Pay particular attention to the phone view, where smaller labels can become difficult to read.
If it looks too small or cramped, go back to the design and adjust it before publishing.
10. Publish and Check the Live Countdown
Click Publish, or Publish changes if your website is already live.
Open the published website link and scroll to the countdown. Check that it loads and displays the units you chose. If you’ve included seconds, you’ll be able to see it ticking down.
Open the link on your phone too, so you can see how it looks for guests.
How to Change the Date on an Existing Canva Countdown
If you only need to change the date in your template, you can keep this really simple:
- Click your countdown and choose Edit.
- Open Date and choose your event date.
- Set the time and check the time zone.
- Click Update countdown.
- Check its position, then publish your changes.
You only need to visit the other tabs if you want to change the way it looks.
Why Does My Countdown Show So Many Minutes or Seconds?
Check which units you’ve selected in Content. In the recording, switching off units such as hours leaves much larger values in the smaller units that are still selected.
For a familiar countdown format, switch on Days, Hours, Minutes and Seconds, then click Update countdown.
Can I Match the Countdown to My Website?
Yes. You can choose from the app’s font options, adjust its colours and change the background and layout.
I like to add my heading separately in Canva. That gives me more freedom with the heading’s font and design, while the app handles the live countdown underneath.
Create Your Canva Wedding Website
If you’d like a starting point, my editable Canva wedding website templates have the sections laid out for you, ready for your own details and photos.
Add your date, personalise the design and follow the tutorial to get your countdown ready for the big day.
Shop Canva Wedding Website Templates
