Cara Membuat Website 2020

Panduan tentang cara membuat website ini dibuat untuk pemula yang belum pernah membuat website. Tutorial disajikan dengan konsep langkah demi langkah dari awal sampai launching.

Kita akan menggunakan tools gratis dan tanpa coding. Sehingga proses membuat website jadi lebih cepat dan mudah.

Tutorial membuat website ini dibuat dalam 2 format yaitu dalam bentuk artikel yang sedang Anda baca ini dan dalam bentuk video yang bisa dilihat di youtube. Bagi Anda yang lebih suka mengikuti tutorial dalam bentuk video silakan tonton di channel youtube saya di link berikut: Tutorial Lengkap Membuat Website dari Nol.

Saya yakin Anda yang tiba di halaman ini sudah siap untuk membuat website sendiri dan menginginkan cara yang mudah, cepat dan tanpa coding. Maka ini adalah tutorial yang tepat untuk Anda. Jika ada saran untuk perbaikan halaman ini silakan menghubungi saya di halaman kontak.

Ayo kita mulai dari penjelasan singkat kemudian langsung ke panduannya.

Membuat Website Semakin Mudah dan Cepat

Bertahun-tahun yang lalu, untuk membuat sebuah website dibutuhkan keahlian khusus dalam bidang web programming. Mereka harus membuat kode-kode html, php, databases, dll untuk membuat satu website. Prosesnya juga dilakukan bertahap seperti dibuat dahulu di komputer lokal baru kemudian diupload ke web hosting.

Tidak jarang dalam proses upload terjadi error dan setelah diupload pun kode web tidak bekerja dengan baik karena perbedaan jenis server antara komputer lokal dengan web hosting. Hal ini membuat proses memiliki website menjadi sangat lama dan rumit sehingga harga website waktu itu sangat mahal.

Namun berbeda dengan sekarang. Di tahun 2020 ini membuat website menjadi sangat mudah. Bahkan tahapan membuat website menjadi semakin singkat. Sekarang kita hanya butuh 2 langkah saja.

Pertama, menentukan domain dan hosting. Sebaiknya kita memilih perusahaan hosting yang memiliki layanan install WordPress gratis langsung saat proses pembelian. Sehingga ketika domain aktif kita langsung memiliki website yang bisa diakses dari mana saja. Ini memangkas keseluruhan proses pembuatan website yang rumit di jaman dulu.

Kedua, merancang tampilan sesuai dengan keinginan dan tujuan website. Di tahap ini kita akan memilih tema yang sesuai dan mengunggah atau upload konten.

Di tutorial ini saya contohkan menggunakan tema gratis tetapi powerful. Kita akan men-download website contoh dari penyedia tema kemudian mengganti tulisan dan gambarnya saja sesuai dengan usaha kita. Anda akan kaget dengan betapa mudah dan cepatnya cara ini.

Metode ini akan sangat cocok untuk Anda yang ingin membuat website seperti:

  • Company Profile – untuk menampilkan profil perusahaan, sekolah, desa, dan pemerintahan
  • Personal Blog/Website – untuk membangun personal branding
  • Marketing – untuk menjual produk dan jasa
  • Pariwisata – untuk memasarkan hotel, jasa tour dan guide
  • Restaurant – bisa diterapkan untuk warung makan sederhana. Silakan cek video tutorialnya di sini.
  • News – untuk portal berita
  • Toko Online – untuk berjualan online

Khusus untuk news dan toko online dibutuhkan pemahaman lebih dalam membuat konten dan penggunaan plugins. Saya sedang mempersiapkan tutorialnya. Segera setelah selesai nanti saya akan update di website ini. Anda juga bisa subscribe web ini terlebih dahulu sehingga ketika tutorial membuat toko online selesai kalian langsung mendapatkan notifikasi. Tombol subscribe ada di bagian bawah halaman ini.

Tahap Pertama: Menentukan Domain dan Hosting

Di langkah awal ini kita akan menentukan nama domain, memilih hosting, dan menginstall WordPress. Ini akan kita lakukan sekaligus dalam proses pembelian hosting. Namun saya jelaskan dulu sedikit pengertian masing-masing.

Domain

Domain adalah alamat atau nama website kita, contoh domain dari website ini adalah kamartina.com. Domain Inilah yang akan diketikkan oleh orang yang ingin mengakses website kita di browser mereka.

Menentukan nama domain terkadang bisa menyulitkan, susah-susah gampang gitu.

Terlebih lagi bila nama domain yang kita inginkan tidak tersedia atau sudah didaftarkan oleh orang lain lebih dulu karena nama domain harus unik atau tidak boleh sama dengan yang sudah ada.

