How to Add Greetings Based on Time in Hostinger Website Builder

ByBen
Go to Hostinger.com
Get Hostinger Free Courses

Adding dynamic greetings based on time in Hostinger Website Builder can make your website more personalized and engaging. With just a few simple steps, you can display customized messages like “Good Morning,” “Good Afternoon,” or “Good Evening” to visitors based on their local time.

Step 1: Log in to Your Hostinger Account

First, sign in to your Hostinger account and navigate to the Websites section. Here, you’ll see a list of your websites. If you have multiple sites, look for the one built with Hostinger Website Builder and click Edit Website.

Step 2: Add a New Section

Once inside the website editor, add a Blank Section to your page. You can resize this section to fit your design preference.

Step 3: Insert Custom Code

To display time-based greetings, you’ll need to insert custom HTML code:

  • Drag and drop the Embed Code element into the section.
  • Delete any placeholder text inside the code box.
  • Paste the provided HTML code 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Greeting</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background: linear-gradient(135deg, #FF7E5F, #feb47b);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      color: white;
      text-align: center;
    }

    .greeting {
      font-size: 36px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      animation: fadeIn 1s ease-in-out;
    }

    .greeting span {
      font-size: 50px;
      color: #fff;
      text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
      animation: pulse 1.5s infinite;
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
        transform: translateY(-20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }
  </style>
</head>
<body>
  <div id="greetingMessage" class="greeting"></div>

  <script>
    function getGreeting() {
      const now = new Date();
      const hours = now.getHours();
      let greeting = "";

      if (hours >= 5 && hours < 12) {
        greeting = "Good Morning!";
      } else if (hours >= 12 && hours < 17) {
        greeting = "Good Afternoon!";
      } else if (hours >= 17 && hours < 21) {
        greeting = "Good Evening!";
      } else {
        greeting = "Good Night!";
      }

      return greeting;
    }

    // Display the greeting in the HTML
    document.getElementById("greetingMessage").innerHTML = `<span>${getGreeting()}</span>`;
  </script>
</body>
</html>
  • Click Apply or Save Changes.

Step 4: Preview and Adjust

Once you’ve added the code, preview your website. The greeting should change dynamically based on your visitor’s time zone. If the formatting needs adjustments, tweak the section’s size and placement accordingly.

Why Use Dynamic Greetings?

  • Improves User Experience: Visitors feel a more personal connection to your site.
  • Enhances Engagement: Custom messages create a warm and welcoming atmosphere.
  • Works Automatically: The greeting updates in real time based on the user’s local time.

Learn More About Hostinger Website Builder

If you want to explore more features like SEO, e-commerce, content management, and custom integrations in Hostinger Website Builder, check out my free Hostinger course. It covers everything you need to build and optimize your website efficiently.

🔗 Get Free Access to the Course

Let me know in the comments if you have any questions!

Similar Posts