Tips Mempercantik Tampilan Landing Page Yang Menggunakan Unbounce • Blog Situstarget
Blog Situstarget » Tips Tekno » Tips dan Trik Membangun Landing Page Menggunakan Unbounce

Tips Mempercantik Tampilan Landing Page Yang Menggunakan Unbounce

Apa itu Unbounce? Unbounce adalah situs web yang menyediakan layanan drag and drop builder untuk membuat sebuah landing page.

Pada artikel kali ini saya akan berbagi mengenai tips dan trik yang mungkin bermanfaat untuk mempercantik tampilan landing page kamu di Unbounce.

Mari, kita mulai.

1. Cara Menambahkan Kode JavaScript

Pembahasan pertama kita yaitu cara menambahkan sebuah custom kode JavaScript maupun CSS pada landing page.

Kamu bisa menambahkan sebuah atau beberapa kode khusus untuk JavaScript maupun CSS dengan mengakses menu yang terlihat di bawah ini.

Panah yang berwarna merah untuk memasukan kode JavaScript, sedangkan yang berwarna biru untuk kode CSS.

Misalnya kamu ingin menambahkan sebuah tracking code untuk Google Tag Manager.

Ada dua kode JavaScript yang perlu kamu masukkan, pertama di bagian Head </head>.

Kedua, pada bagian after body tag <body>.

Bagaimana dengan Google Analytics saja misalnya, tidak menggunakan GTM.

Kamu cukup memasukkan kode tracking Google Analytics pada bagian Head </head> saja.

Nah, itu mengenai cara menambahkan kode JavaScript. Bagaimana dengan kode CSS?

Terkait mengenai cara menambahkan kode script CSS, ini berkaitan dengan poin keempat sebagai contohnya.

2. Membuat Favicon Pada Landing Page

Favicon atau favorite icon adalah sebuah gambar sebagai penanda, identifikasi brand, sekaligus cara untuk meningkatkan brand recognition.

Misalnya kamu membuka banyak tab di browser. Lalu kamu mau kembali membuka situs web Google.

Tab ini sudah pernah kamu buka sebelumnya, dengan hanya melihat gambar favicon kamu bisa switch ke tab lain dengan mudah.

Manfaat favicon pada sebuah web atau halaman landing page.

Pada contoh gambar di atas, saya memiliki tiga tab pada browser yang telah membuka halaman Google sebelumnya. Saya juga membuka website lain seperti Google Docs, Spreadsheet, Shopify, Google Slide, dll.

Kamu pun sepintas hanya melihat gambar favicon di atas saja sudah mengetahui situs apa saja yang sedang saya buka. Ya kan?

Sekarang, kamu sudah mengetahui manfaat dari favicon. Bagaimana cara memasukkan favicon pada landing page di Unbounce?

  • Tambahkan sebuah Javascript baru.
  • Beri nama pada script tersebut Favicon.
  • Pilih placement pada Head.
  • Selanjutnya tinggal kamu upload gambar di situs seperti imgur, imgbb, dsb.
  • Masukkan URL gambar pada kode di bawah ini:
<link rel="icon" type="image/png" sizes="32x32" href="Ganti dengan URL Gambar">
<link rel="icon" type="image/png" sizes="96x96" href="Ganti dengan URL Gambar">
<link rel="icon" type="image/png" sizes="16x16" href="Ganti dengan URL Gambar">

Contoh di atas, saya menggunakan file PNG dengan transparent background.

Ekstensi file gambar lain yang bisa kamu gunakan yaitu .ICO.

Ada sedikit penyesuian script menjadi seperti ini:

<link rel="icon" type="image/x-icon" href="https://yoursite.com/favicon.ico" />

3. Cara Mengubah Versi Mobile Tanpa Mengubah Tampilan Desktop

Pada saat kamu membuat sebuah landing page di Unbounce, akan ada dua tampilan versi desktop maupun mobile.

Perubahan yang kamu lakukan pada tampilan desktop bisa berpengaruh pada tampilan mobile, begitu pun sebaliknya.

Cara agar perubahan yang kamu lakukan pada versi mobile tidak berdampak pada tampilan desktop.

Ada beberapa hal yang bisa kamu lakukan yaitu:

Gunakan Layout Assistant

Akses dahulu tampilan versi mobile di bagian pojok kanan bawah.

Setelah itu, akses ke menu yang ada di pojok kanan atas, klik tab Properties > Layout Assistant.

Pilih sebuah section yang masih berantakan sebelumnya.

Klik tombol Section untuk memperbaiki tampilan agar lebih rapih pada versi mobile.

Hasilnya kurang lebih seperti ini.

Tahan Tombol Kontrol Di Windows dan Command di Mac

Pada saat kamu memindahkan sebuah element apapun itu, agar perubahan yang terjadi tidak berdampak pada versi mobile atau sebaliknya.

Ketika drag and drop sebuah elemen, klik tombol Control di Windows atau Command di MacOS, agar penempatan elemen pada versi yang lain tidak terpengaruh.