Anda bisa saja menggunakan nama domain apapun sesuka hati tetapi harus dipikirkan dengan baik jangan asal-asalan. Anda juga harus menentukan ekstensi domain yang sesuai dengan usaha atau tujuan website.

Ekstensi domain adalah kata atau huruf setelah nama usaha, seperti: .com, .id, .co.id, .org, dll.

Tips dalam menentukan nama domain:

  • Gunakan nama perusahaan, sekolah, desa, lokasi, atau barang yang kita jual.
  • Gunakan nama Anda sendiri untuk personal branding.
  • Untuk blog bisa menggunakan topik bahasan sebagai nama domain.
  • Untuk website usaha sebaiknya gunakan ekstensi .com, .co.id, dan .id.
  • Ekstensi .com adalah yang paling populer. Biasanya orang langsung menambahkan .com di browser untuk mencoba mencari produk atau informasi yang mereka butuhkan.
  • Untuk sekolah gunakan ekstensi .sch.id dan perguruan tinggi menggunakan .ac.id.
  • Untuk yayasan atau organisasi non profit pakailah .org atau .or.id.
  • Tambahkan lokasi Anda jika nama domain sudah dipakai orang lain.

Berapa harga domain?

Harga domain relatif murah dan ditentukan juga oleh ekstensinya, misal .com ada di kisaran Rp. 125.000 – Rp. 150.000 per tahun sedangkan .id kisaran Rp. 250.000 per tahun.

Sebaiknya membeli domain sekalian dengan hosting di satu penyedia jasa hosting karena biasanya mereka menawarkan domain gratis untuk pembelian minimal satu tahun.

Niagahoster adalah salah satu penyedia layanan hosting yang memberikan domain gratis untuk pembelian hosting. Dan untuk pembelian pertama juga diberikan diskon hingga 75%.

Hosting

Hosting adalah komputer server tempat menyimpan data website supaya dapat diakses secara online dari mana saja dan kapan saja. Hosting disediakan oleh perusahaan layanan hosting.

Ada banyak sekali perusahaan hosting dengan harga dan pilihan paket yang beragam. Mereka biasanya menawarkan sistem pembayaran per tahun dan gratis domain.

Sebisa mungkin kita harus memilih hosting yang handal supaya website kita bisa diakses kapan saja. Anda tentu tidak mau kehilangan pelanggan karena website yang sering mati.

Saya pernah mencoba beberapa layanan hosting dan hampir semua jasa hosting memiliki fitur teknis yang sama hanya ada batasan untuk kapasitas yang disesuaikan dengan harga saja.

Tetapi berikut adalah faktor utama yang perlu diperhatikan dalam memilih hosting:

  • Support system 24 x 7. Ini adalah faktor yang paling penting karena kita tidak pernah tahu kapan website kita mengalami kendala sehingga penting sekali untuk dapat menghubungi penyedia hosting sesegera mungkin.
  • Carilah penyedia hosting yang dapat menyelesaikan masalah langsung melalui live chat tanpa harus mengirim email ke tim support.
  • Perhatikan lama waktu garansi. Tujuannya adalah jika dalam waktu garansi website kita sering down atau layanan support mereka tidak baik kita bisa mengajukan uang kembali. Hosting yang handal biasanya berani memberikan garansi 30 hari atau lebih.
  • Sebagai bonus Anda bisa cari hosting yang memilki layanan install WordPress otomatis saat proses pembelian untuk mempercepat proses pembuatan website.

Berapa Harga Hosting?

Sangat beragam, mulai dari Rp. 300.000 ke atas pertahun. Biasanya semakin mahal harganya semakin handal layanannya. Saran saya carilah yang di atas Rp. 600.000 per tahun.

Bagi Anda yang ingin hosting yang bisa di bayar per bulan bisa mencoba jetorbit.com. Sangat sedikit jasa hosting dengan sistem bulanan.

Tips tambahan: kalau bisa cobalah menghubungi live chat jasa hosting di atas pukul satu malam atau menjelang subuh. Perhatikan waktu respon mereka.

Cloud Hosting Indonesia

Apa itu WordPress?

Saya telah beberapa kali menyebut kata WordPress di atas. Apa sih WordPress ini?

Secara gampang, WordPress bisa kita anggap sebagai program atau aplikasi untuk mempermudah kita membuat website. WordPress adalah Content Management System / Sistem Manajemen Konten yaitu sistem yang membantu kita mengatur konten/informasi website.

Anda tidak perlu lagi memikirkan tentang kode program karena sudah disediakan oleh WordPress. Anda hanya perlu menyiapkan konten Anda saja kemudian upload ke website Anda.

