Cara Mengonfigurasi Fitur Landing Page

Gila Temax
September 22, 2025
...
Table of Contents
Cara Menambahkan Halaman Landing Page HTML Code Generator

Masuk ke Dashboard Blogger > pilih menu Halaman.
Buat HALAMAN BARU
Di kolom Judul, masukkan teks judul sesuai keinginan, misalnya: Landing Page HTML Code Generator.
Pilih mode Tampilan HTML.
Di kolom Editor Kode HTML, masukkan kode HTML di bawah ini:
<div class="html_code_generator">
  <!--[ Start: Hero Section ]-->
  <div class="section section_active">
    <div class="section_title">
      Hero
      <div class="section_toggle">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path></svg>
      </div>
    </div>
    <div class="section_content">
      <div class="input_group">
        <div class="input_row">
          <label for="heroHeadline">Judul Utama <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="heroHeadline" placeholder="Contoh: Capek Kehilangan Pengunjung Karena Website Lelet?" type="text"/>
        </div>
        <div class="input_row">
          <label for="heroSubheadline">Subjudul <span class="req">(diperlukan)</span></label>
          <textarea id="heroSubheadline" placeholder="Contoh: Ganti ke Bubble. Ringan dijalankan, ngebut diakses, tapi tetap tampil modern. Tak perlu lagi mengorbankan estetika demi kecepatan."></textarea>
        </div>
        <div class="input_row">
          <label for="imageUrl">URL Gambar <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="imageUrl" placeholder="https://...jpg" type="text"/>
        </div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="heroPrimaryCtaLabel">Label Tombol CTA Utama <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="heroPrimaryCtaLabel" placeholder="Contoh: Order Sekarang" type="text"/>
        </div>
        <div class="input_row">
          <label for="heroPrimaryCtaUrl">URL Tombol CTA Utama <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="heroPrimaryCtaUrl" placeholder="https://..." type="text"/>
        </div>
        <div class="number_indicator">1</div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="heroSecondaryCtaLabel">Label Tombol CTA Sekunder <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="heroSecondaryCtaLabel" placeholder="Contoh: Lihat Demo" type="text"/>
        </div>
        <div class="input_row">
          <label for="heroSecondaryCtaUrl">URL Tombol CTA Sekunder <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="heroSecondaryCtaUrl" placeholder="https://..." type="text"/>
        </div>
        <div class="number_indicator">2</div>
      </div>
    </div>
  </div>
  <!--[ End: Hero Section ]-->

  <!--[ Start: Statistics Section ]-->
  <div class="section">
    <div class="section_title">
      Statistics
      <div class="section_toggle">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path></svg>
      </div>
    </div>
    <div class="section_content">
      <div class="input_group">
        <div class="input_row">
          <label for="statsSectionTitle">Judul Section <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="statsSectionTitle" placeholder="Contoh: Dipercaya oleh Ratusan Bisnis &lt;span&gt;di Seluruh Indonesia&lt;/span&gt;" type="text"/>
        </div>
        <div class="input_row">
          <label for="statsSectionSubtitle">Subjudul Section <span class="req">(diperlukan)</span></label>
          <textarea id="statsSectionSubtitle" placeholder="Contoh: Kami berkomitmen menghadirkan solusi berkualitas tinggi melalui dedikasi dan inovasi, membantu mitra mencapai target bisnis secara terukur dan memuaskan."></textarea>
        </div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="statsIcon1">Ikon Statistik 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="statsIcon1" placeholder="Contoh: &lt;svg&gt;...&lt;/svg&gt;" type="text"/>
        </div>
        <div class="input_row">
          <label for="statsNum1">Jumlah Statisik 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="statsNum1" placeholder="Contoh: 500+" type="text"/>
        </div>
        <div class="input_row">
          <label for="statsDesc1">Keterangan Statisik 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="statsDesc1" placeholder="Contoh: Total Pengguna" type="text"/>
        </div>
        <div class="number_indicator">1</div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="statsIcon2">Ikon Statistik 2 <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="statsIcon2" placeholder="Contoh: &lt;svg&gt;...&lt;/svg&gt;" type="text"/>
        </div>
        <div class="input_row">
          <label for="statsNum2">Jumlah Statisik 2 <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="statsNum2" placeholder="Contoh: 100+" type="text"/>
        </div>
        <div class="input_row">
          <label for="statsDesc2">Keterangan Statisik 2 <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="statsDesc2" placeholder="Contoh: Total Klien" type="text"/>
        </div>
        <div class="number_indicator">2</div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="statsIcon3">Ikon Statistik 3 <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="statsIcon3" placeholder="Contoh: &lt;svg&gt;...&lt;/svg&gt;" type="text"/>
        </div>
        <div class="input_row">
          <label for="statsNum3">Jumlah Statisik 3 <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="statsNum3" placeholder="Contoh: 100+" type="text"/>
        </div>
        <div class="input_row">
          <label for="statsDesc3">Keterangan Statisik 3 <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="statsDesc3" placeholder="Contoh: Total Testimoni" type="text"/>
        </div>
        <div class="number_indicator">3</div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="statsIcon4">Ikon Statistik 4 <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="statsIcon4" placeholder="Contoh: &lt;svg&gt;...&lt;/svg&gt;" type="text"/>
        </div>
        <div class="input_row">
          <label for="statsNum4">Jumlah Statisik 4 <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="statsNum4" placeholder="Contoh: 50+" type="text"/>
        </div>
        <div class="input_row">
          <label for="statsDesc4">Keterangan Statisik 4 <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="statsDesc4" placeholder="Contoh: Penghargaan" type="text"/>
        </div>
        <div class="number_indicator">4</div>
      </div>
    </div>
  </div>
  <!--[ End: Statistics Section ]-->

  <!--[ Start: Value Section ]-->
  <div class="section">
    <div class="section_title">
      Value Proposition
      <div class="section_toggle">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path></svg>
      </div>
    </div>
    <div class="section_content">
      <div class="input_group">
        <div class="input_row">
          <label for="valueSectionTitle">Judul Section <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="valueSectionTitle" placeholder="Contoh: Kenapa Harus Bubble?" type="text"/>
        </div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="valueImageUrl1">URL Gambar Value 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="valueImageUrl1" placeholder="https://...jpg" type="text"/>
        </div>
        <div class="input_row">
          <label for="valueTitle1">Judul Value 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="valueTitle1" placeholder="Contoh: Performa Ngebut Tanpa Ribet" type="text"/>
        </div>
        <div class="input_row">
          <label for="valueDesc1">Keterangan Value 1 <span class="req">(diperlukan)</span></label>
          <textarea id="valueDesc1" placeholder="Contoh: Bubble dirancang dengan struktur kode yang ringan dan efisien, sehingga halaman bisa tampil cepat sejak klik pertama. Bukan cuma cepat di angka, tapi terasa ringan saat dijelajahi pengunjung."></textarea>
        </div>
        <div class="number_indicator">1</div>
      </div>

      <button class="add_value_button elementskit_button outlined bold_font" type="button">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"></path></svg>
        Tambah Value
      </button>
    </div>
  </div>
  <!--[ End: Value Section ]-->

  <!--[ Start: Features Section ]-->
  <div class="section">
    <div class="section_title">
      Features
      <div class="section_toggle">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path></svg>
      </div>
    </div>
    <div class="section_content">
      <div class="input_group">
        <div class="input_row">
          <label for="featureSectionTitle">Judul Section <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="featureSectionTitle" placeholder="Contoh: Fitur yang Dibuat untuk Performa & Konversi" type="text"/>
        </div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="featureIcon1">Ikon SVG Feature 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="featureIcon1" placeholder="Contoh: &lt;svg&gt;...&lt;/svg&gt;" type="text"/>
        </div>
        <div class="input_row">
          <label for="featureTitle1">Judul Feature 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="featureTitle1" placeholder="Contoh: Performa Ngebut & Terukur" type="text"/>
        </div>
        <div class="input_row">
          <label for="featureDesc1">Keterangan Feature 1 <span class="req">(diperlukan)</span></label>
          <textarea id="featureDesc1" placeholder="Contoh: Optimasi kecepatan sudah disiapkan agar skor performa optimal di berbagai tools pengujian. Hasilnya? Loading lebih cepat, bounce rate lebih rendah."></textarea>
        </div>
        <div class="number_indicator">1</div>
      </div>

      <button class="add_feature_button elementskit_button outlined bold_font" type="button">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"></path></svg>
        Tambah Feature
      </button>
    </div>
  </div>
  <!--[ End: Features Section ]-->

  <!--[ Start: Social Proof Section ]-->
  <div class="section">
    <div class="section_title">
      Social Proof
      <div class="section_toggle">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path></svg>
      </div>
    </div>
    <div class="section_content">
      <div class="input_group">
        <div class="input_row">
          <label for="spSectionTitle">Judul Section <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="spSectionTitle" placeholder="Contoh: Fitur yang Dibuat untuk Performa & Konversi" type="text"/>
        </div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="spReview1">Isi Review / Testimonial 1 <span class="req">(diperlukan)</span></label>
          <textarea id="spReview1" placeholder="Contoh: Admin fast respon, bisa custom sesuai keinginan, sukses selalu... 🤩"></textarea>
        </div>
        <div class="input_row">
          <label for="spAuthorName1">Nama Pengarang 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="spAuthorName1" placeholder="Contoh: Ahmad Nur Kabib" type="text"/>
        </div>
        <div class="number_indicator">1</div>
      </div>

      <button class="add_sp_button elementskit_button outlined bold_font" type="button">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"></path></svg>
        Tambah Social Proof
      </button>
    </div>
  </div>
  <!--[ End: Social Proof Section ]-->

  <!--[ Start: Pricing Section ]-->
  <div class="section">
    <div class="section_title">
      Pricing
      <div class="section_toggle">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path></svg>
      </div>
    </div>
    <div class="section_content">
      <div class="input_group">
        <div class="input_row">
          <label for="pricingSectionTitle">Judul Section <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="pricingSectionTitle" placeholder="Contoh: Pilih Paket yang Sesuai" type="text"/>
        </div>
        <div class="input_row">
          <label for="pricingSectionSubtitle">Subjudul Section <span class="req">(diperlukan)</span></label>
          <textarea id="pricingSectionSubtitle" placeholder="Contoh: Tingkatkan performa blog Anda dengan fitur premium yang dirancang untuk pertumbuhan audiens dan kemudahan kustomisasi."></textarea>
        </div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="pricingHighlight1">Highlight 1 <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="pricingHighlight1" placeholder="Contoh: Paling Populer" type="text"/>
        </div>
        <div class="input_row">
          <label for="pricingName1">Judul Harga 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="pricingName1" placeholder="Contoh: Paket Profesional" type="text"/>
        </div>
        <div class="input_row">
          <label for="pricingPlanSubtitle1">Subjudul Rencana 1 <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="pricingPlanSubtitle1" placeholder="Contoh: Untuk Blogger Berpengalaman" type="text"/>
        </div>
        <div class="input_row">
          <label for="pricingValue1">Nilai Harga 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="pricingValue1" placeholder="Contoh: IDR 600K" type="text"/>
        </div>
        <div class="input_row">
          <label for="pricingPeriod1">Periode Harga 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="pricingPeriod1" placeholder="Contoh: /lifetime" type="text"/>
        </div>
        <div class="input_row">
          <label for="pricingCtaLabel1">Label Tombol CTA <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="pricingCtaLabel1" placeholder="Contoh: Pilih Paket" type="text"/>
        </div>
        <div class="input_row">
          <label for="pricingCtaUrl1">URL Tombol CTA <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="pricingCtaUrl1" placeholder="https://..." type="text"/>
        </div>
        <div class="input_row">
          <label for="pricingFeatureList1">Daftar Fitur 1 <span class="req">(diperlukan)</span></label>
          <textarea id="pricingFeatureList1" placeholder="Untuk membuat list pisahkan dengan koma."></textarea>
        </div>
        <div class="number_indicator">1</div>
      </div>

      <button class="add_pricing_button elementskit_button outlined bold_font" type="button">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"></path></svg>
        Tambah Pricing
      </button>
    </div>
  </div>
  <!--[ End: Pricing Section ]-->

  <!--[ Start: Call to Action Section ]-->
  <div class="section">
    <div class="section_title">
      Call to Action
      <div class="section_toggle">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path></svg>
      </div>
    </div>
    <div class="section_content">
      <div class="input_group">
        <div class="input_row">
          <label for="ctaSectionTitle">Judul Section <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="ctaSectionTitle" placeholder="Contoh: Tunggu Apa Lagi? Gaskeun Yuk!" type="text"/>
        </div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="ctaPrimaryCtaLabel">Label Tombol CTA Utama <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="ctaPrimaryCtaLabel" placeholder="Contoh: Order Sekarang" type="text"/>
        </div>
        <div class="input_row">
          <label for="ctaPrimaryCtaUrl">URL Tombol CTA Utama <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="ctaPrimaryCtaUrl" placeholder="https://..." type="text"/>
        </div>
        <div class="number_indicator">1</div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="ctaSecondaryCtaLabel">Label Tombol CTA Sekunder <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="ctaSecondaryCtaLabel" placeholder="Contoh: Lihat Demo" type="text"/>
        </div>
        <div class="input_row">
          <label for="ctaSecondaryCtaUrl">URL Tombol CTA Sekunder <span class="opt">(opsional)</span></label>
          <input autocomplete="off" id="ctaSecondaryCtaUrl" placeholder="https://..." type="text"/>
        </div>
        <div class="number_indicator">2</div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="ctaNote">Catatan Tambahan <span class="opt">(opsional)</span></label>
          <textarea id="ctaNote" placeholder="Contoh: Jangan buang waktu bikin dari nol. Gunakan template Bubble siap pakai dari Gila Temax dan langsung fokus ke validasi & penjualan."></textarea>
        </div>
        <div class="number_indicator">3</div>
      </div>
    </div>
  </div>
  <!--[ End: Call to Action Section ]-->

  <!--[ Start: FAQ Section ]-->
  <div class="section">
    <div class="section_title">
      FAQ
      <div class="section_toggle">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path></svg>
      </div>
    </div>
    <div class="section_content">
      <div class="input_group">
        <div class="input_row">
          <label for="faqSectionTitle">Judul Section <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="faqSectionTitle" placeholder="Contoh: FAQ 😊" type="text"/>
        </div>
        <div class="input_row">
          <label for="faqSectionSubtitle">Subjudul Section <span class="req">(diperlukan)</span></label>
          <textarea id="faqSectionSubtitle" placeholder="Contoh: Di bawah adalah beberapa pertanyaan yang sering ditanyakan."></textarea>
        </div>
      </div>

      <div class="input_group">
        <div class="input_row">
          <label for="faqQuestion1">Pertanyaan 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="faqQuestion1" placeholder="Contoh: Apakah template ini kompatibel dengan WordPress?" type="text"/>
        </div>
        <div class="input_row">
          <label for="faqAnswer1">Jawaban 1 <span class="req">(diperlukan)</span></label>
          <input autocomplete="off" id="faqAnswer1" placeholder="Contoh: Saat ini, versi Wordpress belum tersedia. Anda hanya dapat menggunakan template ini di platform Blogger." type="text"/>
        </div>
        <div class="number_indicator">1</div>
      </div>

      <button class="add_faq_button elementskit_button outlined bold_font" type="button">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"></path></svg>
        Tambah FAQ
      </button>
    </div>
  </div>
  <!--[ End: FAQ Section ]-->

  <!--[ Start: Results Section ]-->
  <div class="section section_active">
    <div class="section_title">
      Hasil Kode HTML
      <div class="section_toggle">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="m480-340 180-180-57-56-123 123-123-123-57 56 180 180Zm0 260q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"></path></svg>
      </div>
    </div>
    <div class="section_content">
      <button class="create_code_button elementskit_button filled bold_font" type="button">
        <svg aria-hidden="true" fill="currentColor" viewBox="0 -960 960 960"><path d="M320-240 80-480l240-240 57 57-184 184 183 183-56 56Zm320 0-57-57 184-184-183-183 56-56 240 240-240 240Z"></path></svg>
        Buat Kode
      </button>
      <pre><code>Output</code></pre>
    </div>
  </div>
  <!--[ End: Results Section ]-->
