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

Bagaimana Dengan Cepat Membuat Website Satu Halaman: Dari Suatu Templat Responsif

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

Membuat website Anda siap dan berfungsi tidak harus rumit. Pada kenyataannya, Anda bisa membuat situs bisnis yang sederhana tapi efektif dengan bantuan templat website satu-halaman. Menggunakan templat satu halaman mengizinkan Anda memerikan kehadiran online yang sangat dibutuhkan bisnis Anda dan menampilkan semua informasi tentang layanan atau produk yang Anda tawarkan.

Manfaat tambahan adalah kenyataan bahwa orang yang tertarik dengan bisnis Anda bisa langsung melihat semua detail yang mereka butuhkan tanpa harus mengklik berbagai halaman. Karena situs satu halaman sering menampilkan beberapa fitur panggilan aksi, Anda punya kesempatan lebih banyak mengonversi pengunjung jadi pembeli potensial.

Di tutorial ini, kami akan mendampingi Anda belajar langkah-langkah pengaturan awal website Anda dengan templat HTML satu halaman. Kami akan membahas alat-alat yang akan Anda butuhkan, rincian teknis pengubahsuaia templat Andam dan bagaimana mengunggahnya ke server Anda. Kami juga akan memberikan Anda beberapa tips penting tentang bagaimana membuat website satu halaman yang efektif. Mari kita mulai!

Sebelum Anda Memulai

Sebelum Anda membuat website satu halaman, ada beberapa hal yang Anda butuhkan. Penjelasannya ada di bawah ini.

1. Nama Domain

Pilihan yang paling jelas adalah dengan menggunakan nama bisnis Anda untuk domainnya. Kalau namanya sudah ada yang memakai, Anda bisa mencoba untuk menambahkan kata-kata seperti perusahaan, agensi, atau studio lalu membeli nama domainnya.

Juga direkomendasikan untuk menggunakan ekstensi .com karena ini adalah salah satu ekstensi tertua dan yang paling kredibel. Meskipun demikian, jika Anda tidak bisa mendapatkan nama yang sesuai dengan ekstensi .com, ekstensi .net juga layak dipertimbangkan.

Perusahaan Hosting

Menemukan perusahaan hosting yang bagus pada awalnya terlihat mustahil. Secara umum Anda mungkin ingin mencari host yang memiliki ulasan yang bagus di website pihak ketiga karena kemungkinan tidak bias. Perhatikan apa yang orang sampaikan tentang uptime, layanan pelanggan, dan kemudahan penggunaan.

3. Templat HTML

Langkah berikutnya adalah menemukan templat untuk website Anda. Tempat yang bagus untuk memulai pencarian adalah pasar ThemeForest. Anda bisa memilih dari ratusan templat situs satu halaman profesional yang menyasar berbagai ceruk, atau jelajahi seleksi terpilih kami dari beberapa yang terbaik.

4. Editor Kode dan Klien FTP

Karena Anda harus mengedit templat atau mengganti informasi dengan milik Anda sendiri, Anda akan membutuhkan editor kode. Editor itu akan menyorot sintaks dan memudahkan untuk menemukan bagian kode yang butuh dimodifikasi.

Untuk tutorial ini, saya akan menggunakan Sublime Text yang bisa digunakan di Mac, Windows, dan Linux dan memiliki versi coba gratis.

Anda juga akan membutuhkan klien FTP seperti FileZilla untuk dihubungkan ke server Anda dan mengunggah file-file website tanpa harus melakukannya satu per satu. FileZilla adalah layanan gratis yang tersedia untuk semua sistem operasi.

Sekarang mari melihat rincian cara membuat website satu halaman dimulai dengan mengunduh dan melakukan pengaturan awal templat situs Anda.

Bagaimana Mengedit Konten Templat Website Anda

Setelah Anda mengumpulkan semua file dan sarana yang dibutuhkan, sekarang saatnya memodifikasi templat HTMLnya. Untuk tutorial ini, saya akan menggunakan templat website Wander. Mulailah dengan mengunduh file-file templat dari halaman Downloads fi ThemeForest. Ekstrak isi folder yang dizip dan buka foldernya. Anda akan mendapati bahwa folder tersebut berisi suatu folder dokument dan juga file-file templat situs.

Wander website templateWander website templateWander website template
Bagaimana membuat website satu halaman dengan templat HTML Wander.

Karena ini adalah templat serba guna, ada sejumlah kecil file di dalamnya. Templat Anda mungkin hanya memiliki satu file HTML tunggal dan folder yang berisi stylesheet, file script, dan gambar.

Untuk mengedit templatnya sesuai keinginan, Anda harus memodifikasi file HTML yang biasanya bernama index.html. Untuk Wander, saya akan mengedit file bernama home-one-page.html karena kita membuat website satu halaman.

Bekerja dengan HTML