Konten yang dimaksud adalah informasi seperti tulisan, gambar, video, dll yang berakaitan dengan usaha, produk, jasa atau tujuan Anda membuat website.

Saya yakin Anda pasti sudah memilikinya, kalaupun tidak Anda akan mengerti cara mempersiapkan konten seiring dengan Anda mengikuti tutorial ini. Karena konten didapat dari semua hal yang berkaitan dengan bisnis Anda.

Harga WordPress?

GRATIS!

Iya, benar. WordPress adalah program open source yang tersedia secara gratis dan bisa dipakai untuk tujuan apa saja. Walaupun demikian kemampuan WordPress sangat luar biasa. Perusahaan-perusahaan besar menggunakan WordPress untuk membuat website mereka. Bahkan sekitar 37% website di dunia menggunakan WordPress.

Saya harap penjelasan singkat diatas dapat memberikan pengertian yang sama antara kita mengenai proses pembuatan website. Sekarang kita langsung mulai langkah demi langkah membuat website yang pertama.

Memulai Tahap Pertama

Di tutorial ini saya memilih menggunakan hosting dari Niagahoster karena ada gratis domain dan promo 75% untuk pembelian hosting 3 tahun. Dan saya mendapat tambahan diskon 5% dengan kode BUATWEBSITESENDIRI.

1. Buka www.niagahoster.com di browser Anda kemudian klik PILIH SEKARANG atau scroll ke bagian bawah sampai ke pilihan paket.

Promo Niagahoster

2. Pilih paket hosting yang Anda inginkan sesuaikan dengan kemampuan.

Paket hosting Niagahoster

Sebaiknya hindari paket bayi karena kapasitas yang paling kecil, tidak gratis domain, dan tanpa diskon. Saya akan memilih menggunakan paket Personal karena fitur lebih banyak, gratis domain dan diskon paling besar.

3.a Anda akan masuk ke halaman pilihan durasi paket.

Memilih Paket Hosting Niagahoster

Silakan pilih sesuai keinginan, saya akan langsung pilih 3 tahun karena jika dibagi 3 (per tahun) harganya jadi jauh lebih murah. Per tahun harganya Rp. 637.500 sedangkan untuk 3 tahun jadi Rp. 956.250 artinya jika bayar 3 tahun sekalian per tahun jadi Rp. 318.750. Jauh lebih murah.

Penjelasan gambar di atas:

  1. Pilih durasi paket
  2. Klik Domain Baru untuk memasukkan domain Anda
  3. Ketikkan nama domain tanpa spasi dan tanpa ekstensi
  4. Pilih ekstensi domain yang Anda inginkan
  5. Klik Cek Domain untuk memeriksa ketersedian domain.
    • Note: bila domain tidak tersedia silakan ganti dengan nama lain atau ikuti tips nama domain di atas.

3.b Domain tersedia dan silakan klik Tambahkan ke Cart.

Ketersediaan domain di Niagahoster

Di sini Anda juga akan disarankan untuk menambahkan ekstensi domain yang lain. Jika tidak dibutuhkan bisa dilewatkan saja tapi kalau berminat bisa centang ekstensi yang diinginkan.

3.c Sekarang Anda akan diarahkan ke Cart. Perhatikan total yang harus dibayar kemudian klik Lanjutkan.

Total Bayar Hosting Niagahoster

4. Di halaman Rekomendasi Fitur Tambahan ini Anda bisa memilih fitur tambahan yang dibutuhkan.

Perlindungan Privasi Whois

Auto Install Website WordPress perlu dipilih supaya Anda tidak direpotkan lagi menginstall WordPress Secara Manual. Gratis.
Keamanan SSL Certificate (HTTPS) tidak usah dulu karena kita bisa memanfaatkan fitu SSL gratis yang disediakan di CPanel. Nanti akan saya contohkan.
Perlindungan Privasi WHOIS ini bagi saya sangat penting untuk menghindari telepon atau kontak spam ke informasi kontak kita. Kadang mereka mencoba menjual sesuatu ke Anda dengan informasi yang didapatkan dari memeriksa detail pemilik domain saja.

Periksa lagi nilai total yang harus dibayar. Setelah dirasa pas langsung klik Lanjutkan.

5.a. Sekarang Anda akan memilih metode pembayaran. Sebaiknya pilih Metode Pembayaran Otomatis supaya tidak perlu lagi konfirmasi pembayaran secara manual.

Pembayaran Otomatis Niagahoster

5.b. Geser ke bagian bawah Anda akan melihat 2 tombol Masuk dan Belum Punya Akun. Jika sudah punya akun bisa langsung klik Masuk. Jika belum klik Belum Punya Akun.

Membuat Akun Niagahoster

