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

Bagaimana Membuat Website Bisnis yang Responsif dengan Template

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called How to Make Responsive Business Websites (Tutorial Guide).
How to Make Responsive WordPress Websites (With Themes)
13 Quick Responsive Web Design Tips & Tricks for 2018

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Ketika berbicara tentang pembuatan website bisnis Anda, ada beberapa cara untuk melakukannya. Anda dapat memilih Website Builder, Anda dapat memiliki seorang developer untuk mendesain website Anda, atau Anda dapat menggunakan CMS seperti WordPress. Meskipun tidak ada yang salah dengan pilihan-pilihan yang ada, pilihan tersebut dapat menjadi terlalu banyak jika semua yang Anda butuhkan hanyalah sebuah website yang sederhana untuk menampilkan tentang apa saja sebenarnya bisnis Anda dan dengan menyediakan pelanggan potensial dan klien cara menghubungi Anda.

Jika Anda tidak memerlukan fitur yang mewah dan Anda tidak membayangkan untuk membuat website bloging atau melakukan penjualan online secara teratur, maka Template Website HTML Responsif adalah yang Anda butuhkan. Di sini, Kami akan memandu anda melalui langkah-langkah persiapan sehingga Anda dapat merilis website tersebut dalam waktu yang singkat.

Cara Membuat Website Responsif di HTML

Keindahan template website bisnis HTML responsif adalah mudah digunakan dan tidak memerlukan pengetahuan teknis khusus untuk mengunggahnya ke server hosting Anda. Mereka juga lebih mudah untuk dimodifikasi daripada website builder dan CMS lainnya.

Dalam tutorial ini, Kami akan menunjukkan kepada Anda bagaimana memodifikasi dan mengunggah template website HTML responsif ke server Anda sehingga Anda dapat membuat website bisnis responsif dengan mudah.

Sebelum Anda Memulai

Sebelum Kami memulai modifikasi dengan template website yang responsif, ada beberapa hal yang Anda perlukan. Mereka termasuk nama domain dan perencanaan hosting Anda, program FTP, dan code editor, template website bisnis HTML responsif, dan terakhir, konten dan gambar yang akan kita tampilkan pada website Anda. Lebih baik mari kita lihat masing-masing dari mereka di bawah ini.

1. Nama Domain dan Hosting

Hal pertama yang perlu Anda lakukan adalah membeli nama domain dan perencanaan hosting sehingga website Anda dapat ditemukan secara online. Dalam kebanyakan kasus, Anda bisa mendapatkan nama domain secara gratis saat Anda mendaftar untuk perencanaan hosting pada kebanyakan penyedia layanan. Ketika berbicara tentang nama domain Anda, menggunakan nama bisnis Anda yang sebenarnya adalah ide yang bagus untuk sebuah nama domain.

Jika mungkin, cobalah untuk mendapatkan ekstensi .COM seperti itu adalah yang paling populer, tetapi perlu diingat bahwa menemukan nama domain besar dengan .COM tidak semudah seperti dulu. Dalam hal ini, Anda mungkin ingin melihat ekstensi lainnya seperti .CO atau domain lokal seperti .US.

Ketika berbicara tentang penyedia layanan hosting, Anda dapat menemukan paket hosting mulai dari $5 per bulan. Anda akan perlu membaca FAQ mereka untuk melihat bagaimana mereka menangani layangan pelanggan dan memahami syarat dan ketentuan mereka. Juga, pertimbangkan untuk membaca ulasan dari hosting tertentu pada website pihak ketiga lainnya untuk melihat apa yang dikatakan pelanggan mereka terhadap layanan mereka.

2. FTP Client dan Kode Editor

Item berikutnya pada daftar kami adalah FTP Client seperti FileZilla, dan kode editor seperti Sublime Text. Tujuan dari FTP Client adalah untuk menghubungkan komputer Anda ke hosting server dan memudahkan dalam meng-upload file website Anda sekaligus, dari pada meng-upload mereka satu persatu melalui control panel hosting. Code editor, disisi lain, akan membantu Anda dalam mengedit file template dan membuatnya lebih mudah untuk menemukan bagian-bagian kode berbeda yang perlu diedit.

Keduanya baik Sublime Text dan FileZilla adalah gratis untuk didownload dan dapat digunakan pada perangkat komputer berbasis Mac, Windows dan Linux.

3. Template Website HTML Responsif yang Anda Pilih dan Konten Website

Akhirnya, Anda akan memerlukan template HTML dan konten yang ingin Anda tambahkan ke website Anda. Anda dapat menemukan sejumlah template HTML responsif yang dibuat khusus untuk website bisnis pada Marketplace seperti Envato Elements. Setelah Anda menemukan salah satu yang Anda sukai, hanya dengan men-download, unzip folder, dan menyimpannya disuatu tempat yang dapat dengan mudah Anda akses.

Berkenaan dengan konten, pertimbangkan konten yang akan muncul pada halaman website Anda dan jelaskan apa yang bisa dilakukan perusahaan Anda, siapa saja yang dilayani, dan bagaimana hal tersebut dapat membantu pelanggan dengan produk dan layanan Anda. Anda juga dapat menambahkan informasi tentang orang-orang penting di perusahaan Anda. Jangan lupakan elemen visual seperti gambar dan logo.

