How to Add a Digital Clock With a Cool Animation Effect in Hostinger Website Builder

Adding a digital clock with a cool animation effect in Hostinger Website Builder is a great way to enhance your website’s interactivity. In this guide, I’ll walk you through the steps to insert and customize a digital clock using a simple code snippet.

Step 1: Access Hostinger Website Builder

1. Log in to your Hostinger account.
2. Go to Websites and select your website from the list.
3. Click on Edit Website to open the website builder.

If you have multiple websites, you can distinguish between WordPress and Hostinger Website Builder sites by checking the small icons next to each one.

Step 2: Add a Custom Code Element

1. Inside the website editor, scroll to the section where you want to place the digital clock.
2. Add a new blank section (optional) and adjust its size as needed.
3. Drag and drop the Embed Code element into the section.
4. Click on Enter Code, delete any existing code, and paste the provided code

<div id="clock-container">
    <div id="clock"></div>
</div>

<style>
    #clock-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        font-family: 'Arial', sans-serif;
    }

    #clock {
        font-size: 40px;
        font-weight: bold;
        color: #fff;
        background: linear-gradient(45deg, #ff416c, #ff4b2b);
        padding: 10px 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(255, 65, 108, 0.5);
        animation: pulse 1.5s infinite alternate;
    }

    @keyframes pulse {
        0% { transform: scale(1); opacity: 1; }
        100% { transform: scale(1.1); opacity: 0.9; }
    }
</style>

<script>
    function updateClock() {
        const now = new Date();
        let hours = now.getHours();
        let minutes = now.getMinutes();
        let seconds = now.getSeconds();

        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;

        document.getElementById('clock').innerText = `${hours}:${minutes}:${seconds}`;
    }

    setInterval(updateClock, 1000);
    updateClock();
</script>

1. Click Embed Code to apply the changes.

Now, the animated digital clock will appear on your website, displaying the local time based on the visitor’s device.

Step 3: Customize the Digital Clock

Once the clock is embedded, you can customize it by editing the code. Here are some modifications you can make:

• Change the Clock Color: Adjust the color code in the provided CSS.
• Resize the Clock: Increase or decrease the font size for better visibility.
• Adjust Animation Speed: Modify the duration of the appearance effect.
• Add a Border or Shadow: Enhance the clock’s design with CSS styling.

These simple tweaks will allow you to tailor the clock’s look to match your website’s theme.

Finalizing and Publishing

After customizing your clock, click Save and Update your website. You can then preview it live to see the animated clock in action.

Conclusion

Adding a digital clock with a cool animation effect in Hostinger Website Builder is a quick and effective way to enhance user experience. This feature not only looks great but also provides real-time functionality for visitors.

If you have any questions or need help customizing your digital clock, drop a comment below! Don’t forget to check out my free Hostinger Website Builder course for more tutorials like this.