5.c. Isi data pribadi Anda seperti Email, Password, Nama, dll. Masukkan juga kode diskon BUATWEBSITESENDIRI.

Proses Check out

Isi data pribadi dengan benar dan untuk Password buatlah password yang baru untuk masuk ke Niagahoster nanti (bukan password email Anda). Setelah memasukkan kode diskon klik Gunakan, lihat pengurangannya dan jika sudah dirasa pas silakan klik Checkout Sekarang.

6. Silakan melakukan pembayaran sesuai dengan petunjuk dan Bank Anda.

Cara bayar hosting niagahoster

7. Setelah melakukan pembayaran buka inbox di email Anda dan buka semua email dari Niagahoster.

Email dari Niagahoster

Di dalam email dari Niagahoster terdapat detail akun seperti username dan password untuk masuk ke member area Niagahoster dan ada juga untuk masuk ke WordPress. Perhatikan email terakhir dengan judul PENTING. Di sana ada email yang harus diklik untuk mengkonfirmasi kepemelikan nama domain Anda.

8. Seharusnya sampai di sini hosting sudah aktif. Anda sudah memiliki nama domain dan hosting plus sudah terinstall WordPress.

Mencoba Login dan Install SSL Gratis

Sekarang Anda bisa masuk ke Member Area Niagahoster atau langsung ke WordPress. Link dan detail akun bisa dilihat di email.

Masuk ke Member Area Niagahoster
Halaman member area niagahoster

Untuk ke member area Niagahoster bisa gunakan link: panel.niagahoster.co.id/login
Untuk login ke WordPress: namadomainanda/wp-login.php. Ganti nama domain dengan domain yang sudah didaftarkan.

9.a. Selanjutnya Anda bisa mengaktifkan SSL gratis supaya website kita jadi lebih aman dan menunjang kredibilitas kita dengan adanya https atau ikon gembog di url Anda.

Masuk ke menu kelola hosting
Mencari Let's Ecncrypt

Untuk masuk ke menu SSL silakan Anda klik Hosting lalu Kelola Hosting kemudian Anda akan masuk ke menu Pengaturan Hosting. Di sini silakan klik Let’s Encrypt.

9.b. Untuk mengaktifkan SSL sangat mudah yaitu dengan klik +issue saja sampai muncul kalimat The SLL certificate is now installed…

Start to Issue
Issue SSL
Let's Encrypt SSL Sukses

Setelah SSL terinstall dengan baik maka kita akan lanjut ke tahap kedua yaitu merancang website kita langsung di WordPress.

Tahap Kedua: Merancang Website

Di tahap kedua ini Anda akan bekerja sepenuhnya di WordPress. Silakan masuk ke halaman dashboard dengan username dan password yang ada di email Anda dari Niagahoster. Di sana juga sudah ada link untuk masuk ke WordPress atau bisa gunakan link ini: http://namadomainanda.com/wp-login.php gantilah namadomainanda dengan domain Anda.

Pengaturan Awal dan Aktivasi SSL di WordPress

1. Login ke WordPress.

Masuk ke WordPress

2. Halaman Dashboard WordPress.

Penjelasan Menu Dashboard WordPress

Perhatikan semua menu yang ada di sebelah kiri layar. Itu adalah menu-menu untuk mengatur/mengelola website WordPress Anda. Berikut saya jelaskan setiap menu yang ada:

  • Dashboard adalah menu untuk melihat informasi singkat tentang website Anda dan biasanya ada tanda notifikasi saat ada update theme/plugin terbaru.
  • Posts adalah menu untuk membuat artikel, melihat artikel yang sudah dibuat, membuat kategori artikel, dan mengedit artikel yang sudah ada.
  • Media berisi gambar, video atau suara yang sudah Anda upload ke website atau haril download dari demo data theme.
  • Page adalah menu untuk membuat halaman statis, melihat yang sudah dibuat, dan mengedit yang sudah ada. Perbedaan page dan posts adalah page itu statis atau dibuat sekali saja sedangan posts adalah tulisan atau artikel yang terus diupdate secara berkala.
  • Comments untuk melihat komentar dari pengunjung website, menyetujui, menolak atau menghapus komentar dan membalas komentar pengunjung.
  • Appearance untuk mengatur theme atau tampilan website Anda. Di sini Anda bisa menghapus, memasang, mengedit theme website.
  • Plugins untuk melihat, menambah, dan menghapus plugins. Plugins adalah fitur tambahan untuk menambah kemampuan website Anda.
  • Users untuk mengatur pengguna website Anda, bisa menambah, ganti password, ataupun menghapus pengguna.
  • Tools adalah fasilitas pendukung seperti import dan export website Anda.
  • Settings adalah menu pengaturan untuk mengelola cara kerja WordPress.
  • Collapse Menu untuk merampingkan baian menu ini agar tidak terlihat.