Bagaimana Cara Menyesuaikan Template dan Konten

Sekarang, saatnya untuk mengubah konten yanga ada dalam template dan mengganti informasi "dummy" dengan informasi Anda sendiri. Untuk tujuan dari tutorial ini, Saya akan menggunakan template Moose. Template website responsif ini memiliki fitur desain yang Flat dan mendukung desain yang responsive dan termasuk beberapa halaman berbeda yang cocok untuk pemilik bisnis, agensi kreatif, digital sudio, dan banyak lagi.

1. Memahami Bagaimana Template Website yang Responsif disusun

Sebelum Anda memulai untuk melakukan perubahan pada template, penting untuk memahami struktur template sehingga Anda mengetahui file mana saja yang akan Anda perlukan untuk dimodifikasi. Seperti yang dapat Anda lihat pada gambar di bawah ini, setelah melakukan proses "unzip" terdapat tiga subfolder.

template folders and files

Folder Template merupakan subfolder yang berisi semua file yang membentuk template website responsif serta beberapa subfolder tambahan. Jika Anda menggunakan template yang berbeda, Anda mungkin tidak melihat semua file dan subfolder ini, akan tetapi secara umum Anda memperkirakan untuk menemukan:

  • Folder "Images" yang berisi semua gambar demo yang digunakan dalam template.
  • JS atau JavaScript folder dengan semua kode JavaScript yang dibutuhkan untuk template agar berfungsi dengan baik. Secara umum, Anda tidak perlu mengubah isi folder ini seperti JavaScript yang digunakan untuk fungsionalitas tambahan seperti animasi atau validasi form.
  • CSS atau Style folder berisi file CSS yang akan Anda perlukan untuk melakukan perubahan, untuk menyesuaikan font, warna, dan style visual lainnya.
  • Berbagai file HTML untuk halaman yang berbeda di website Anda seperti index.html, about.html, contact.html, dan lain-lain.

2. Mengganti Dummy Konten

Klik dua kali pada file index.html atau klik kanan dan pilih Open in Chrome (atau apa pun browser yang Anda gunakan). Ketika Anda melihat template pada browser, Anda dapat melihat sebuah Slider dimana Anda perlu mengganti gambar dan caption (keterangan), pada bagian layanan dimana Anda perlu menambahkan informasi Anda sendiri, dan masih banyak lagi.

Cara termudah untuk menemukan tempat mengubah informasi ini adalah dengan klik kanan pada teks dan klik pada link Inspect.

Inspector window

Window Inspect Element akan muncul, dan Anda dapat melihat kode HTML yang digunakan dalam template HTML Responsif pada sebelah kiri jendela dan kode CSS yang bertanggung jawab untuk gaya visual dari template berada pada sisi kanan window Inspect Element.

Lihatlah kode HTML dan Anda akan melihat bahwa baris kode yang berisi teks yang dipilih dapat disorot. Contoh dalam gambar, header yang saya periksa dan disorot pada window Inspect Element adalah tag diantara <h3> yang merupakan tag HTML. Tag dalam HTML terdiri dari tag pembuka dan tag penutup, dan membentuk sepasang tag yang berisi element HTML yang sesuai. Sebagai contoh, tag <h1> disebut heading tag dan digunakan untuk menganggap sebagai level 1 heading. Demikian pula, tag <p> digunakan untuk menganggap sebagai paragraf pada elemen HTML

Untuk memodifikasi template, Anda perlu mengetahui tag mana yang mengapit teks yang Anda ingin Anda ubah dan menemukan kembali pada kode editor. Kemudian, Anda dapat mengganti teks dengan Anda sendiri.

Sekarang kita tahu tag mana yang perlu kita ubah, saatnya untuk membuka file index.html di kode editor seperti Sublime Text. Klik Kana pada file dan klik Open with Sublime Text (atau kode editor lainnya).

Dengan file HTML anda yang terbuka di kode editor, scroll ke bawah sampai Anda menemukan teks yang sama dengan teks yang anda Inspect pada browser. Kemudian, klik diantara tag <h3>, hapus teks dummy, dan masukkan teks Anda.

HTML file open

Selanjutnya, klik di antara tag <span>, hapus teks, dan masukkan tagline singkat atau teks deskriptif. Anda juga dapat menghapus bagian responsif website template yang tidak Anda perlukan. Jika Anda melihat gambar di bawah, Anda akan melihat saya sudah mengganti teks dari header dan menghapus baris bawah dari layanan.

Website screenshot

Untuk mengubah seluruh website dan halaman lain dalam template, yang perlu Anda lakukan adalah mengualng proses ini berulang-ulang.

Sekarang, mari kita jelaskan bagaimana cara mengganti gambar dummy. Pertama, Anda akan perlu menempatkan semua gambar Anda ke dalam folder Images template HTML website responsif Anda. Kemudian, kembali ke browser Anda dan periksa (Inspect) bagian dari halaman dengan gambar.