</div>

<style>
.html_code_generator .section {background-color:var(--color-surface-bg-400);border-radius:24px;padding:24px;}.html_code_generator .section:not(:last-child) {margin-bottom:32px;}.section_title {display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:24px;font-weight:700;}.section_toggle {display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-accent);width:32px;height:32px;}.section_active .section_toggle {transform:rotate(180deg);}.section_content {display:none;padding-top:16px;}.section_active .section_content {display:block;}.input_group {background-color:var(--color-body-bg);border-radius:16px;padding:24px;position:relative;}.input_group:not(:last-child) {margin-bottom:16px;}.input_row:not(:first-child) {margin-top:24px;}.input_row label {display:block;font-size:14px;font-weight:700;margin-bottom:8px;}.input_row label span {font-weight:400;}.input_row label span.opt {color:var(--color-secondary-text);}.input_row label span.req {color:var(--color-alert-error-border);}.input_row input, .input_row textarea {border:1px solid;border-color:var(--color-primary-border);border-radius:8px;font-size:14px;color:var(--color-primary-text);width:100%;height:40px;padding:0 16px;}.input_row input::placeholder, .input_row textarea::placeholder {color:var(--color-primary-text);opacity:.5;}.input_row input:focus, .input_row textarea:focus {border-color:var(--color-accent);}.input_row textarea {display:block;height:100%;min-height:100px;resize:vertical;outline:none;padding:16px;}.input_group .remove_button {margin-top:24px;}.number_indicator {display:flex;align-items:center;justify-content:center;background:var(--color-primary-gradient);border-radius:50%;font-size:14px;font-weight:700;color:var(--color-text-on-gradient);width:24px;height:24px;position:absolute;top:-12px;left:-12px;}
</style>
Setelah semua dikonfigurasi klik tombol PUBLIKASIKAN.
Cara Membuat Halaman Landing Page