Anda bisa mencoba melihat isi dari setiap menu di atas. Jangan kwatir karena selama Anda tidak menekan tombol save jika tanpa sengaja Anda melakukan perubahan tidak akan terjadi apa-apa.

3. Pengaturan awal/umum pertama kali di WordPress. Masuk ke Settings -> General.

Masuk ke menu pengaturan General
Mengubah pengaturan umum wordpress
Menyimpan Perubahan

Yang pertama kali perlu kita atur adalah bagian Site Title dan Tagline. Site Title untuk nama usaha/bisnis Anda. Tagline untuk slogan usaha/bisnis Anda.

Mengaktifkan SSL di URL WordPress dan Site Address seperti di tanda panah nomer 5 dan 6 di atas karena tadi Anda sudah mengaktifkan SSL di member area kini saatnya di WordPress. Caranya sangat mudah yaitu cukup dengan menambahkan huruf “s” pada kedua kotak isian http seperti panah nomer 5 dan 6.

Di halaman General ini Anda juga bisa ganti Bahasa dan Timezone sesuai dengan lokasi Anda. Saya tidak mengganti ke Bahasa Indonesia karena memang website ini ditujukan untuk bahasa Inggris.

Timezone bisa disesuaikan dengan wilayah. Misalnya untuk wilayah Jakarta bisa menggunakan UTC+7 dan untuk Bali dengan UTC+8. Setelah selesai langsung klik Save Changes.

SSL Terinstall

Seketika Anda kllik Save Changes maka WordPress akan secara otamatis mengeluarkan Anda untuk masuk ulang/re-login. Di sini Anda bisa perhatikan URL website Anda di browser seharusnya sudah berisi ikon kunci yang menandakan website sudah secure/SSL aktif.

Memasang Theme dan Plugins

4. Memasang theme/tema yang bagus. Masuk ke Appearance lalu pilih Themes. Kita akan menambahkan theme yang baru dengan klik Add New.

Menambahkan Theme Baru
Mencari Astra Theme
Memilih Tema Website

Untuk tutorial ini saya menggunakan theme gratis yang bernama Astra. Walaupun gratis theme ini memberikan fitur yang sangat bagus dan yang tidak ditemui di theme gratis lainnya.

Fitur tersebut adalah ada pilihan mengganti kalimat copyright di bagian footer (kaki website) sepenuhnya ke nama usaha kita. Dimana theme gratis lain mengharuskan kita membayar untuk melakukan ini.

Cara mencari dan menginstal theme ditunjukkan pada panah nomer 4 di atas. Ketik Astra di kotak pencarian kemudian kita Install dan Activate.

Selain theme kita juga membutuhkan plugin tambahan untuk menunjang kemampuan dari Astra Theme ini.

5. Install plugins yang dibutuhkan seperti Elementor dan Starter Template.

Menginstall Plugins

Setelah kedua plugin ditemukan langsung klik Install Now dan jangan lupa untuk diaktifkan dengan klik Activate di kedua plugins.

Mendownload Starter Template

6. Download website demo yang sudah disediakan ke website Anda.

Memilih Page Builder

Masuk ke Appearance lalu Starter Templates dan pilih page buildernya Elementor. Kemudian Anda akan masuk ke halamam yang menampilkan berbagai macam website demo.

7. Pilih website demo yang disukai. Di tutorial ini saya memilih menggunakan Hotel. Kemudian tinggal klik Import Complate Site maka website Anda akan tampak sama persis dengan website demo yang Anda download.

Mencari Starter Template
Memilih Starter Template
Mulai Import Website

Perhatikan opsi Delete Previously Imported Site, ini berguna untuk menghapus demo website yang sudah didownload sebelumnya. Sangat bermanfaat apabila setelah selesai mendownload website demo Anda tidak menyukainya bisa ulangi langkah di atas kemudian centang bagian ini. Untuk pertama kali ini, tidak perlu di centang dulu. Langsung klik import.

8. Website demo sukses terdownload dan silakan buka website Anda dan lihat betapa mudahnya Anda memiliki tampilan website seperti perusahaan besar.

Import website sukses

Sampai di sini Anda pasti sudah melihat hasil website Anda yang memukau. Langkah berikutnya akan semakin mudah dan menyenangkan karena kita akan mengupload konten kita. Jika Anda sudah terbiasa dengan Ms. Word dan Ms. Power Point maka anda tidak akan kesulitan sama sekali.

Saatnya Merancang Website Anda

