Home / HTML / Membuat Halaman Landing Page Sederhana

Membuat Halaman Landing Page Sederhana

Created at by Aris Munandar
Share on

Landing page atau halaman arahan merupakan elemen penting dalam strategi digital marketing. Dalam artikel ini, kita akan membahas cara membuat halaman landing page HTML yang sederhana namun efektif untuk meningkatkan konversi bisnis Anda dengan panduan langkah demi langkah.

Daftar isi

Baca juga: Membuat Halaman Profil Pribadi dengan HTML

Apa Itu Landing Page?

Landing page adalah halaman web yang dirancang khusus untuk tujuan marketing atau advertising tertentu. Berbeda dengan website biasa, halaman landing page memiliki fokus tunggal yaitu mendorong pengunjung untuk melakukan aksi tertentu (call-to-action), seperti mendaftar newsletter, membeli produk, atau mengunduh e-book.

Mengapa Landing Page Penting?

Sebuah landing page sederhana yang dirancang dengan baik dapat:

  • Meningkatkan tingkat konversi hingga 300%
  • Mengumpulkan data prospek pelanggan
  • Mengurangi bounce rate
  • Meningkatkan ROI kampanye iklan
  • Memberikan pengalaman pengguna yang fokus dan terarah

Langkah-Langkah Membuat Landing Page

Berikut adalah panduan step-by-step untuk membuat landing page dari awal hingga selesai:

Langkah 1: Persiapan Folder dan File

Pertama, buat folder project dan file-file yang dibutuhkan:

  1. Buat folder baru bernama landing-page
  2. Di dalam folder tersebut, buat file index.html
  3. Buat juga file style.css untuk styling

Langkah 2: Membuat Struktur HTML Dasar

Buka file index.html dan mulai dengan struktur HTML dasar:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page Sederhana</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Konten akan ditambahkan di langkah berikutnya -->
</body>
</html>Code language: HTML, XML (xml)

Langkah 3: Menambahkan Section Header

Tambahkan header dengan logo atau nama brand Anda:

<header>
    <nav class="navbar">
        <div class="container">
            <div class="logo">BrandKu</div>
            <ul class="nav-menu">
                <li><a href="#features">Fitur</a></li>
                <li><a href="#testimonial">Testimoni</a></li>
                <li><a href="#cta">Daftar</a></li>
            </ul>
        </div>
    </nav>
</header>Code language: HTML, XML (xml)

Langkah 4: Membuat Hero Section

Hero section adalah bagian pertama yang dilihat pengunjung. Buat dengan headline menarik:

<section class="hero">
    <div class="container">
        <h1>Tingkatkan Bisnis Anda dengan Solusi Digital</h1>
        <p>Platform terbaik untuk mengembangkan bisnis online Anda dengan mudah dan cepat</p>
        <button class="cta-button">Mulai Gratis Sekarang</button>
    </div>
</section>Code language: HTML, XML (xml)

Langkah 5: Menambahkan Section Fitur

Tampilkan fitur-fitur unggulan produk atau layanan Anda:

<section class="features" id="features">
    <div class="container">
        <h2>Fitur Unggulan</h2>
        <div class="feature-grid">
            <div class="feature-item">
                <div class="icon">🚀</div>
                <h3>Cepat & Mudah</h3>
                <p>Setup dalam hitungan menit tanpa coding</p>
            </div>
            <div class="feature-item">
                <div class="icon">🔒</div>
                <h3>Aman & Terpercaya</h3>
                <p>Keamanan data tingkat enterprise</p>
            </div>
            <div class="feature-item">
                <div class="icon">📊</div>
                <h3>Analytics Lengkap</h3>
                <p>Dashboard analitik real-time</p>
            </div>
        </div>
    </div>
</section>Code language: HTML, XML (xml)

Langkah 6: Menambahkan Testimoni

Testimoni membangun kepercayaan pengunjung:

<section class="testimonial" id="testimonial">
    <div class="container">
        <h2>Apa Kata Mereka?</h2>
        <div class="testimonial-card">
            <p class="quote">"Platform ini benar-benar mengubah cara kami berbisnis. Sangat direkomendasikan!"</p>
            <p class="author">- Budi Santoso, CEO StartupXYZ</p>
        </div>
    </div>
</section>Code language: HTML, XML (xml)

Langkah 7: Membuat CTA Section

Call-to-action terakhir untuk mendorong konversi:

