🚀 Quick Start
Get your KloHost site live in under 30 minutes by following these 5 steps:
1
Download & Unzip the Package
Extract all files to a folder on your computer. You'll see all HTML pages, a CSS folder, and an images directory.
2
Rebrand to Your Business Name
Do a find-and-replace for "KloHost" across all HTML files and replace with your brand name. Update colors in the :root CSS variables.
3
Update Your Content
Replace placeholder text, pricing, team members, testimonials, and contact details with your real business information.
4
Connect Your Backend (WHMCS)
Update all CTA buttons and "Get Started" links to point to your WHMCS order pages. See the WHMCS Integration section below.
5
Upload & Go Live
Upload all files to your web hosting via FTP or cPanel File Manager. Point your domain DNS to your hosting server and you're live!
✅
Pro Tip: Use VS Code's built-in Find & Replace (Ctrl+Shift+H) to replace "KloHost" across all files at once — takes under 60 seconds.
📦 File Structure
Here's every file included in the KloHost template package:
| File | Description | Edit Priority |
|---|
| index.html | Homepage — hero, services, pricing, testimonials, contact | 🔴 High |
| domains.html | Domains page — TLD search, pricing table, FAQ | 🔴 High |
| hosting.html | Hosting plans — pricing tiers, comparison table, features | 🔴 High |
| about.html | About us — story, team, timeline, values | 🟡 Medium |
| contact.html | Contact page — form, support channels, hours | 🟡 Medium |
| blog.html | Blog listing — article cards, categories, search | 🟢 Low |
| post.html | Single blog post template — article layout | 🟢 Low |
| docs.html | This documentation page | 🟢 Low |
| privacy.html | Privacy policy page | 🟡 Medium |
| terms.html | Terms of service page | 🟡 Medium |
| 404.html | Custom error page | 🟢 Low |
| readme.html | Buyer readme — overview and quick reference | 🟢 Low |
ℹ️
All pages are self-contained single-file HTML — CSS and JS are inline. No build tools, no npm, no dependencies required.
⚙️ Requirements
This template has minimal requirements — it's pure HTML/CSS/JS with no frameworks:
- ✅ Any web hosting that serves static HTML files (shared, VPS, or dedicated)
- ✅ A domain name pointed to your hosting server
- ✅ A text editor (VS Code recommended — free)
- ✅ FTP client or cPanel File Manager for uploading files
- ❌ No Node.js, PHP, Python, or server-side language required
- ❌ No database required for the front-end template
- ❌ No npm install or build step required
⚠️
Note: To actually sell domains and hosting to customers, you'll need WHMCS + a reseller hosting account + a domain registrar API. The template is the front-end only — see the Backend Setup section.
🎨 Branding & Colors
All colors are defined as CSS variables in the :root block at the top of each page's <style> tag. Change them once per page:
:root {
--primary: #0369a1;
--primary-dark: #075985;
--accent: #0ea5e9;
--accent2: #38bdf8;
--text: #0c1a2e;
--muted: #64748b;
--light: #f0f9ff;
}
Current Color Palette
Changing the Logo
The logo is a CSS-styled text element with an icon box. Find this HTML in each page's header and update the letter and brand name:
<a href="index.html" class="logo">
<div class="logo-icon">K</div>
KloHost
</a>
✏️ Editing Content
Key Content to Replace
- Brand name: Find & replace "KloHost" across all files
- Tagline: Update hero headlines on each page
- Pricing: Update all plan prices in
index.html and hosting.html
- TLD prices: Update domain extension prices in
domains.html
- Team members: Replace names, roles, and bios in
about.html
- Testimonials: Replace with real customer reviews
- Contact details: Update address, email, phone in
contact.html
- Blog posts: Replace placeholder articles with real content
- Footer links: Update legal page links and social media URLs
✅
Quick Win: Update the promo bar text at the top of each page to reflect your real current offer — this is the first thing visitors see.
📄 Page Breakdown
index.html — Homepage
The main landing page. Contains: promo bar, sticky nav, hero with domain search, scrolling TLD ticker, services grid, pricing table, trust badges, testimonials, contact form, and footer.
domains.html — Domains Page
Full domain search experience. Contains: hero search bar, TLD category filters, complete pricing table with 16+ extensions, features bar, why-choose section, and FAQ accordion.
hosting.html — Hosting Plans
Hosting sales page. Contains: animated stats bar, monthly/annual pricing toggle, 3-tier plan cards, 8 feature highlights, competitor comparison table, testimonials, and FAQ.
about.html — About Us
Company story page. Contains: animated stats, mission section, 6 values cards, milestone timeline, team member cards, and partner/trust logos bar.
contact.html — Contact & Support
Support hub. Contains: 4 support channel cards (chat, email, ticket, KB), contact form with topic selector, office info sidebar, support hours grid, and FAQ accordion.
blog.html — Blog
Article listing page. Contains: search bar, category filters, featured post, 12 article cards, sidebar with popular posts & tag cloud, newsletter strip, and pagination.
🔌 WHMCS Integration
WHMCS is the industry-standard billing & automation platform for hosting businesses. Once set up, you'll link all KloHost CTAs to your WHMCS order pages.
Key Links to Update
| Button/CTA | Replace href with | Difficulty |
|---|
| "Get Started" buttons | https://yourdomain.com/whmcs/cart.php | Easy |
| Pricing plan buttons | https://yourdomain.com/whmcs/cart.php?a=add&pid=X | Easy |
| Domain search form | https://yourdomain.com/whmcs/domainchecker.php | Medium |
| Contact form | https://yourdomain.com/whmcs/submitticket.php | Medium |
| Client login | https://yourdomain.com/whmcs/clientarea.php | Easy |
Recommended WHMCS Setup
- Purchase WHMCS license at whmcs.com (~$15.95/mo)
- Install WHMCS in a subdirectory (e.g.
/whmcs/ or /billing/)
- Connect your domain registrar API (Enom, ResellerClub, or Namecheap)
- Set up hosting product packages matching your pricing tiers
- Configure Stripe or PayPal as payment gateways
- Update all href links in the template to point to WHMCS
🌐 Domain Registrar API
To sell domains, you need a reseller account with a domain registrar that provides an API. Here are the top options:
| Registrar | WHMCS Module | Best For |
|---|
| Enom | Built-in | Large volume resellers |
| ResellerClub / Logicboxes | Built-in | Beginners, low minimums |
| Namecheap Reseller | Built-in | Competitive wholesale pricing |
| CentralNic | Built-in | New TLDs (.store, .tech, .online) |
ℹ️
Recommendation: Start with ResellerClub — low minimum deposit ($100), easy WHMCS integration, and supports 500+ TLDs. Perfect for launching a new hosting business.
💳 Payment Setup
WHMCS supports dozens of payment gateways. For a new business, start with these two:
- Stripe — best for credit/debit cards, instant setup, 2.9% + 30¢ per transaction
- PayPal — trusted by customers worldwide, easy to set up in WHMCS
Both have official WHMCS modules — install them from the WHMCS admin panel under Setup → Payment Gateways.
🔧 DNS Configuration
To go live, point your domain's DNS to your web hosting server:
Type Name Value
A @ YOUR.SERVER.IP.ADDRESS
A www YOUR.SERVER.IP.ADDRESS
CNAME www yourdomain.com
⚠️
DNS changes can take 24–48 hours to propagate globally. Use dnschecker.org to monitor propagation status.
🔍 SEO Checklist
Every page includes SEO best practices out of the box. Before going live, complete this checklist:
- ☐ Update
<title> tags on all pages with your brand name
- ☐ Update
<meta name="description"> on all pages
- ☐ Update
og:url meta tags with your real domain
- ☐ Replace
og:image placeholders with real screenshots
- ☐ Update Schema.org JSON-LD structured data with real business info
- ☐ Submit sitemap to Google Search Console
- ☐ Install SSL certificate (HTTPS) — required for SEO ranking
- ☐ Set up Google Analytics or Plausible for traffic tracking
💬 Support
This template was built with the KloHost Site Builder. For questions about customization or setup:
- 📖 Re-read the relevant section of this documentation
- 💬 Use the live chat widget on any page
- 📞 Contact the seller through the marketplace where you purchased
- 🔧 For WHMCS-specific help, visit docs.whmcs.com
✅
Good luck! You have everything you need to launch a professional domain & hosting business. The template is production-ready — just rebrand, connect your backend, and go live. 🚀