Unlimited Powerpoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. HTML
Business

Cara Membuat Landing Page Bootstrap HTML5 Responsif dengan Cepat

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Saat Anda bersiap meluncurkan situs web, produk, atau layanan baru, Anda memerlukan tempat khusus untuk mengirim calon pelanggan dan klien. Tapi, situs Anda mungkin belum siap untuk menyambut pengunjung baru. Dalam kasus tersebut, template landing page HTML5 adalah pilihan tepat.

Template HTML5 cepat dan mudah dipasang. Tidak seperti CMS yang mungkin menggunakan bahasa pemrograman yang kompleks, template HTML mudah diedit bahkan untuk pemula.

Dalam tutorial ini, saya akan menjelaskan manfaat menggunakan template halaman arahan HTML dan menunjukkan cara mengaturnya. Jangan khawatir: cepat dan tidak menyakitkan.

Keuntungan Menggunakan Template HTML Landing Page

Seperti yang sudah saya sebutkan, Anda bisa memasang dan menyiapkan halaman arahan dengan agak cepat. Tapi, ada beberapa manfaat lain untuk menggunakannya:

  • Mereka mudah disesuaikan dengan konten dan warna pilihan Anda.
  • Berkat kode yang lebih sederhana, jadi ringan, yang berarti landing page Anda akan dimuat dengan cepat.
  • Akhirnya, template HTML tidak memerlukan perawatan tambahan atau pembaruan, jadi Anda tidak perlu khawatir kehilangan waktu pra-peluncuran yang berharga.

Sekarang setelah saya mengulas manfaat template HTML, mari selami tutorialnya.

Cara Menggunakan Template Landing Page HTML

Untuk keperluan tutorial ini, saya akan menggunakan template Murni. Ini adalah template bersih dan minimal yang dapat digunakan untuk berbagai tujuan dan dilengkapi dengan formulir kontak kerja dan formulir pendaftaran MailChimp.

The Pure HTML template

Selain template, ada beberapa alat lain yang Anda perlukan sehingga Anda dapat memodifikasi template dan menghidupkan situs Anda:

1. Nama Domain dan Perusahaan Hosting

Sebelum memilih kerangka untuk landing page Anda, Anda harus membeli nama domain dan mendaftar ke hosting plan. Saat ini, Anda dapat membeli paket hosting mulai dari $5/bulan dan sebagian besar perusahaan hosting akan memberi Anda nama domain secara gratis saat Anda mendaftar ke plan nya. Beberapa perusahaan hosting akan menawarkan ruang dan bandwidth tak terbatas, dan beberapa akan membatasi sumber daya yang tersedia.

Pastikan untuk melakukan penelitian Anda dan baca beberapa ulasan independen tentang perusahaan hosting yang membuat Anda tertarik. Melihat seberapa puas pelanggan mereka sebelumnya bisa menjadi indikator hebat tentang layanan yang ditawarkan dan kualitas dukungan pelanggan.

2. FTP Client

Item berikutnya pada daftar Anda harus menjadi klien FTP. Ini akan memungkinkan Anda terhubung ke server hosting Anda dan mengunggah file template.

Ada banyak klien FTP yang tersedia untuk berbagai sistem operasi. Platform FTP yang populer yang bisa digunakan pada semua platform adalah FileZilla. Ini juga bebas untuk diunduh dan digunakan.

3. Code Editor

Anda memerlukan editor kode untuk mengubah template Anda. Menggunakan editor kode akan memudahkan Anda menemukan kode yang perlu Anda edit karena mereka menggunakan penyorotan sintaks khusus. Anda dapat menggunakan Notepad++ jika Anda pengguna Windows atau TextWrangler jika Anda pengguna Mac. Pilihan lainnya adalah menggunakan Sublime Text 3 yang bisa digunakan pada komputer Windows dan Mac, serta Linux, dan menawarkan ujicoba gratis.

4. Template & Konten HTML untuk Landing Page Bootstrap Anda

Akhirnya, Anda harus membeli dan mengunduh template landing page dan menyiapkan konten yang akan masuk ke landing page Anda. Anda dapat menemukan banyak template landing page html di Envato Elements yang dirancang khusus untuk landing page. Setelah Anda menemukan template yang Anda sukai, membelinya dan mendownloadnya ke komputer Anda. Pastikan unzip folder dan simpan di tempat Anda dapat dengan mudah mengaksesnya.

