How to Display Quotes That Change with Every Page Refresh in Hostinger Website Builder
If you want to display dynamic quotes that change with every page refresh in Hostinger Website Builder, this guide will walk you through the step-by-step process to implement it using custom code. This feature is great for adding inspirational quotes, testimonials, or any rotating text to engage visitors.
Step 1: Log in to Hostinger Website Builder
- Go to Hostinger.com and log in to your account.
- Navigate to the Websites section and select the website you want to edit.
- Click the Edit Website button to open the website builder.
Step 2: Add the Custom Code Element
- Click on Add Element or the plus (+) icon on the left menu.
- Scroll down and find the Embed Code element.
- Drag and place the element where you want the quotes to appear (e.g., the footer section).
- Click on Enter Code and delete any existing placeholder code.
Step 3: Insert the Code
Copy and paste the following JavaScript and HTML code snippet into the Embed Code box:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Today's Motivational Quote</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f9f9f9;
}
.quote-container {
text-align: center;
padding: 20px;
}
.quote-text {
font-size: 24px;
color: #333;
margin-bottom: 10px;
}
.quote-author {
font-size: 18px;
color: #777;
}
</style>
</head>
<body>
<div class="quote-container">
<div id="quoteText" class="quote-text"></div>
<div id="quoteAuthor" class="quote-author"></div>
</div>
<script>
const motivationalQuotes = [
{ text: "QUOTE", author: "AUTHOR" },
{ text: "QUOTE1", author: "AUTHOR" },
{ text: "QUOTE2", author: "AUTHOR" },
{ text: "QUOTE2", author: "AUTHOR" },
{ text: "QUOTE3", author: "AUTHOR" },
{ text: "QUOTE4", author: "AUTHOR" }
];
function displayRandomQuote() {
const randomIndex = Math.floor(Math.random() * motivationalQuotes.length);
const randomQuote = motivationalQuotes[randomIndex];
document.getElementById("quoteText").textContent = `"${randomQuote.text}"`;
document.getElementById("quoteAuthor").textContent = `- ${randomQuote.author}`;
}
// Call the function to display the quote when the page loads
window.onload = displayRandomQuote;
</script>
</body>
</html>
Step 4: Save and Publish Your Website
- Click on Embed Code to apply the changes.
- Update your website by clicking Publish.
- Visit your live website and refresh the page to see different quotes appear dynamically.
Step 5: Customizing the Quotes
- To add more quotes, simply modify the
quotesarray in the script. - Each quote should follow this format:
{ text: "Your quote here.", author: "Author Name" } - Ensure that each quote is separated by a comma, except for the last one.
Conclusion
Using this method, you can display quotes that change with every page refresh in Hostinger Website Builder effortlessly. This feature adds an engaging element to your website and can be used for motivation, testimonials, or rotating announcements.
Need further assistance? Drop a comment below or enroll in my free Hostinger Website Builder course to learn more advanced website-building techniques!