Penggunakan Inspect Element akan memberi tahu Anda nama gambar serta tag mana yang memuat gambar tersebut. Sekarang, Anda dapat kembali ke kode editor dan mencari potongan kode tersebut. Kemudian, ganti nama gambar dengan nama gambar Anda dan simpan perubahannya.

Bagaimana Mengubah Stylesheet pada Website Template yang Responsif

Sekarang Anda telah memasukkan konten Anda sendiri, mari kita membahas bagaimana mengubah gaya (CSS Style) pada template. Dalam kasus ini, Moose Template mencakup dengan beberapa skema warna yang telah dibuat yang berada dalam subfolder style > CSS > color. Ini berarti saya dapat dengan mudah mengubah warna hanya dengan mengubah stylesheet pada bagian <head> dokumen untuk stylesheet pilihan warna yang diinginkan.

Temukan baris kode berikut dalam template HTML:

<link href="style/css/color/red.css" rel="stylesheet">

Mengubah nama untuk blue.css akan mengubah warna merah pada template menjadi warna biru:

Change the colors by changing the stylesheet

Anda juga dapat mengubah stylesheet utama yang disebut style.css dan termasuk font dan pilihan warna yang Anda inginkan.

Moose HTML responsive website template

Cukup ikuti prinsip pengeditan HTML: pertama, periksa elemen yang ingin Anda ubah CSS Style nya, lalu temukan dalam file style.css dan cobalah dengan nilai yang berbeda.

Bagaimana Cara Meng-Upload File ke Server

Langkah terakhir dalam membuat sebuah website yang responsif adalah meng-upload file ke server hosting Anda. Penyedia hosting Anda seharusnya mengirimkan email kepada Anda segera setelah Anda sign up dengan informasi yang diperlukan untuk FTP file transfer.

Anda harus menjalankan FileZilla (atau program FTP lain) lalu memasukkan informasi yang diperlukan pada bagian atas. Ini berarti Anda harus memasukkan nama server, nama pengguna Anda, dan kata sandi Anda, lalu klik QuickConnect:

QuickConnect

Kemudian, Anda akan menemukan folder template HTML website responsif pada sisi kiri program FTP dan mengembangkannya (expand) dengan mengkliknya. Pada bagian dibawah ini, pilih semuanya dan drag mouse ke sisi kanan layar FTP. Drop (lepaskan) file ke "root folder" dari server hosting anda, yang biasanya adalah folder public_html.

Tunggu proses upload selesai, dan kemudian buka browser Anda dan masukkan nama domain Anda. Website Anda sekarang harusnya sudah dapat diakses.

4 Elemen Pokok yang Harus Anda miliki pada Website Bisnis yang Responsif

Sekarang Website Anda sudah dapat diakases, penting bahwa Anda menyertakan informasi utama yang harus dimiliki pada setiap website bisnis.

  1. Halaman About dan Service (Layanan). Sebuah halaman About memberi tahu para pengunjung cerita dibalik brand Anda dan membantu mereka memahami bagaimana layanan Anda dapat membantu mereka. Dari sana, Anda dapat secara alami menautkan ke halaman layanan Anda yang harus memberikan deskripsi singkat tentang semua yang termasuk dalam layanan serta harga setiap paket.
  2. Halaman Kontak. Sangat jelas bahwa Anda memerlukan halaman kontak sehingga pengunjung dapat menghubungi Anda untuk menjadwalkan panggilan atau untuk mengetahui lebih lanjut tentang Anda. Halaman kontak Anda harus menyertakan kontak form yang sederhana, tetapi Anda juga dapat mencantumkan profil media sosial Anda atau pun nomor telepon.
  3. Bukti Sosial. Potongan-potongan bukti sosial seperti testimoni, ulasan, atau fitur dalam publikasi lain sangat membantu dalam membangun kredibilitas dan keahlian Anda. Pertimbangkan untuk menyertakan beberapa diantaranya pada halaman beranda dan membuat halaman khusus yang akan menampung semua pencapaian saat ini dan pencapaian yang akan Anda terima nantinya.
  4. Call to Action. Terakhir, jangan lupa bahwa Anda harus membuatnya jelas bagi pengunjung Anda apa yang Anda inginkan. Cukup menunjukkan layanan Anda tidak akan berbuat banyak untuk mendorong mereka untuk benar-benar memesan dan mengubungi Anda. Sertakan beberapa ajakan untuk bertindak (Call to Action) di beranda Anda dan di seluruh bagian website Anda yang memudahkan pengunjung untuk mengambil tindakan.

Buat Website Bisnis yang Responsif Anda Hari Ini

Membuat website bisnis yang responsif sangatlah mudah setelah Anda memahami bagian-bagian yang menyusun struktur template dan bagaimana menemukan informasi yang perlu Anda modifikasi. Gunakan tutorial kami untuk menyiapkan website bisnis Anda, dan jangan lupa untuk memeriksa koleksi template HTML bisnis responsif kami untuk menemukan salah satu yang sempurna untuk situs Anda.

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.