Kumpulkan semua gambar dan teks yang ingin Anda tambahkan ke halaman arahan Anda. Menjaga semuanya dalam satu tempat akan memudahkan untuk menambahkannya ke template dan juga mentransfer gambar ke server Anda.

Cara Menyesuaikan Template Landing Page HTML Anda

Dengan segala yang ada, saatnya menyesuaikan template dan menambahkan informasi Anda ke dalamnya. Mari kita mulai dengan mengenal struktur template.

1. Struktur Template

Seperti yang disebutkan sebelumnya, saya menggunakan template halaman arahan Murni HTML.

Setelah membuka zip folder, Anda dapat melihat bahwa template landing page bootstrap berisi beberapa subfolder dan sejumlah file HTML. Inilah strukturnya:

  • CSS. Folder ini berisi file CSS yang mengontrol font dan warna yang digunakan dalam template serta keseluruhan tata letak halaman. Anda harus mengedit file ini jika ingin mengubah gaya default.
  • Dokumentation. Di sini, Anda akan menemukan dokumentasi untuk template Murni yang menjelaskan bagaimana template bekerja dan bagaimana menyesuaikannya.
  • Fonts. Folder ini memiliki semua font ikon
  • Img. Folder img menyimpan semua gambar latar belakang yang digunakan dalam template
  • Js. Folder Javascript memiliki semua kode Javascript yang dibutuhkan agar templat berfungsi dengan benar. Ini menyediakan fungsionalitas tambahan untuk menu toggling, memvalidasi bentuk, mengendalikan animasi. Biasanya, Anda tidak perlu mengedit file dalam folder ini.
  • Php. Folder ini menyimpan kode PHP yang diperlukan agar formulir kontak berfungsi. Anda harus mengedit file-file ini sehingga formulir kontak dan MailChimp Anda mengumpulkan dan mengirimkan informasi dengan benar.
  • Sass. Folder sass berisi semua variabel untuk stylesheet.

Anda juga akan melihat beberapa file HTML, yang mewakili versi demo yang berbeda dari template landing page HTML. Anda bisa klik kanan atau klik dua kali masing-masing file HTML untuk membukanya di browser pilihan Anda dan lihat tampilannya. Bila Anda telah menemukan versi demo yang Anda sukai, tutup semua tab lainnya.

Template file structure

Saya akan bekerja dengan template index-normal-scroll-countdown.html sepanjang sisa tutorial.

2. Edit File HTML

Sekarang template halaman arahan HTML pilihan Anda terbuka di browser Anda, inilah saatnya mengganti informasi dengan Anda sendiri. Cara termudah untuk melakukannya adalah dengan memahami bagian kode mana dalam template yang perlu diubah. Mari kita mulai dengan mengklik kanan pada baris pertama teks di bawah meja dan mengklik Inspect.

Panel baru akan muncul di bagian bawah jendela browser Anda. Anda akan melihat bahwa itu menunjukkan kode HTML yang membentuk template kita di sisi kiri serta CSS yang menyediakan gaya untuk template di sisi kanan.

Finding HTML with Inspector
Seperti yang dapat Anda lihat dari tangkapan layar, kalimat yang dipilih ada di antara tag <p> yang mewakili paragraf. Sebagian besar tag dalam HTML terdiri dari pasangan tag yang memiliki pembuka dan tag penutup. Konten harus ditempatkan di antara tag tersebut untuk ditampilkan di laman web:

<p class="open- anim opacity-0">Before the launch, enjoy a <strong>Very Limited Opportunity</strong> by subscribing to our newsletter.<br>

Click on the next button to get more information about our project.</p>

Untuk mengganti informasi dummy dalam template, semua yang perlu diketahui tag mana yang berisi informasi yang ingin Anda edit. Kemudian, Anda dapat menemukan tag tersebut di editor kode dan memasukkan teks Anda sendiri.

Sekarang setelah Anda tahu cara menemukan kode yang perlu diedit, kembali ke folder template, klik kanan pada file HTML yang Anda pilih dan pilih Open with, dan pilih editor kode yang Anda download tadi. Anda harus melihat kode HTML lengkap yang membentuk template Anda.

Gulir ke bawah editor kode sampai Anda menemukan baris kode yang sama dengan yang kami soroti di browser. Seharusnya sekitar garis 75-76. Kemudian, klik di dalam tag <p>, sorot teks dan ganti dengan Anda sendiri.

Editing HTML

Untuk mengedit sisa template, Anda cukup mengulangi langkah-langkah di atas sampai semua informasi yang Anda inginkan disertakan.