9. Sekarang saatnya masuk ke mode kostumisasi untuk mengganti konten website demo dengan konten Anda. Klik Customize.

Masuk ke mode Customize
Panel Kostumisasi WordPress

Berikut penjelasan singkat masing-masing menu:

  • Global memuat pengaturan seperti huruf, warna, gaya tombol, dll yang berlaku di seluruh website baik untuk posts atau pun halaman kecuali setiap post dan halaman memiliki style sendiri menggunakan page builder.
  • Header memuat pengaturan seperti logo website, gaya menu di heade, dll.
  • Breadcrumb untuk mengatur apakah Anda akan menampilkan posisi halaman yang sedang dibuka oleh pengunjung. Dalam contoh ini adalah nonactive/tidak aktif.
  • Blog memuat pengaturan untuk menentukan gaya tampilan halaman blog yang memuat artikel Anda.
  • Sidebar untuk mengatur posisi sidebar di kiri, di kanan atau tidak aktif. Di contoh ini tidak aktif.
  • Footer untuk mengatur gaya footer website dan di sini kita akan mengganti copyright website.
  • Menus untuk mengatur posisi menu.
  • Widgets untuk mengatur widget atau fitur tambahan yang tampil di halaman website.
  • Hompage Setting untuk mengatur halaman yang akan ditampilkan pertama kali ketika seseorang membuka website Anda. Di contoh ini sudah diatur oleh website demo yang sudah didownload untuk menampilkan halaman sekarang yang Anda lihat ini. Jika ingin mengganti sendiri di sinilah tempatnya.
  • Additional CSS untuk memasukkan kode CSS sebagai tambahan atau mengganti style tertentu yang tidak Anda sukai dari theme ini.

10. Mengganti logo website dengan Logo Anda. Masuk ke Header lalu Site Identity.

Mengganti Logo Header
Memilih file logo
Menyisipkan logo
Melewati pemangkasan logo
Mengganti Gambar Logo

Perhatikan di tanda panah nomer 2 yaitu Select File untuk Anda mencari dimana Anda menyimpan Logo website di komputer Anda. Di panah nomer 5 saya klik Skip Cropping supaya logo tidak terpotong. Sampai di sini seharusnya logo website sudah terganti. Dan pastikan Anda klik Publish untuk menyimpan perubahan seperti di panah no 6.

11. Mengganti menu navigasi bagian atas di Menus lalu Top Nav.

Mengganti Menu Navigasi

URL adalah link dari tujuan kemana pengunjung diarahkan ketika menu navigasi diklik. Di tutorial ini diisi oleh website demo yang sudah di import. Di contoh di atas di isi dengan #about karena jenis website ini adalah single page website di mana menu navigasi akan mengarahkan pengunjung ke seksi tertentu dalam satu halaman yang sama.

Navigasi Label adalah nama dari menu. Misalnya seperti contoh diatas diberi nama About Us dan ini bisa diganti ke Tentang Kami. Seangkan URL tidak perlu diganti kecuali jika akan diarahkan ke tempat lain.

Jangan lupa untuk klik Publish setelah selesai melakukan perubahan.

Di tutorial ini saya tidak akan mengganti menu navigasi karena sudah sesuai dengan tujuan website yang saya buat ini. Saran saya saat memilih website demo yang di-import sebisa mungkin sama dengan usaha atau tujuan website Anda sehingga membutuhkan sedikit penyesuaian saja.

12. Mengganti Footer di menu Footer kemudian Footer Bar.

Mengganti Footer Website

Astra theme secara default sudah membuatkan copyright untuk website kita dengan susunan “Copyright Tahun Nama Website” dan Powered By langsung ke nama website kita. Di mana sangat jarang saya temui ada theme gratis yang membiarkan kita merubah bagian Footer Bar tanpa membeli lisensi theme mereka.

Sebaiknya bagian “| Powered Bay [site_title]” dibapus saja. Jangan lupa klik Publish setelah melakukan perubahan.

Setelah selesai melakukan perubahaan pada header, menu navigasi dan footer kini saatnya Anda merubah isi halaman website dengan konten Anda.

13. Keluar dari mode kostumisasi kemudian masuk ke mode Edit with Elementor.

Masuk ke mode Elementor
Panel Elementor

Perhatikan sebelah kiri layar seperti gambar di atas yang diberi kotak kuning. Itu adalah elemen yang bisa ditambahkan ke halaman Anda.

Elementor adalah sebuah page builder artinya pembangun/perancang halaman. Jadi dengan bantuan Elementor inilah kita merancang tampilan halaman website kita dengan mudah. Caranya persis seperti bekerja di Ms. Word. Untuk menambahkan elemen tinggal klik dari sumbernya di bagian kiri layar kemudian drag dan drop di mana saja kita inginkan di halaman website.

