Fitur-fitur Template Lajang Spot untuk Membuat Landing Page

Fitur biasa di sebut element. Yaitu kumpulan kode html yang sudah disederhanakan dan disusun rapi sehingga menghasilkan tampilan tertentu sesuai yang diinginkan.

Berikut ini fitur-fitur yang ada dalam template lajang spot khususnya untuk membuat landing page.

1. LP Header

Digunakan untuk membuat header landing page di homepage.

LP Header Section

<div class="lp-location"> 
    <svg width="20" height="20" fill="currentColor" class="bi bi-geo-alt-fill" viewbox="0 0 16 16"> 
      <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path> 
    </svg> 
    <span>Nama Layanan & Lokasi Layanan</span> 
</div>

<div class="lp-header-wrapper">

<div class="lp-header-content">
  <div id="headline"><h2>Teks headline di Sini</h2></div>
  <div id="subheadline"><p>Teks Subheadline di Sini</p></div>
  <div class="btn-container"> 
    <a class="btn-primary" href="tel:+6281234567890">Call Now</a> 
    <a class="btn-secondary" href="https://wa.me/6281234567890" target="_blank" rel="nofollow">WhatsApp Now</a> 
  </div>
</div>

<div class="ads-image">
  <img alt="Judul gambarnya" src="URL GAMBAR" width="480px" height="480px">
</div>

</div>

Salin-tempel dan edit pada Widget LP Header Section di menu tata letak blog.

2. LP Statement

Digunakan untuk membuat statement atau pernyataan apa masalahnya, mengapa harus diselesaikan, dan apa solusinya.

Tujuannya untuk menyambungkan pesan headline dan subheadline ke produk.

LP Statement

<div id="statement"> 
  
</div>

Salin-tempel pada Widget LP Statement Section di menu tata letak blog atau di dalam postingan produk.

Isi pernyataan dalam tag html, misal judul gunakan tag heading (h3, h4), teks gunakan tag p, list gunakan tag ul li, gambar menggunakan tag img, url menggunakan tag a dan apa saja yang bisa mempermudah keterbacaan.

3. LP What Product

Digunakan untuk membuat deskripsi produk yang berisi fitur dan manfaatnya serta hubungannya dengan masalah yang dialami oleh calon customer yang dinyatakan dalam LP Statement.

LP What Product

<div id="what-product"> 
  
</div>

Salin-tempel pada Widget LP What Product Section di menu tata letak blog atau di dalam postingan produk.

4. LP Why Product

Digunakan untuk membuat poin-poin alasan mengapa memesan produknya.

LP Why Product

<div id="why-product"> 
  
</div>

Salin-tempel pada Widget LP Why Product Section di menu tata letak blog atau di dalam postingan produk.

5. LP Social Proof

Digunakan untuk membuat bukti sosial seperti testimoni.

LP Social Proof

<div id="social-proof"> 
  
</div>

Salin-tempel pada Widget LP Social Proof Section di menu tata letak blog atau di dalam postingan produk.

Untuk membuat testimoni, bisa gunakan kode html Testimoni Slideshow.

6. LP PPS

Digunakan untuk membuat bagian Price, Promo, Scarcity.

Price: harga
Promo: info promo
Scarcity: kelangkaan/keterbatasan

LP PPS

<div id="pps"> 
  
</div>

Contoh kode:

Kode LP PPS

<div id="pps">

<div class="subheading"><h3>HARGA & CARA PEMESANAN</h3></div>

<p>Berapa harga <strong><em>Template LajangSpot</em></strong> ini?👇</p>

<p><span class="original-price">Rp 220.000</span></p>
<p><span class="sale-price">Rp 149.000</span></p>

<p>*Promo Tidak Berlaku Setiap Saat ya. Bisa naik kapan saja.</p>

</div>

Salin-tempel pada Widget LP PPS Section di menu tata letak blog atau di dalam postingan produk.

7. LP FAQ

