How to Add a Countdown Timer to Elementor (Free Alternative to Pro)

Elementor is the most popular WordPress page builder, but its built-in countdown widget is a Pro-only feature. If you're on the free version - or you simply want more control over the design than the Pro widget allows - there's an easy alternative. Build your timer in Rija, then drop it into any Elementor layout with the free HTML widget. You get full control of fonts, colours, backgrounds and animations, and it sits inside Elementor's columns and sections just like a native element. Here's exactly how to do it.

Why use Rija.io instead of the Elementor Pro countdown?

The Pro countdown widget is fine for basic timers, but it has trade-offs: it requires a paid licence, its styling options are limited to Elementor's controls, and it adds to the page weight that Elementor is already known for. A Rija.io embed gives you a richer design toolkit - 1,000+ Google Fonts, gradient and video backgrounds, digit tick animations, custom sizing, and a logo - while staying lightweight. It also works the same way on every site, so once you've learned it, you can reuse it across projects regardless of whether the client has Elementor Pro. If you are new to embedding code in WordPress, our WordPress countdown timer guide covers the basics.

Step 1: Create your timer

Open Rija and design the countdown. Set the end date and timezone, then style it: choose fonts, set digit and label colours, pick a background, and add a logo if you like. Click Publish and copy the embed snippet - you'll paste this into Elementor next.

Step 2: Add the HTML widget in Elementor

Edit your page with Elementor. In the widget panel on the left, search for HTML and drag the HTML widget onto your canvas - into whichever column or section you want the timer to live in. In the widget's content field, paste your Rija.io snippet. The countdown renders right there in the editor. Because it's inside a normal Elementor widget, you can use Elementor's spacing, alignment and responsive controls to position it precisely.

Step 3: Position, preview and publish

Use Elementor's drag handles to move the widget, and the Advanced → Responsive settings to fine-tune margins on tablet and mobile. Click the preview (eye) icon to see the live countdown, then hit Publish/Update. The timer counts down in real time for every visitor in the timezone you set. To change it later, edit the timer in your Rija.io dashboard and re-publish - the embed on your Elementor page updates automatically.

Styling and responsiveness

Since the visual design lives in Rija.io, you keep your Elementor layout clean. For responsiveness, set the HTML widget's column to a sensible width and let the timer scale within it; use Elementor's mobile editing mode to confirm the digits fit on small screens. If you want the timer centred, set the widget's text alignment to centre or give the column auto margins.

Troubleshooting

If the timer doesn't appear, make sure you pasted the snippet into the HTML widget (not a Text Editor widget, which can escape code). If a security or optimisation plugin defers or strips inline scripts, add an exception for the embed. And if the time is wrong, re-check the timezone you chose when creating the timer.