Dalam tutorial ini tidak ada elemen yang akan ditambahkan atau dihapus. Yang kita lakukan hanya mengedit yang sudah ada seperti rubah kata/tulisan dan rubah gambar saja. Untuk itu sekali lagi penting kiranya kita memilih demo website yang pas saat melakukan import starter website.

14. Mengganti Call to Action atau bagian paling atas halaman sesuai dengan nama usaha Anda. Cara tinggal di klik saja bagian yang ingin diganti.

Mengubah Heading

Saat kita klik elemen yang ingin diganti (sperti pada panah warna kuning) maka bagian kiri layar akan otomatis berubah ke mode edit elemen bersangkutan. Seperti pada gambar di atas di contohkan mengganti Nama Hotel maka bagian kiri layar otomatis berganti ke mode Edit Heading dan disediakan kotak isian tempat kita mengetik teks pengganti seperti yang ditunjukkan pada tanda panah warna hijau di atas..

Call to Action adalah sebutan untuk bagian dari halaman web yang berfungsi untuk menarik pengunjung melakukan aksi seperti klik beli, booking, atau dalam contoh di atas adalah untuk membuat permintaan (Make an Enquiry).

Di contoh di atas terdiri dari judul, sub judul dan tombol. Untuk mengganti sub judul yang ada di bawah nama hotel dapat dilakukan dengan cara yang sama yaitu klik di kalimat sub judul dan ganti di kotak isian yang akan muncul di bagian kiri layar Anda.

Untuk selanjutnya Anda tinggal klik saja di elemen/bagian mana saja yang ingin Anda ganti. Ini persis seperti menggunakan Ms. Word.

15. Mengganti Gambar Latar. Klik kanan di ikon section yaitu icon yang ada di bagian atas tengah seperti pada tanda panah warna kuning nomer 1 di gambar di bawah.

Mengubah Gambar Header
Gambar Header Website

Sebaiknya Anda menggunakan gambar dengan ukuran yang cukup besar minimal 1920 x 1080 px supaya tampak indah dan sepadan dengan lebar website. Kemudian silakan klik Update seperti tanda panah warna kuning di atas untuk menyimpan perubahan ini.

Anda sekarang bisa mencoba melihat website Anda di New Page browser Anda dengan menggunakan nama domain anda. Misalnya https://namadomainanda.com.

Anda sekarang akan melihat website Anda sendiri dengan sampul gambar dari bisnis Anda tampak indah dan bangga karena buatan Anda sendiri.

Gimana? gampang kan?

Untuk bagian/section selanjutnya seperti About Us, Amenities, Call to Action bagian tengah, Gallery, dan Packages dapat Anda ganti dengan mudah dengan cara yang sama seperti di Atas. Tinggal klik bagian yang ingin diganti kemudian lihat fitur yang tersedia di bagian kiri layar.

Saya yakin Anda pasti bisa. Jangan ragu untuk mencoba dan jangan takut salah atau rusak karena Elementor page builder ini mendukung Redo atau mengulang kembali ke awal jika Anda tidak sengaja melakukan kesalahan.

Cara Redo sama seperti di Ms. Word atau secara umum yaitu dengan menekan tombol Control + Z di keyboard Anda.

Gimana? semakin yakin kan untuk buat website sendiri?

Jikapun Anda mengalami kesulitan Anda bisa menghubungi saya di halaman kontak. Anda juga bisa menonton tutorial membuat website di kanal youtube saya di sini.

16.a. Sekarang Anda harus memastikan contact form untuk pengunjung mengirim email booking/memesan sampai ke inbox Email Anda.

Contact Form
Edit Contact Form

Kembali ke Dashboard kemudian ikuti tanda panah gambar di atas. Klik WPForms, lalu All Forms, kemudian kli Edit seperti tanda panah nomer 3 di atas. Maka Anda akan diarahkan ke halaman untuk mengubah contact form.

16.b. Masukkan email Anda untuk menerima booking/pemesanan dari website.

Memperbaiki Email

Di halaman Editing Contact Form ini silakan klik Settings Notifications – masukkan email di kotak Send To Email Address. Langkah-langkahnya seperti tanda panah di atas. Dan jangan lupa klik Save setelah selesai.

Saran saya gunakan email khusus untuk website ini, jangan jadi satu dengan email pribadi. Kemudian Anda perlu mencoba menggunakan form email tersebut untuk memastikan emailnya sampai ke inbox Anda.

Website Selesai dan Mencoba Fitur Pemesanan

17.c. Mencoba Contact Form. Isi form dengan benar kemudian klik send kemudian cek inbox email Anda.