Anda juga dapat menghapus bagian dari template jika Anda tidak ingin mereka muncul. Demikian pula, Anda juga bisa menduplikat bagian jika ingin menyertakan lebih banyak informasi. Cukup pilih bagian template yang dimulai dengan tag pembuka dan sorot semuanya sampai dan termasuk tag penutup untuk bagian itu dan hapus atau salin dan tempelkan bagian di bawah ini.

Setelah selesai mengganti konten, saatnya mengganti gambar sampel dengan foto Anda sendiri. Agar proses ini lebih mudah, lihatlah nama gambar di folder img template dan kemudian beri nama gambar Anda dengan menggunakan nama yang sama. Kemudian, pilih semua gambar placeholder, hapus, dan letakkan gambar Anda di folder img sebagai gantinya.

Cara Menyesuaikan Tampilan Template Landing Page HTML Anda

Sekarang saatnya untuk men-tweak tampilan template Anda dan mengedit style di CSS. Secara default, template Murni dilengkapi dengan stylesheet yang berbeda untuk versi template yang gelap dan ringan:

CSS Files

Untuk mengetahui stylesheet mana yang perlu Anda edit, lihat file HTML Anda di editor kode dan cari baris yang serupa dengan ini:

<link rel="stylesheet" type="text/css"href=css/style.css"/>

Buka map template Anda dan buka stylesheet yang sesuai di code editor.

Untuk melihat baris kode dan gaya yang perlu Anda edit, Anda dapat mengulangi proses yang sama dengan yang kami gunakan untuk mengedit HTML.

Di browser Anda, klik kanan pada elemen yang ingin Anda pilih dan pilih Inspect. Lihatlah ke kanan dan Anda akan melihat gaya yang digunakan untuk bagian template itu:

Editing CSS

Seperti yang dapat Anda lihat dari tangkapan layar, Inspector menunjukkan gaya yang digunakan untuk teks paragraf. Beralih ke editor kode dan file stylesheet. Gulir ke bawah sampai Anda menemukan baris kode yang dimulai dengan hal.

Di sini, Anda bisa mengganti font yang digunakan, ukuran font, serta warna teks.

Jika Anda ingin mengubah warna latar belakang template, carilah baris kode yang mengatakan body diikuti kurung kurawal lalu masukkan kode warna HEX setelahnya

bagian yang bertuliskan background-color.

Jangan lupa untuk menyimpan semua perubahan yang telah Anda buat dengan mengklik Save di editor kode Anda.

1. Upload File Anda ke Server

Setelah Anda memodifikasi template sesuai dengan keinginan Anda, Anda harus mengunggahnya ke server hosting Anda. Penyedia hosting Anda akan mengirimkan email berisi semua informasi yang Anda butuhkan untuk mentransfer file dengan FTP.

Luncurkan program FTP anda seperti FileZilla. Anda akan melihat bar bagian atas tempat Anda bisa memasukkan nama server, nama pengguna, dan kata sandi Anda. Dengan menggunakan informasi yang diberikan oleh host Anda, sambungkan ke server Anda dengan mengklik QuickConnect.

Di sisi kiri jendela FileZilla, cari folder dengan template Anda di komputer Anda dan klik di atasnya untuk memperluasnya. Pilih semua file dan folder dan seret mereka ke sisi kanan layar ke folder public_html.

Setelah semua file diupload, buka browser Anda dan masukkan nama domain Anda. Selamat, situs Anda sekarang hidup!

2. Dapatkan Lebih Banyak dari Template Landing Page Bootstrap Anda

Landing page dapat melakukan keajaiban bagi bisnis atau produk Anda saat Anda mempersiapkan peluncuran. Berikut adalah beberapa tips yang akan membantu Anda mengoptimalkan template landing page HTML Anda dan membantu Anda membuat hype:

Untuk mempelajari lebih lanjut tentang template landing page HTML atau template landing page bootstrap, tinjau tutorial ini:

Cara Menggunakan Template Landing Page untuk Mengumpulkan Prospek

Dengan bantuan template HTML, Anda bisa mendapatkan halaman arahan bootstrap Anda dan berjalan dengan cepat. Mulailah dengan memilih salah satu template landing page HTML kami dari Envato Elements atau salah satu template landing page bootstrap dari ThemeForest. Kemudian, gunakan tutorial kami untuk memandu Anda melalui proses penyiapan.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.