<section class="cta-section" id="cta">
    <div class="container">
        <h2>Siap Memulai Perjalanan Anda?</h2>
        <p>Bergabunglah dengan ribuan pengguna yang sudah merasakan manfaatnya</p>
        <button class="cta-button">Daftar Sekarang - Gratis!</button>
    </div>
</section>Code language: HTML, XML (xml)

Tutup dengan footer sederhana:

<footer>
    <div class="container">
        <p>&copy; 2024 BrandKu. All rights reserved.</p>
    </div>
</footer>Code language: HTML, XML (xml)

Langkah 9: Styling dengan CSS

Buka file style.css dan tambahkan styling berikut:

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navbar */
.navbar {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #667eea;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #667eea;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 100px 20px;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* CTA Button */
.cta-button {
    background-color: #ff6b6b;
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.cta-button:hover {
    background-color: #ee5a52;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
}

/* Features Section */
.features {
    padding: 80px 20px;
    background-color: #f8f9fa;
}

.features h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: #333;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.feature-item {
    background: white;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.feature-item h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #667eea;
}

/* Testimonial Section */
.testimonial {
    padding: 80px 20px;
    background-color: #fff;
}

.testimonial h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.testimonial-card {
    max-width: 800px;
    margin: 0 auto;
    background: #f8f9fa;
    padding: 40px;
    border-radius: 10px;
    border-left: 5px solid #667eea;
}

.quote {
    font-size: 1.3rem;
    font-style: italic;
    margin-bottom: 20px;
    color: #555;
}

.author {
    font-weight: bold;
    color: #667eea;
}

/* CTA Section */
.cta-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    color: white;
    text-align: center;
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-section p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 30px 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .nav-menu {
        gap: 1rem;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    .features h2,
    .testimonial h2,
    .cta-section h2 {
        font-size: 2rem;
    }
}Code language: CSS (css)

Langkah 10: Testing dan Preview

Setelah semua kode selesai, buka file index.html di browser untuk melihat hasilnya. Pastikan semua elemen tampil dengan baik dan responsif di berbagai ukuran layar.

Contoh Kode HTML Lengkap (Full Code)

Berikut adalah kode halaman landing page HTML lengkap yang siap digunakan dengan eksternal CSS sesuai tutorial:

File: index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Platform terbaik untuk mengembangkan bisnis online Anda dengan mudah dan cepat">
    <title>BrandKu - Solusi Digital Terbaik</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Header Navigation -->
    <header>
        <nav class="navbar">
            <div class="container">
                <div class="logo">BrandKu</div>
                <ul class="nav-menu">
                    <li><a href="#features">Fitur</a></li>
                    <li><a href="#testimonial">Testimoni</a></li>
                    <li><a href="#cta">Daftar</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <h1>Tingkatkan Bisnis Anda dengan Solusi Digital</h1>
            <p>Platform terbaik untuk mengembangkan bisnis online Anda dengan mudah dan cepat</p>
            <button class="cta-button">Mulai Gratis Sekarang</button>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features" id="features">
        <div class="container">
            <h2>Fitur Unggulan</h2>
            <div class="feature-grid">
                <div class="feature-item">
                    <div class="icon">🚀</div>
                    <h3>Cepat & Mudah</h3>
                    <p>Setup dalam hitungan menit tanpa coding</p>
                </div>
                <div class="feature-item">
                    <div class="icon">🔒</div>
                    <h3>Aman & Terpercaya</h3>
                    <p>Keamanan data tingkat enterprise</p>
                </div>
                <div class="feature-item">
                    <div class="icon">📊</div>
                    <h3>Analytics Lengkap</h3>
                    <p>Dashboard analitik real-time</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonial Section -->
    <section class="testimonial" id="testimonial">
        <div class="container">
            <h2>Apa Kata Mereka?</h2>
            <div class="testimonial-card">
                <p class="quote">"Platform ini benar-benar mengubah cara kami berbisnis. Sangat direkomendasikan!"</p>
                <p class="author">- Budi Santoso, CEO StartupXYZ</p>
            </div>
        </div>
    </section>

    <!-- Final CTA Section -->
    <section class="cta-section" id="cta">
        <div class="container">
            <h2>Siap Memulai Perjalanan Anda?</h2>
            <p>Bergabunglah dengan ribuan pengguna yang sudah merasakan manfaatnya</p>
            <button class="cta-button">Daftar Sekarang - Gratis!</button>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <p>&copy; 2024 BrandKu. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>Code language: HTML, XML (xml)

File: style.css

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navbar */
.navbar {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #667eea;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #667eea;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 100px 20px;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* CTA Button */
.cta-button {
    background-color: #ff6b6b;
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.cta-button:hover {
    background-color: #ee5a52;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
}

/* Features Section */
.features {
    padding: 80px 20px;
    background-color: #f8f9fa;
}

.features h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: #333;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.feature-item {
    background: white;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.feature-item h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #667eea;
}

/* Testimonial Section */
.testimonial {
    padding: 80px 20px;
    background-color: #fff;
}

.testimonial h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.testimonial-card {
    max-width: 800px;
    margin: 0 auto;
    background: #f8f9fa;
    padding: 40px;
    border-radius: 10px;
    border-left: 5px solid #667eea;
}

.quote {
    font-size: 1.3rem;
    font-style: italic;
    margin-bottom: 20px;
    color: #555;
}

.author {
    font-weight: bold;
    color: #667eea;
}

/* CTA Section */
.cta-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    color: white;
    text-align: center;
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-section p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 30px 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .nav-menu {
        gap: 1rem;
        font-size: 0.9rem;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    .features h2,
    .testimonial h2,
    .cta-section h2 {
        font-size: 2rem;
    }
}Code language: CSS (css)

Berikut ini adalah tampilan landing page yang sudah dibuat seperti kode diatas.

Halaman Landing Page Sederhana

Tips Optimasi Landing Page

1. Headline yang Kuat

Headline adalah elemen pertama yang dilihat pengunjung. Pastikan headline Anda jelas, menarik, dan menjelaskan value proposition dengan singkat.

2. Call-to-Action yang Jelas

Tombol CTA harus menonjol dengan warna kontras dan copy yang action-oriented seperti “Daftar Gratis”, “Download Sekarang”, atau “Mulai Trial”.

3. Responsif untuk Mobile

Pastikan halaman landing page HTML Anda responsif di semua perangkat. Kode di atas sudah dilengkapi dengan media queries untuk tampilan mobile yang optimal.

4. Kecepatan Loading

Optimalkan gambar dan minimalkan penggunaan JavaScript untuk memastikan landing page loading dengan cepat. Gunakan format gambar modern seperti WebP untuk performa terbaik.

5. Social Proof

Tambahkan testimoni, logo klien, atau statistik untuk membangun kepercayaan pengunjung. Ini sangat penting untuk meningkatkan kredibilitas.

Cara Menggunakan Kode Landing Page

Untuk menggunakan kode landing page sederhana di atas:

  1. Buat folder project baru bernama landing-page di komputer Anda
  2. Buat file index.html dan copy kode HTML dari contoh di atas
  3. Buat file style.css di folder yang sama dan copy kode CSS lengkap
  4. Pastikan kedua file berada dalam satu folder yang sama
  5. Buka file index.html dengan browser (Chrome, Firefox, Safari, dll)
  6. Sesuaikan konten seperti teks, warna, dan gambar sesuai kebutuhan Anda

Struktur folder yang benar:

landing-page/
├── index.html
└── style.css

Kesimpulan

Membuat halaman landing page sederhana dengan HTML tidak memerlukan keahlian coding yang rumit. Dengan mengikuti panduan langkah demi langkah di atas dan menggunakan contoh kode lengkap yang telah disediakan, Anda dapat membuat landing page yang efektif untuk meningkatkan konversi bisnis Anda dalam waktu singkat.

Kunci sukses landing page terletak pada:

  • Kesederhanaan – Fokus pada satu tujuan utama
  • Desain menarik – Visual yang profesional dan modern
  • CTA yang jelas – Tombol aksi yang mudah ditemukan
  • Responsif – Tampil sempurna di semua perangkat
  • Optimasi berkelanjutan – Testing dan perbaikan berdasarkan data

Mulailah dengan template lengkap di atas, sesuaikan dengan brand dan tujuan Anda, lalu lakukan A/B testing untuk menemukan kombinasi yang paling efektif. Dengan tutorial landing page ini, Anda sudah siap membuat halaman yang mengkonversi pengunjung menjadi pelanggan. Selamat mencoba!

Share on

Related article!

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Your email address will not be published. Required fields are marked *

Discover more from Bahasaweb.com

Subscribe now to keep reading and get access to the full archive.

Continue reading