Template Bubble dilengkapi fitur Landing Page yang bisa ditempatkan di Halaman Statis. Fitur ini ideal digunakan untuk menampilkan promosi produk, layanan, atau memperkenalkan bisnis Anda secara lebih menarik dan profesional.
Section yang Tersedia

Section	Fungsi
Hero	Banner utama dengan gambar dan CTA
Statistics	Angka-angka pencapaian
Value Proposition	Keunggulan produk/jasa
Features	Fitur-fitur yang ditawarkan
Social Proof	Testimoni pelanggan
Pricing	Tabel harga paket
Call to Action	Tombol ajakan bertindak
FAQ	Pertanyaan yang sering diajukan
Persiapan Gambar

Sebelum membuat landing page, siapkan gambar-gambar berikut:
Gambar	Rasio	Ukuran Minimal
Hero (produk utama)	1:1	450 x 450 px
Value Proposition	1:1	320 x 320 px
Features (icon)	1:1	80 x 80 px
Cara Membuat Kode Landing Page

Siapkan semua gambar dan konten teks.
Buka Tool Landing Page HTML Code Generator yang telah dibuat sebelumnya.
Isi form sesuai kebutuhan.
Klik tombol Buat Kode untuk mendapatkan kode HTML.
Memasang di Halaman Statis

Buka menu Halaman > klik tombol Halaman baru.
Buka Tool Landing Page HTML Code Generator yang telah dibuat sebelumnya.
Klik mode HTML di editor.
Paste kode HTML landing page.
Setelah semua dikonfigurasi klik tombol PUBLIKASIKAN.
Jika Anda ingin melaporkan beberapa bug, Anda dapat menuliskannya di bagian komentar pada halaman Bug Report dan jika Anda ingin meminta fitur baru atau ingin memberikan umpan balik, silakan tuliskan di bagian komentar pada halaman Request dan Feedback.
Bubble

Cara Mengonfigurasi Fitur Landing Page

Cara Menambahkan Halaman Landing Page HTML Code Generator

Cara Membuat Halaman Landing Page

Section yang Tersedia

Persiapan Gambar

Cara Membuat Kode Landing Page

Memasang di Halaman Statis

Further Reading

Related Posts

Post a Comment

Support Gila Temax
