How To Create Tabs in Hostinger Website Builder
If you want to improve your website’s organization, adding tabs is a great way to do it. In this tutorial, I’ll guide you through how to create tabs in Hostinger Website Builder, step by step.
Step 1: Log In and Access Your Website
- Log in to your Hostinger account.
- Click on Edit Website next to your site.
Step 2: Add a New Section and Embed the Code
- Click Add Section → Blank Section.
- Click Add Element → Scroll down and select Embed Code.
- Click Edit Code, remove the default code, and paste the HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Tabbed Content Section</title>
<style>
/* General Styles */
body {
font-family: 'Arial', sans-serif;
background-color: #f4f7fc;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.tabs-container {
max-width: 80%;
margin: 40px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Tabs Navigation */
.tabs {
display: flex;
justify-content: center;
margin-bottom: 20px;
border-bottom: 3px solid #e0e0e0;
}
.tab-button {
padding: 12px 30px;
cursor: pointer;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 5px 5px 0 0;
font-size: 18px;
color: #333;
margin: 0 10px;
transition: all 0.3s ease;
font-weight: 600;
}
.tab-button:hover {
background-color: #f1f1f1;
transform: translateY(-2px);
}
.tab-button.active {
background-color: #4CAF50;
color: white;
border-color: #4CAF50;
transform: translateY(-2px);
}
/* Tab Content */
.tab-content {
display: none;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Transition for tab content */
.tab-content.fade-in {
animation: fadeIn 0.3s ease-out;
}
/* Fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Responsive Design */
@media screen and (max-width: 768px) {
.tabs {
flex-direction: column;
}
.tab-button {
width: 100%;
margin: 5px 0;
}
}
</style>
</head>
<body>
<!-- Tabbed Content Section -->
<div class="tabs-container">
<!-- Tab Buttons -->
<div class="tabs">
<button class="tab-button active" onclick="openTab(event, 'tab1')">Tab 1</button>
<button class="tab-button" onclick="openTab(event, 'tab2')">Tab 2</button>
<button class="tab-button" onclick="openTab(event, 'tab3')">Tab 3</button>
<button class="tab-button" onclick="openTab(event, 'tab4')">Tab 4</button>
</div>
<!-- Tab Content -->
<div class="tab-content fade-in" id="tab1">
<h3>Tab 1 Content</h3>
<p>This is the content for Tab 1. You can add more detailed text, images, or other elements here.</p>
</div>
<div class="tab-content fade-in" id="tab2">
<h3>Tab 2 Content</h3>
<p>This is the content for Tab 2. Enhance your sections with better visuals or any other media.</p>
</div>
<div class="tab-content fade-in" id="tab3">
<h3>Tab three Content</h3>
<p>This is the content for Tab 3. Feel free to design each tab to match your website’s aesthetic.</p>
</div>
<div class="tab-content fade-in" id="tab4">
<h3>Tab 4</h3>
<p>This is the content for Tab 4. Feel free to design each tab to match your website’s aesthetic.</p>
</div>
</div>
<script>
function openTab(event, tabId) {
// Hide all tab content
const allTabs = document.querySelectorAll('.tab-content');
allTabs.forEach(tab => {
tab.style.display = 'none';
tab.classList.remove('fade-in');
});
// Remove the 'active' class from all tab buttons
const allButtons = document.querySelectorAll('.tab-button');
allButtons.forEach(button => {
button.classList.remove('active');
});
// Show the selected tab content and mark the button as active
const selectedTab = document.getElementById(tabId);
selectedTab.style.display = 'block';
selectedTab.classList.add('fade-in');
event.currentTarget.classList.add('active');
}
// Initialize the first tab to be active
document.querySelector('.tab-button').click();
</script>
</body>
</html>
- Click Embed Code to apply it.
Now, you’ll see your tabs section on the page.
Step 3: Customize Your Tabs
You can edit various aspects of the tabs to match your website’s design:
- Background Color: Change the background color from the body section.
- Tabs Container: Adjust the margin, padding, and background color.
- Tabs Buttons: Modify button colors, font size, and hover effects.
- Tab Content: Change the text, padding, and background color.
Step 4: Editing Tab Content
- Update the tab titles (e.g., Tab 1 → “Services”).
- Modify the tab descriptions inside the H3 tag.
- Ensure each tab button points to the correct tab content.
Step 5: Adding New Tabs
To add more tabs:
- Copy an existing tab container div and update the number (e.g., Tab 3 → Tab 4).
- Copy the corresponding tab button and rename it.
- Update the onclick attribute to match the new tab number.
Preview and Finalize
Click View Site to preview your tabs. Make any final adjustments to spacing, design, or text as needed.
Learn More
If you want to master Hostinger Website Builder, check out my free course:
📖 Get My Hostinger Course for Free → https://university.bensexperience.com
By following this guide, you can create and customize tabs in Hostinger Website Builder effortlessly! Have questions? Leave a comment below! 🚀
