How to Add a Typewriter Text Effect in Hostinger Website Builder
Adding a typewriter text effect to your website can make your content more engaging and visually appealing. If you’re using Hostinger Website Builder, you can achieve this effect quickly with a simple HTML code snippet. In this guide, I’ll walk you through the process step by step.
Step 1: Log In to Your Hostinger Account
To begin, log in to your Hostinger account and go to the Websites section. Here, you’ll see a list of your websites. If you have multiple sites, look for the Hostinger Website Builder icon to differentiate it from WordPress or other platforms. Click Edit Website next to the site you want to modify.
Step 2: Add a New Section
Now, navigate to the section where you want to add the typewriter effect. If you don’t have a suitable section yet, create a new one:
- Click Add a New Section
- Choose a Blank Section
- Resize the section if needed
Step 3: Insert the Embed Code Element
Next, you’ll need to insert the Embed Code element:
- Click on Add New Element
- Select Embed Code
- Drag and drop it into your section
- Click to edit the embed code
Step 4: Add the Typewriter Effect Code
Delete the default placeholder text and replace it with the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typewriter Effect</title>
<style>
.typewriter-container {
font-family: Arial, sans-serif;
font-size: 24px;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid black;
display: inline-block;
animation: blinkCursor 0.8s infinite;
}
@keyframes blinkCursor {
50% { border-color: transparent; }
}
</style>
</head>
<body>
<div class="typewriter-container" id="typewriter"></div>
<script>
const text = "Welcome to Hostinger Website Builder!";
let index = 0;
function typeWriter() {
if (index < text.length) {
document.getElementById("typewriter").textContent += text.charAt(index);
index++;
setTimeout(typeWriter, 100);
}
}
typeWriter();
</script>
</body>
</html>
After inserting the code, click Insert Code to apply the effect. You should now see the text appearing in a typewriter style when you preview your site.
Step 5: Customize the Text Appearance
You can adjust the font, size, and color to match your website’s design:
- Font Family: Modify the font inside the website builder’s text settings
- Font Size: Adjust the size from the Typography settings
- Text Color: Change the color from the Background & Text Settings
Final Preview and Adjustments
After making all the changes, preview your website to see how the typewriter effect looks. You can make additional edits, such as changing the speed of the animation by modifying the setTimeout(typeEffect, 100); line in the script.
Bonus: Learn More About Hostinger Website Builder
If you’re interested in learning more about Hostinger Website Builder, I offer a free online course that covers everything from setting up a website to SEO, e-commerce, and integrating custom code.
🎓 Get access to my free Hostinger Website Builder course today! Click here
Do you have any questions? Let me know in the comments!
