How to Add a Glitch Text Effect in Hostinger Website Builder
If you’re building your website using Hostinger Website Builder and want to give your site some extra visual flair, adding a glitch text effect is a fun and easy way to do it. In this tutorial, I’ll show you exactly how to add a glitch text effect to any page using Hostinger’s embed code element.
Step 1: Access Your Website
First, log in to your Hostinger account. Click on Websites, and from the list of websites, select the one built with Hostinger Website Builder. You can distinguish these from WordPress sites by the small builder icon.
Click on Edit Website next to the correct project.
Step 2: Add a Blank Section
Inside the website editor, add a new blank section where you want the glitch effect text to appear.
Step 3: Use the Embed Code Element
From the left sidebar, click on Add Element, scroll to the bottom, and drag the Embed Code element into your new section.
Click on the box and select Enter Code. Delete the default code and replace it with the glitch effect HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YOUR TEXT HERE</title>
<style>
@keyframes glitch {
0% { text-shadow: 2px 2px 0 red, -2px -2px 0 blue; }
25% { text-shadow: -2px -2px 0 red, 2px 2px 0 blue; }
50% { text-shadow: 2px -2px 0 red, -2px 2px 0 blue; }
75% { text-shadow: -2px 2px 0 red, 2px -2px 0 blue; }
100% { text-shadow: 2px 2px 0 red, -2px -2px 0 blue; }
}
.glitch-text {
font-size: 3rem;
font-weight: bold;
color: white;
background-color: black;
padding: 20px;
display: inline-block;
animation: glitch 0.2s infinite alternate;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1 class="glitch-text">YOUR TEXT HERE</h1>
</body>
</html>
Click Embed Code to apply.
Step 4: Customize Your Text
Want to change the glitch text? No problem. Click Enter Code again, search for Your Text Here inside the code, and replace it with your own text. For example, “Ben’s Glitch Text Effect.” Click Embed Code again to update.
Step 5: Save and View Live
Once you’re happy with your section, hit Update Website and then View Site Live to see the glitch text in action.
Learn More With My Free Hostinger Course
If you want to get deeper into web design using Hostinger, I offer a completely free Hostinger Website Builder course. You’ll learn:
- How to create and design your site
- Manage SEO and eCommerce
- Use advanced features like custom code
- And build full websites for different industries
Join now at university.bensexperience.com and start mastering Hostinger today.
And if you found this glitch effect helpful, be sure to check out more of my tutorials for tips and design tricks!
4o