Manfaatkan Fitur Scale Bar

Dengan fitur scale bar, kamu bisa mengubah elemen ukuran teks agar tidak saling berpengaruh pada kedua tampilan.

Kamu tinggal pilih sebuah elemen teks pada versi mobile, lalu pada tab Properties di panel sebelah kanan terdapat tulisan Adjust font size (mobile only).

Setelah itu, kamu tinggal melakukan penyesuaian ukuran teks pada tampilan versi mobile.

Tips berikutnya yaitu mengenai cara menambahkan FAQ (Frequently Asked Questions) di landing page Unbounce.

4. Cara Membuat FAQ Di Landing Page Unbounce

Mungkin kamu perlu menambahkan penjelasan lebih lanjut mengenai FAQ di landing page.

Kamu bisa menambahkan FAQ dengan cara berikut ini:

Buatlah sebuah stylesheet baru bernama FAQ, lalu masukkan kode CSS berikut ini:

<style>
  .faq p {
    margin-bottom:16px;
  }
#accordion {
  font-family: "Source Sans Pro" !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 300 !important;
  color:#303030;
    background: transparent;
    border-radius: 0px;
  }
  #accordion p {
    font-size:18px !important;
    font-weight: 300 !important;
    color:#303030;
    line-height: 28px !important;
  }
  #accordion p a {
    color:#03f;
    text-decortion:underline;
  }
 .ui-widget {
  font-family: "Source Sans Pro" !important;
  font-size: 18px !important; 
  font-weight: 300 !important;
   color:#303030;
  }
  .ui-widget-content a {
    color:#0033ff;
  }
  .ui-accordion .ui-accordion-header {
  font-family: "Barlow Semi Condensed" !important;
  font-size: 21px !important; 
  font-weight: 400 !important; 
    color:#303030;
    padding: .75em .5em .75em .7em !important;
  }
  .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #303030 !important;
    background: #303030 !important;
    font-weight: normal;
    color:#fff !important;
  }
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #d8d8d8;
    background: #f9f8f7;
  }
</style>

Tambahkan sebuah elemet kode HTML pada landing page Unbounce.

Masukkan kode HTML dengan cara melakukan insert Custom HTML ke section di landing page.

Dan kamu tinggal ganti dengan poin pertanyaan dan jawaban FAQ versi kamu sendiri.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>

<body>
  <div id="accordion">
    <h3>Pertanyaan 1 </h3>
  		<div>
		    <p>Jawaban kamu.</p>
	    </div>

    <h3>Pertanyaan 2</h3>
	    <div>
    		<p>Jawaban kamu.</p>
	    </div>

    <h3>Pertanyaan 3</h3>
		<div>
    <p>Jawaban kamu.</p>
 
  </div>
<h3>Pertanyaan 4
</h3>
  <div>
    <p>Jawaban kamu.</p>
   </div>

    <h3>Pertanyaan 5</h3>
  <div>
   <p>Jawaban kamu.</p>
  </div>
  

 </div>
  
 
</body>
</html>

Jangan lupa untuk melakukan penyesuian tampilan kotak FAQ pada tampilan desktop maupun mobile.

Kamu tinggal ubah ukuran element HTML saja dengan cara drag and drop untuk memperbesar atau memperkecil.

5. Cara Menghubungkan Custom Domain Di Unbounce

Pada saat kamu membuat landing page baru, Unbounce memberikan sebuah sub domain untuk landing page tersebut.

Kamu juga bisa mengubah alamat landing page tersebut menggunakan custom domain. Misalnya saja bisniskamu.tld, usahakamu.tld, peluangusaha.tld, dst.

Langkah yang perlu dilakukan yaitu klik tombol Add a Domain.

Sumber gambar: documentation.unbounce.com

Setelah itu, masukkan nama domain yang sebelumnya telah kamu beli beserta sub domainnya.

Unbounce akan memberikan record untuk CNAME, tinggal kamu tambahkan saja pada DNS Management domain kamu.

Domain akan resolved dalam waktu beberapa menit atau jam.

Unbounce akan memberitahu jika domain sudah resolved dan bisa kamu gunakan.

Jangan lupa untuk mengaktifkan fitur SSL agar tidak ditandai browser sebagai situs yang tidak aman.

Klik toggle Force ‘https’ on all non-WordPress domains dari off menjadi on.

Dengan mengaktifkan tombol tersebut, situs kamu akan otomatis menggunakan mode HTTPS atau menggunakan SSL.

Pengaturan ini ada pada menu Domain.

6. Redirect Naked Domain To Sub Domain

Sebagai contoh di poin kelima misalnya kamu menggunakan sub domain WWW.

Alamat lengkap landing page kamu adalah www.landingpagekamu.tld, misalnya seperti ini.

Pada saat pengunjung mengakses landing page tanpa WWW, yang pengunjung ketik di browser adalah landingpagekamu.tld saja.

Kemungkinan besar pengunjung tersebut akan melihat tampilan halaman error 500 seperti gambar di bawah ini.