Jika Anda tidak pernah bekerja dengan templat HTML sebelumnya, file ini mungkin terlihat menakutkan jika Anda mencoba membukanya di Sublime Text atau editor lainnya. Meskipun tutorial lengkap HTML berada di luar lingkup artikel ini, mari membahas dasar-dasar HTML, tentang apa HTML itu dan bagaimana kelihatannya.

HTML adalah bahasa markup yang terdiri dari tanda seperti <h1>, <p>, <li>, dan yang lainnya. Tanda tersebut berpasangan, masing-masingnya memiliki pembuka dan penutup. Digunakan untuk membantu peramban memahami bagaimana seharusnya menampilkan apa yang ada di antara tanda tersebut.

Suatu paragraf di dokumen HTML akan terlihat seperti ini: <p>This is my paragraph.</p>. Suatu kepala teks dilingkupi dengan tanda h yang diikuti angka 1-6, menunjukkan kepala teks level 1 sampai dengan kepala teks level 6.

Ketika Anda mengedit suatu templat HTML, Anda tidak perlu mengedit tanda (tag) manapun, hanya teks yang ada di antaranya. Tetapi jika Anda ingin menyalin bagian dari kode atau menghapusnya, Anda harus memilih seluruh bagian dari tanda pembuka hingga penutup, lalu salin atau hapus.

Cara paling mudah untuk mengedit templat Anda adalah dengan membukanya di peramban lalu periksa kodenya. Pertama, dobel klik file HTML untuk dibuka di peramban default Anda. Tepat di situ, Anda akan melihat bahwa Anda harus mengedit teks di bagian kepala teks. Klik kanan kalimat We Make BRANDS Shine dan pilih Inspect.

Inspecting HTMLInspecting HTMLInspecting HTML
Menginspeksi HTML di peramban web.

Akan muncul suatu panel di dasar layar yang menunjukkan pada Anda kode HTML templat yang kita buka. Baris yang kalimatnya dipilih ada di sebelah kiri panel Inspector. Anda bisa melihat kalimatnya dilingkupi dengan tanda <h1> dengan kelas large mt20.

Sekarang buka templat Anda di editor kode dengan klik kanan dana templat dan pilih Open with Sublime Text. temukan baris yang sama di kode yang Anda lihat di panel Inspector, pilih teks di antara tanda dan gantikan dengan tagline perusahaan Anda. 

Editing HTML codeEditing HTML codeEditing HTML code
Mengedit kode HTML.

Untuk mengedit paragraf yang berada langsung di bawah headline yang baru saja Anda ganti, kembalilah ke peramban, klik kanan paragraf yang dimaksud dan pilih Inspect. Kali ini, kalimatnya dilingkupi tanda <p> dengan kelas white. Kembalilah ke editor kode Anda, temukan baris kode tersebut, klik di antara tanda dan tambahkan informasi Anda.

Lanjutkan dengan langkah-langkah sampai Anda mengganti semua konten demo dengan milik Anda sendiri. Hapus bagian yang tidak diinginkan dengan memilih semuanya yang berada di antara awal hingga akhir tanda dari bagian kode tertentu.

Dengan cara yang sama, jika Anda ingin menduplikasi bagian templat, temukan kode yang menangani bagian tersebut dan pilih semua termasuk tanda di awal dan akhit, lalu salin dan tempelkan di mana saja Anda ingin kontennya tampil.

Di screenshot di bawah ini, saya ingin menambakan testimoni lainnya, jadi saya memilih kode untuk testimonial ketiga dan langsung menyalinnya di bawahnya.

Perhatikan bahwa dalam hampir semua keadaan, bagian kodenya akan dilingkupi dengan tanda <div> sebelum Anda menuju ke tanda kepala (heading) atau paragraf. Jika Anda ingin menduplikasi atau menghapus bagian itu juga, Anda harus memilih tanda <div>.

Setelah Anda selesai mengedit konten, Anda harus mengganti gambarnya. Cara paling mudah untuk menggantinya adalah dengan mencatat nama gambarnya di folder templat dan menamai gambar Anda dengan nama tersebut. Sekalinya gambar Anda diberi nama dengan benar, salin ke folder gambar.

Bagaimana Mengatur Gaya Templat Website Satu Halaman Anda

Ada satu hal lagi sebelum mengunggah file-file ke server Anda, yaitu mengatur gaya templat untuk disesuaikan dengan brand Anda yang ada. Gaya (style) lokasinya di folder CSS. Untuk Wander, ada beberapa stylesheet dalam folder yang namanya Colors.

Untuk mulai mengedit file CSS, Anda bisa mengikuti langkah yang sama dengan yang kami gunakan untuk mengedit file HTML. Untuk menemukan bagaimana styling elemen tertentu, klik kanan di peramban Anda dan klik Inspect. Kali ini, lihat di sebelah kanan, Anda akan mendapati gaya yang berkaitan dengan elemen tersebut. Panel yang sama juga akan memiliki nama file style yang harus Anda edit pada baris tempat kode tersebut.

Inspecting CSSInspecting CSSInspecting CSS
Menginspeksi CSS di peramban web

