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.
<div class="lp-header-content">
<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>Layanan Iklan Jakarta</span>
</div>
<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>Salin-tempel dan edit pada Widget LP Header Section di menu tata letak blog.
2. LP Grid
Digunakan untuk membuat tampilan grid suatu elemen.
#2.1 LP Grid untuk Umum
Letakkan dimana saja Anda inginkan, digunakan untuk daftar item tertentu.👇
Untuk menambahkan video youtube, kita gunakan kode:
<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:
<h2><ins>Apa Saja Keunggulan Utamanya?</ins></h2>
<div class="lp-grid">
<div class="lp-item">
<div class="lp-icon"> 🚀 </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"> 💰 </div>
<h3>Gratis & Hemat</h3>
<p>Menggunakan platform Blogger gratis, jadi tidak perlu bayar biaya hosting bulanan.</p>
</div>
<div class="lp-item">
<div class="lp-icon"> 🔧 </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>
Keterangan:
- Kode di atas merupakan potongan kode yang saya gunakan pada landing page homepage lajang spot.
- Saya menggunakan icon html dan svg pada kode di atas.
- Kod di atas diletakkan pada bagian elemen landing pag What Product.
Selain itu, Anda juga bisa gunakan kode "lp-grid lp-item" di atas untuk daftar alasan pemesanan suatu produk atau layanan.
Tapi, pada landing page homepage Lajang Spot, saya menggunakan elemen <ul> atau <ol> saja. 👇
Untuk menambahkan video youtube, kita gunakan kode:
<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>
Kode alasan pemesanan tentu saja diletakkan pada elemen landing page Why Product.
#2.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.👇
<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.
3. LP Container
Digunakan untuk mengelompokkan dan membungkus elemen-elemen lain seperti teks, gambar, atau tag lainnya dengan kotak beradius dan ber-background putih.
<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:
<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>
Saya juga menggunakan lp-container untuk membungkus elemen headline dan subheadlie pada Widget HTML #4 (Label Produk) untuk membuat Landing Page Katalog Produk.👇
<div class="lp-container">
<div id="headline">
<h2>Stop <span class="font-red">buang-buang waktu</span> mencari <span class="font-color">template blogger landing page</span> untuk <strong>Bisnis</strong> Anda</h2>
</div>
<div id="subheadline">
<p>Percayakan pada Template Lajang Spot, Gratis Biaya Bulanan dan Mudah Digunakan</p>
</div>
</div>
4. 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.
<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.
5. Ads Image/Video
Anda bisa menggunakan kode berikut untuk mengatur tampilan gambar atau video terletak di tengah dan max-width 480px.
5.1 Ads Image
<div class="ads-image"><img alt="Judul gambarnya" src="URL GAMBAR" width="480px" height="480px"></div>5.2 Ads Video Blogger
Untuk menambahkan video upload di blogger, kita gunakan kode:
<div class="ads-video"><object class="BLOG_video_class" contentid="ID_VIDEO" height="480" id="BLOG_video-ID_VIDEO" width="480"></object></div>5.3 Video Youtube
Untuk menambahkan video youtube, kita gunakan kode:
<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>6. 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.
7. Testimonial Slideshow
<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.
8. 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">❮</a>
<a class="next" data-action="next">❯</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.
9. FAQ
<div id="faq">
<h2>FAQ-nya</h2>
<details>
<summary>pertanyaan-1?</summary>
<p>Jawaban-1</p>
</details>
<details>
<summary>Pertanyaan-2?</summary>
<p>Jawaban-2</p>
</details>
<details>
<summary>Pertanyaan-3?</summary>
<p>Jawaban-3</p>
</details>
</div>
Lihat selengkapnya tentang FAQ beserta demonya.
10. 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.
<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.
11. Subheading
<div class="subheading">
<h2>Teks Judul</h2>
</div>
Catatan: h2 bisa diganti h3 dan h4.
12. Blockquote
<blockquote>
teks
</blockquote>
13. Formatting Teks
Formatting teks adalah proses mengatur tampilan visual teks untuk meningkatkan kejelasannya, seperti mengubah font, ukuran, warna, spasi, dan perataan.
#13.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.
#13.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.
#13.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.
#13.4 Highlight Bottom Text
<span class="highlight-bottom">Menyoroti Bagian Penting dengan Highlight Bottom Text</span>
14. LP Floating Contact
Tombol kontak melayang hanya diatur tampil di landing page homepage, sedangkan pada postingan produk tidak.
Jadi, tambahkan secara manual pada postingan produk atau jasa Anda.
<div class='lp-floating-contact'>
<div class='floating-contact-buttons'>
<a class='floating-whatsapp' href='"https://wa.me/6281234567890' rel='nofollow' target='_blank'>
<svg viewbox='0 0 24 24'>
<path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/>
</svg>
</a>
</div>
<div class='floating-contact-buttons'>
<a class='floating-phone' href='"tel:+6281234567890'>
<svg viewbox='0 0 24 24'>
<path d='M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.68,14.91 16.08,14.82 16.43,14.94C17.55,15.35 18.78,15.58 20,15.61C20.55,15.61 21,16.05 21,16.6V20C21,20.55 20.55,21 20,21C10.62,21 3,13.38 3,4C3,3.45 3.45,3 4,3H7.4C7.95,3 8.39,3.45 8.39,4C8.42,5.22 8.65,6.45 9.06,7.57C9.18,7.92 9.09,8.32 8.82,8.59L6.62,10.79Z'/>
</svg>
</a>
</div>
</div>
Catatan: Ganti yang bertanda merah dengan nomor yang ingin Anda gunakan.
Lihat selengkapnya tentang LP Floating Contact beserta demonya.
Demikian fitur-fitur yang bisa digunakan untuk membuat landing page blogspot dengan Template Lajang Spot. Semoga bermanfaat!
Posting Komentar untuk "Fitur-fitur Template Lajang Spot untuk Membuat Landing Page"