Cara melakukan redirect domain dari non WWW ke WWW pada landing page Unbounce

Hal ini terjadi karena pada naked domain tidak melakukan redirect ke mana pun.

Pada tips keenam, kita akan membuat redirection dari halaman non-WWW ke halaman WWW.

Kamu bisa menambahkan sebuah record baru pada DNS management dengan konfigurasi A record menuju IP Unbounce.

Buatlah sebuah A record baru, isi hostname dengan nama domain kamu atau masukkan @.

Isi alamat IP Address ke 54.84.104.245.

Setelah domain berhasil, naked domain kamu akan melakukan redirect ke halaman landing page yang ada di WWW tadi.

7. Menambahkan Efek Smooth Scrolling

Kamu bisa menambahkan efek smooth scrolling pada landing page.

Misalnya kamu membuat sebuah anchor link untuk berpindah dari satu section ke yang lain.

Maka hasilnya akan terlihat seperti gambar di bawah ini.

Cara menambahkan smooth scrolling pada landing page.

1. Tambahkan sebuah script baru di bagian Javascript.

2. Pasang jQuery dengan kode berikut (pilih placement pada Head):

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

3. Buat lagi sebuah script baru di bagian Javascript dan beri nama Smooth Scrolling script, lalu pilih placement pada Before Body End Tag.

<script>
jQuery($ => {
// The speed of the scroll in milliseconds
const speed = 1000;
$('a[href*="#"]')
.filter((i, a) => a.getAttribute('href').startsWith('#') || a.href.startsWith(`${location.href}#`))
.unbind('click.smoothScroll')
.bind('click.smoothScroll', event => {
const targetId = event.currentTarget.getAttribute('href').split('#')[1];
const targetElement = document.getElementById(targetId);
if (targetElement) {
event.preventDefault();
$('html, body').animate({ scrollTop: $(targetElement).offset().top }, speed);
}
});
});
</script>

8. Menambahkan Meta Title dan Meta Description

Meta title adalah sebuah title tag yang berfungsi sebagai headline dari halaman landing page.

Apa yang terlihat pada judul di landing page bisa berbeda dengan apa yang terlihat di halaman hasil pencarian.

Pada saat membuat sebuah judul untuk artikel, kamu bisa buat semenarik mungkin.

Namun, untuk meta title yang akan tampil di halaman hasil pencarian Google atau Search Engine ada batasan karakter yang bisa kamu gunakan.

Batasannya yaitu untuk meta title berkisar 50-60 karakter saja, sedangkan meta description batasan karakternya yaitu 155-160 karakter.

Berikut ini adalah contoh penerapan Meta Title dan Meta Description.

Contoh penerapan meta title dan meta description

Kamu bisa mengatur meta title dan meta description di landing page Unbounce pada tab menu Page Properties > Title & Meta Data.

Bagian yang menurut saya krusial untuk diisi yaitu meta title dan meta description.

Bagian meta keywords sudah tidak lagi relevan untuk saat ini dan bisa kamu kosongkan saja.

9. Cara Membuat Sebuah Lingkaran

Gambar bulet atau lingkaran terkadang dibutuhkan untuk menampilkan sebuah gambar ikon atau logo.

Secara teknis, bisa sih memang tinggal upload gambar langsung dalam format lingkaran.

Namun kalau kamu menggunakan aplikasi desain seperti Canva, hasil export hanya akan berbentuk sebuah persegi.

Cara mengubah agar gambar persegi tadi menjadi sebuah gambar berbentuk lingkaran.

Kamu bisa membuatnya menggunakan sebuah box baru, lalu ubah Corner Radius menjadi 101.

Box yang tadinya berbentuk persegi akan berubah menjadi sebuah lingkaran.

10. Menghilangkan Atau Menambahkan Border

Masih pada menu yang sama di nomor kesembilan, kamu juga bisa menghilangkan atau menambahkan border pada elemen box dengan mengklik bagian tab properties > border.

Gaya bordernya bisa kamu sesuaikan apakah garis utuh, putus-putus, titik-titik, dst.

Kamu juga bisa mengatur ketebalan dari border tersebut, contohnya saya menggunakan border dengan value 3, hasilnya garis menjadi terlihat sedikit tebal.

Warna dari border juga bisa kamu sesuaikan dengan color palette atau sesuai dengan kebutuhan kamu, dan terakhir adalah lokasi border apakah di dalam atau di luar box.

Beberapa tips lainnya yang mungkin bermanfaat terkait cara mempercantik landing page Unbounce bisa kamu lihat pada link berikut ini.

Baca juga beberapa tulisan menarik berikut ini:

Mohon sebarkan tulisan ini jika kamu rasa bermanfaat ya.

Jazakumullah khair.

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan.

Gabung Bersama +30.000 Pembaca Kami!

Daftarkan email anda untuk mendapatkan artikel terbaru dari Situstarget.com.

Proses pendaftaran hampir selesai, mohon cek email Anda dan Klik tombol konfirmasi.

Pin It on Pinterest

Share This