Buka filenya di editor kode. Dalam hal ini, filenya bernama theme.css. Karena saya ingin mengedit warna latar belakang di bagian kedua yang memiliki semua fiturnya, saya harus menemukan baris 5378 di file theme.css. Mari mengubahnya jadi hitam.

Editing CSSEditing CSSEditing CSS
Sesuaikan warna latar belakang di CSS dengan cepat.
Jika Anda ingin mengubah warnanya dengan cepat, Anda hanya diharuskan mengganti stylesheet di kepala file HTML dengan nama file CSS yang Anda inginkan.

Carilah baris di kode yang menyatakan:

<link href="css/colors/blue.css".id="color-scheme" rel="stylesheet"type="text/css">

Mengganti namanya ke green.css akan mengubah warna tombol, tautan, dan ikon:

Changing the CSS fileChanging the CSS fileChanging the CSS file
Mengubah warna tombol file CSS.

Untuk mengubah font, inspeksi teks dan tampilan bagian kanan panel Inspektor. Anda akan melihat nama font yang digunakan teks, termasuk juga baris kode yang Anda bisa mengubahnya menjadi font yang Anda inginkan.

CSS code for fontsCSS code for fontsCSS code for fonts
Menemukan lokasi kode CSS untuk font.

Bagaimana Mengunggah Templat Situs Anda ke Server

Sekarang Anda telah memodifikasi dan mengatur gaya templat website satu halaman, Anda bisa mengunggahnya ke server hosting. Host Anda akan menyediakan nama pengguna dan kata sandi yang dibutuhkan untuk koneksi FTP.

Untuk memulai proses pengunggahan, buka FileZilla dan masukkan nama server, nama pengguna, dan kata sandi di bilah atas, lalu klik QuickConnect.

Temukan lokasi folder dengan templat Anda di komputer Anda, di layar sebelah kiri, dan klik untuk membukanya. Di bagian kiri bawah, pilih semua file dan folder lalu seret ke sisi sebelah kanan layar ke dalam folder root server hosting Anda yang terletak di folder public_html.

Transferring your one page website template via FTPTransferring your one page website template via FTPTransferring your one page website template via FTP
Mentransfer templat website satu halaman Anda via FTP.

5 Tips Penting untuk Website Satu Halaman yang Lebih Baik

Sekarang website Anda sudah tayang, berikut beberapa tips untuk diperhatikan.

1. Buat Pesan Anda Tetap Ringkas

Berbeda dengan situs tradisional, templat satu halaman memilki ruang yang terbatas, artinya ruang untuk menuliskan pesan tidak terlalu luas. Itulah mengapa, sangat penting untuk membuang semua jargon dan detail yang tidak penting, menyisakan informasi yang paling relevan saja. Gambarkan dengan jelas apa yang Anda tawarkan dan manfaat produk atau layanan Anda.

2. Gunakan Panggilan Aksi yang Kuat

Terkait ruang yang terbatas, panggilan aksi Anda harus kuat dan meyakinkan. Anda juga harus menampilkannya beberapa kali agar efeknya maksimal. Secara default, kebanyakan templat website satu halaman sudah dilengkapi dengan sejumlah bagian yang memiliki panggilan untuk bertindak, sehingga bisa Anda maksimalkan penggunaannya. Arahkan pengunjung ke bagian yang menampilkan rencana harga atau formulir kontak yang mereka bisa menghubungi Anda.

3. Buat Navigasinya Tetap Mudah Diakses dan Sederhana

Atur navigasi Anda untuk melompat ke bagian website yang berbeda. Anda akan selangkah lebih maju jika Anda memilih templat yang sudah punya navigasi melekat yang tetap di tempatnya meskipun pengunjung menggulung layar ke bawah. Hanya masukkan tautan-tautan ke bagian website Anda dan hindari memasukkan tautan eksternal apa saja karena itu akan melemparkan mereka yang mengunjungi halaman Anda.

4. Gunakan Sesuatu yang Visual

Menggunakan gambar atau video akan membantu Anda menyampaikan cerita dan berbagi lebih banyak tentang apa yang harus Anda tawarkan tanpa harus menghabiskan banyak ruang. Dalam hal website satu halaman, media visual adalah sahabat terbaik Anda.

5. Pertahankan Hirarki

Masukkan informasi yang paling penting ke bagian atas situs Anda lalu perlahan pandu para pengguna ke bawah untuk mendapat informasi yang lebih spesifik yang mendukung pesan inti Anda. Ini akan membantu Anda mempertahankan hirarki dan menampilkan informasinya secara logis.

Mulailah Dengan Website Satu Halaman Anda Sendiri

Jika Anda mengikuti tutorial ini, Anda akan memiliki pengetahuan untuk dengan cepat membuat website satu halaman dengan menggunakan templat yang responsif. Mulailah perjalanan Anda dengan templat website yang tepat dan merujuklah ke tutorial ini untuk membantu Anda melakukan pengaturan dengan cepat.

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.