How to Add a Countdown Timer in Hostinger Website Builder

ByBen
Go to Hostinger.com
Get Hostinger Free Courses

Adding a countdown timer to your website can be a great way to create urgency and boost engagement. Whether you’re announcing a sale, a special event, or a new product launch, a countdown timer can help you capture visitors’ attention. In this guide, I’ll show you how to add a countdown timer in Hostinger Website Builder step by step.

Step 1: Log Into Your Hostinger Account

To get started, log in to your Hostinger account and navigate to the “Websites” section. From there, select the website you want to edit and click on the “Edit Website” button.

Step 2: Add an Embed Code Element

Once you’re inside the website editor:

  1. Click on “Add Element” (or the plus icon on the left-side menu).
  2. Scroll down to the “Embed Code” section.
  3. Drag and drop the “Embed Code” block onto your page where you want the countdown timer to appear.

Step 3: Insert the Countdown Timer Code

  1. Click on the “Enter Code” option inside the embed block.
  2. Delete the default placeholder text.
  3. Copy the countdown timer code :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            color: #333;
        }
        .timer-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            max-width: 400px;
            width: 100%;
            /* Remove fixed height to allow for dynamic height */
            min-height: 150px; /* You can set a minimum height if needed */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        h2 {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }
        #countdown {
            font-size: 3rem;
            font-weight: bold;
            color: #ff5733;
            display: inline-block;
            padding: 10px 20px;
            background-color: #f4f4f9;
            border-radius: 10px;
            border: 2px solid #ff5733;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .unit {
            font-size: 1.5rem;
            color: #888;
        }
    </style>
</head>
<body>
    <div class="timer-container">
        <h2>Limited Time Offer Ends In:</h2>
        <div id="countdown"></div>
    </div>

    <script>
        let interval;
        const targetDate = new Date("2025-02-17T23:59:59").getTime(); // Set your desired end date & time here

        function updateCountdown() {
            const now = new Date().getTime();
            const timeLeft = targetDate - now;

            if (timeLeft <= 0) {
                document.getElementById("countdown").innerHTML = "Time's up!";
                clearInterval(interval);
                return;
            }

            const d = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
            const h = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const m = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
            const s = Math.floor((timeLeft % (1000 * 60)) / 1000);

            document.getElementById("countdown").innerHTML = 
                `${d} <span class="unit">d</span> ${h} <span class="unit">h</span> ${m} <span class="unit">m</span> ${s} <span class="unit">s</span>`;
        }

        updateCountdown();
        interval = setInterval(updateCountdown, 1000);
    </script>
</body>
</html>
  1. Click “Apply” to save your changes.

Step 4: Customize the Countdown Timer

Once you have added the countdown timer to your page, you can customize it to fit your needs:

  • Set the Target Date & Time: Look for the line in the code that says “Set your desired end date and time here” and adjust it accordingly.
  • Modify the Text: If you want to change the text displayed with the countdown timer, use the “Find” function (CTRL + F or CMD + F) to locate and edit the text in the code.
  • Change the Timer’s Color: You can customize the color of the countdown timer by replacing the color code in the CSS section. Use a website like HTML Color Codes to find the exact color code you want.

Step 5: Publish Your Website

Once you’ve made all the necessary edits, publish your website to see the countdown timer in action. If the timer doesn’t appear in the editor, view the live website to check its functionality.

Final Thoughts

Adding a countdown timer in Hostinger Website Builder is an easy way to add a sense of urgency to your website. Whether you’re promoting a sale, launching a new product, or counting down to an event, this simple tutorial will help you set up and customize your countdown timer with ease.

If you have any questions or need further assistance, feel free to leave a comment below. Also, check out my free Hostinger Website Builder course to learn more about designing and managing your website efficiently!

📚 Get My Hostinger Course for Free: https://university.bensexperience.com
🎓 Join my University (Free): https://university.bensexperience.com

For more tutorials, stay tuned and subscribe to my YouTube channel!

Similar Posts