Digunakan untuk membuat FAQ (Frequently Asked Questions (atau dalam bahasa Indonesia berarti "Pertanyaan yang Sering Diajukan").

LP FAQ

<div id="faq"> 
  
</div>

Gunakan kode FAQ untuk membuatnya.

Salin-tempel pada Widget LP FAQ Section di menu tata letak blog atau di dalam postingan produk.

8. LP CTA

Digunakan untuk membuat Call to Action di bagian bawah setelah FAQ section.

LP CTA

<div id="cta"> 
  
</div>

Contoh kode:

LP CTA

<div id="cta">

<h3>Konsultasi Sekarang</h3>

<p>Masih ragu untuk memesan layanan kami? Kaka bisa konsultasi terlebih dahulu, klik tombol di bawah ini!</p>

<div class="btn-container">
<a class="btn-primary" href="https://wa.me/628xxx.." rel="nofollow">WhatsApp Sekarang</a>
<a class="btn-secondary" href="tel:+628xxx.." rel="nofollow">Hubungi Sekarang</a>
</div>

</div>

Pelajari selengkapnya tentang Button (Tombol).

Salin-tempel pada Widget LP CTA Section di menu tata letak blog atau di dalam postingan produk.

9. LP Gallery

Digunakan untuk membuat galeri foto bisnis Anda.

LP Gallery

<div id="gallery"> 
  
</div>

Gunakan kode Slideshow Otomatis untuk membuatnya.

Salin-tempel pada Widget LP Gallery Section di menu tata letak blog atau di dalam postingan produk.

10. LP Footer

Digunakan untuk membuat infotmasi tentang bisnis Anda seperti About, Contact, dan lainnya.

Silahkan pergi ke Widget LP Footer Section di menu tata letak blog untuk menampilkannya di halaman beranda.

11. LP Floating Contact

Digunakan untuk membuat tombol kontak melayang di samping kiri bawah.

Silahkan pergi ke Widget LP Floating Contact Section di menu tata letak blog untuk menampilkannya di halaman beranda.

Anda bisa menampilkannya pada postingan blog dengan menggunakan kode LP Floating Contact.

12. LP Container

Digunakan untuk mengelompokkan dan membungkus elemen-elemen lain seperti teks, gambar, atau tag lainnya.

LP Container

<div class="lp-container"> 
  teks, gambar, atau element lainnya.
</div>

Alih-alih menggunakan elemen filtering-audience, statement, dan closing-statement , lebih mudah menggunakan lp-container untuk diletakkan pada Widget LP Statement Section.👇

Contoh:

LP Container pada LP Statement Section

<div class="lp-container"> 
  Apakah anda (filtering audience)
</div>
<div class="lp-grid"> 
  <div class="lp-container"> 
    Ketahui dulu.. (opening statement)
  </div> 
  <div class="lp-container"> 
    Masalahnya.. (explanatory statement)
  </div> 
  <div id="lp-container"> 
    Solusinya.. (closing statement)
  </div> 
</div>

13. LP Grid

Digunakan untuk membuat tampilan grid suatu elemen.

#13.1 LP Grid untuk Umum

Letakkan dimana saja Anda inginkan, digunakan untuk daftar item tertentu.

LP Grid

<div class="lp-grid"> 
  <div class="lp-item"> 
    teks/gambar ke-1
  </div> 
  <div class="lp-item"> 
    teks/gambar ke-2
  </div> 
  <div id="lp-item"> 
    teks/gambar ke-3
  </div> 
</div>

Biasanya digunakan untuk membuat daftar keunggulan suatu produk atau layanan.

Bahkan daftar produk atau layanan itu sendiri.

Anda bisa memasukan elemen .lp-icon atau img ke dalam lp-item pada kode di atas.

Contoh:

LP Grid pada What Product

<h2><ins>Apa Saja Keunggulan Utamanya?</ins></h2> 
<div class="lp-grid"> 
  <div class="lp-item"> 
    <div class="lp-icon"> &#128640; </div> 
    <h3>Konversi Tinggi</h3> 
    <p>Desainnya minimalis agar pengunjung fokus pada konten bukan pada desain agar terjadi konversi.</p> 
  </div> 
  <div class="lp-item"> 
    <div class="lp-icon"> &#128176; </div> 
    <h3>Gratis &amp; Hemat</h3> 
    <p>Menggunakan platform Blogger gratis, jadi tidak perlu bayar biaya hosting bulanan.</p> 
    </div> 
  <div class="lp-item"> 
    <div class="lp-icon"> &#x1F527; </div> 
    <h3>Mudah Digunakan</h3> 
    <p>Template landing pagenya simple, cukup paham dasar-dasar html, tanpa perlu keahlian teknis atau coding. Panduan disediakan.</p> 
    </div> 
  <div class="lp-item"> 
    <div class="lp-icon"> 
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-down-up" viewbox="0 0 16 16"> 
        <path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z"/></path>
      </svg> 
    </div> 
    <h3>Bisa Custom</h3> 
    <p>Ganti warna template default sesuai keinginan, mudah dan cepat di menu desainer tema.</p> 
  </div> 
</div>

Selain itu, Anda juga bisa gunakan kode "lp-grid lp-item" di atas untuk daftar alasan pemesanan suatu produk atau layanan.

Anda juga bisa menggunakan pada elemen <ul> atau <ol>. 👇

LP Grid ul/ol

<ul class="lp-grid"> 
  <li class="lp-item"> 
    alasan ke-1
  </li> 
  <li class="lp-item"> 
    alasan ke-2
  </li> 
  <div id="lp-item"> 
    alasan ke-3
  </li> 
</ul>

#13.2 LP Grid pada LP Statement Section

Misalnya untuk membuat tampilan grid element landing page filtering-audience, statement, dan closing-statement, maka bungkus dengan class lp-grid.👇

LP Grid pada LP Statement Section

<div class="lp-grid"> 
  <div id="filtering-audience"> 
  </div> 
  <div id="statement"> 
  </div> 
  <div id="closing-statement"> 
  </div> 
</div>

Salin-tempel dan edit pada Widget LP Statement Section di menu tata letak blog.

14. Button (Tombol)

Digunakan untuk membuat tombol. Contohnya tombol kontak telepon dan pesan whatsapp.

Selain itu, juga untuk tombol yang berisi link ke bagian atau halaman tertentu.

Button

<div class="btn-container"> 
  <a class="btn-primary" href="#">Button Primary</a>
  <a class="btn-secondary" href="#">Button Secondary</a>
</div>

Lihat selengkapnya tentang Button (Tombol) beserta demonya.

15. Ads Image/Video

Anda bisa menggunakan kode berikut untuk mengatur tampilan gambar atau video terletak di tengah dan max-width 480px.

15.1 Ads Image

Ads Image

<div class="ads-image"><img alt="Judul gambarnya" src="URL GAMBAR" width="480px" height="480px"></div>

15.2 Ads Video Blogger

Untuk menambahkan video upload di blogger, kita gunakan kode:

Ads Video Blogger

<div class="ads-video"><object class="BLOG_video_class" contentid="ID_VIDEO" height="480" id="BLOG_video-ID_VIDEO" width="480"></object></div>

15.3 Video Youtube

Untuk menambahkan video youtube, kita gunakan kode:

Ads Video Youtube

<div class="ads-video"><p><a href="https://www.youtube.com/watch?v=ID_VIDEO">https://www.youtube.com/watch?v=ID_VIDEO</a></p></div>

Lihat selengkapnya tentang Lazyload Video Youtube.

16. Images Slideshow

Images Slideshow

<div class="slideshow-images">
  <div class="image-slide">
    <img src="URL_Gambar_1" alt="Judul Gambar 1" height="480px" width="480px"/>
    <p>Keterangan Gambar 1</p>
  </div>
  <div class="image-slide">
    <img src="URL_Gambar_2" alt="Judul Gambar 2" height="480px" width="480px"/>
    <p>Keterangan Gambar 2</p>
  </div>
  <div class="image-slide">
    <img src="URL_Gambar_3" alt="Judul Gambar 3" height="480px" width="480px"/>
    <p>Keterangan Gambar 3</p>
  </div>
  <div class="image-slide">
    <img src="URL_Gambar_4" alt="Judul Gambar 4" height="480px" width="480px"/>
    <p>Keterangan Gambar 4</p>
  </div>
  <button class="prev" onclick="plusDivs(-1)">Prev</button>
  <button class="next" onclick="plusDivs(1)">Next</button>
</div>

Lihat selengkapnya tentang Images Slideshow beserta demonya.

17. Testimonial Slideshow

Slideshow Testimonial

<div class="slideshow-testimonial">
  <div class="testimonial">
    <q>Testimoni berupa teks gunakan tag q</q>
    <p class="author-testimonial">Namanya</p>
  </div>
  <div class="testimonial">
    <img src="url-gambar" alt="testimoni gambar"/>
    <p class="author-testimonial">Namanya</p>
  </div>
  <div class="testimonial">
    <q>Jadi, bisa sertakan gambar atau teks di dalam testimonialnya.</q>
    <p class="author-testimonial">Namanya</p>
  </div>
  <button class="prev-testimonial" onclick="plusSlides(-1)">❮</button>
  <button class="next-testimonial" onclick="plusSlides(1)">❯</button>
</div>

Lihat selengkapnya tentang Testimonial Slideshow beserta demonya.

18. LP Slideshow Otomatis

LP Slideshow Otomatis

<div class="lp-slideshow"> 
  <div class="lp-slide"> 
    <img alt="judul gambar-1" height="480px" src="#url-gambar-1" width="480px"/> 
  </div> 
  <div class="lp-slide"> 
    <img alt="judul gambar-2" height="480px" src="#url-gambar-2" width="480px"/> 
  </div> 
  <div class="lp-slide"> 
    <img alt="judul gambar-3" height="480px" src="#url-gambar-3" width="480px"/> 
  </div> 
<a class="prev" data-action="prev">&#10094;</a> 
<a class="next" data-action="next">&#10095;</a> 
</div> 
<div class="lp-dot-container"> 
  <span class="lp-dot" data-slide-index="0"></span> 
  <span class="lp-dot" data-slide-index="1"></span> 
  <span class="lp-dot" data-slide-index="2"></span> 
</div>

Lihat selengkapnya tentang LP Slideshow Otomatis beserta demonya.

19. Border Style

Pernahkah Anda ingin membingkai sebuah kutipan, memisahkan bagian konten, atau sekadar menambahkan sentuhan visual yang menarik? Anda bisa melakukannya dengan mudah menggunakan border styles.

Border Style

<div class="solid">
</div>

<div class="dotted">
</div>

<div class="dashed">
</div>

<div class="double">
</div>

<div class="groove">
</div>

<div class="ridge">
</div>

<div class="inset">
</div>

<div class="outset">
</div>

Lihat selengkapnya tentang Border Style beserta demonya.

20. Subheading

Blockquote

<div class="subheading">
  <h2>Teks Judul</h2>
</div>

Catatan: h2 bisa diganti h3 dan h4.

21. Blockquote

Blockquote

<blockquote>
teks
</blockquote>

22. Formatting Teks

Formatting teks adalah proses mengatur tampilan visual teks untuk meningkatkan kejelasannya, seperti mengubah font, ukuran, warna, spasi, dan perataan.

#22.1 Text Alignment

<p class="text-left">
teks rata kiri
</p>

<p class="text-center">
teks rata tengah
</p>

<p class="text-justify">
teks rata kiri-kanan
</p>

Lihat selengkapnya tentang Text Alignment beserta demonya.

#22.2 Font Color

<span class="font-color">
teks warna dasar template
</span>

<span class="font-blue">
teks warna biru
</span>

<span class="font-red">
teks warna merah
</span>

<span class="font-green">
teks warna hijau
</span>

<span class="font-orange">
teks warna orange
</span>

Lihat selengkapnya tentang Font Color beserta demonya.

#22.3 Marking Text

<span class="mark-color">
teksnya
</span>

<span class="mark-blue">
teksnya
</span>

<span class="mark-red">
teksnya
</span>

<span class="mark-green">
teksnya
</span>

<span class="mark-orange">
teksnya
</span>

Lihat selengkapnya tentang Marking Text beserta demonya.

#22.4 Highlight Bottom Text

Highlight Bottom Text

<span class="highlight-bottom">Menyoroti Bagian Penting dengan Highlight Bottom Text</span>

23. Arrow Down Animation (Animasi Panah)

Kita bisa menggunakannya untuk mendorong pengguna melakukan tindakan scroll (menggulir) ke bawah untuk membaca lebih lanjut, mengisi formulir, atau menekan tombol CTA.

Kode HTML:

Arrow Down Animation

<div class="arrow-down-wrapper">
    <span class="arrow-down"></span>
    <span class="arrow-down"></span>
    <span class="arrow-down"></span>
</div>

Demo: Lihat di sini

Demikian fitur-fitur yang bisa digunakan untuk membuat landing page blogspot dengan Template Lajang Spot. Semoga bermanfaat!