Jika anda tidak menemukan email dari website Anda di inbox mungkin masuk ke folder spam. Dan jika ada di spam setelah Anda membuka email tersebut silakan di settting supaya email dari website Anda dianggap aman dan tidak masuk ke spam lagi. Biasanya cukup dengan klik Kelihatannya aman seperti gambar di bawah.

Membuat Email Aman

Tetapi jika email tidak masuk ke inbox atau spam berarti ada masalah dengan layanan email hosting Anda. Segera hubungi customer service dimana Anda membeli hosting.

Saya menggunakan Niagahoster dan tidak terjadi masalah seperti ini. Jika Anda sampai di kalimat ini dan belum membeli hosting maka saya sarankan pakai Niagahoster saja. Gunakan kode kupon BUATWEBSITESENDIRI untuk tambahan diskon 5%.

Silakan klik link ini: https://tutorialmembuatwebsite.com/niagahoster.

18. Website Anda sudah selesai.

Silakan buka website Anda di halaman baru dan perhatikan hasilnya.

Saya ucapkan selamat dan terimakasih banyak telah mengikuti tutorial sampai di sini.
Website Anda sudah jadi, sudah online, bisa diakses dari mana saja dan kapan saja, bahkan sudah ada fitur pemesanan/booking menggunakan contact form yang dikirim langsung ke email Anda.
Luar biasa bukan?
Anda telah berhasil membuat website sendiri dengan mudah. Sekali lagi selamat.

BONUS: Membuat Email Professional.

Memiliki hosting otomatis Anda dapat membuat email professional untuk usaha Anda sehingga terkesan lebih professional. Anda bisa membuat email seperti namaanda@domainanda.com atau seperti email saya di website ini komang@tutorialmembuatwebsite.com.

1. Kembali ke Kelola Hosting kemudian cari Email Account

Akun Email NIagahoster

2. Klik Create untuk membuat akun email baru.

Buat Email Professional

3. Isi setiap kotak isian dengan data yang Anda inginkan. Untuk bagian username isi dengan nama email depannya saja tanpa “@namadomain.com”.

Membuat Akun Email

4. Email professional sudah berhasil dibuat sekarang Anda bisa coba buka email dengan klik Check Email.

Check Email

5. Anda juga bisa buka email dengan menambahkan “webmail” setelah nama domain Anda. Contoh link: https://namadomainanda.com/webmail.

link webmail

6. Gunakan alamat email full di bagian Email Address.

Masuk ke email

7. Klik Open untuk buka email. Halaman yang tampil ini berisi sejumlah pengaturan untuk pengguna email.

Pilihan default program email

8. Selamat Anda telah memiliki Email Professional.

Akses Email Profesional

Sekarang Anda sudah memiliki email professional. Anda bisa menggunakan email ini untuk urusan bisnis dan menambahkannya ke kartu nama Anda.

Kesimpulan

Bagaimana perasanaan Anda sekarang?

Hebat bukan?

Ternyata membuat website sangat mudah dan Anda sendiri sudah membuktikannya. Sekarang Anda bisa menambahkan website Anda di profil facebook, instagram, twitter, dll.

Jadi, Anda telah berhasil mempelajari:

  1. Hal-hal yang berhubungan dengan website
  2. Bahwa membuat website sangat mudah
  3. Bisa membeli domain dan hosting
  4. Memasang WordPress tanpa perlu install sendiri
  5. Mengaktifkan dan mengkonfigurasi SSL gratis
  6. Meng-import website demo
  7. Mengubah website demo menjadi website Anda
  8. Membuat Email Professional

Saya yakin Anda masih bisa mengembangkan lagi kemampuan dan fitur website baru Anda. Di website Tutorial Membuat Website ini juga ada blog berisi artikel seputar website. Mungkin akan bermanfaat bagi Anda.

Jika Anda merasa terbantu dengan adanya website ini mungkin Anda bisa membantu teman Anda juga dengan share website ini di sosial media Anda. Ini juga akan membantu saya untuk semangat mengembangkan website ini lebih jauh lagi agar semakin banyak orang yang terbantu dalam membuat website.

Dan jika Anda ingin membantu saya juga silakan membeli hosting melalui link afiliasi saya berikut:

https://kamartina.com/niagahoster
saat ini sedang diskon 75%

https://kamartina.com/jetorbit
saat ini sedang diskon 40%

Tenang, membeli melalui link afiliasi tidak akan menambahkan biaya apapun pada Anda.

Saya ucapkan terimakasih banyak.

Semoga Tutorial Membuat Website ini bermafaat untuk Anda dan siapa saja yang membutuhkan.