Cara Membuat Website Sendiri: Panduan Lengkap

Saya menulis panduan cara membuat website ini untuk membantu pemula yang ingin belajar membuat website sendiri tanpa perlu menguasai coding atau mengeluarkan biaya untuk menyewa jasa web designer dan developer.

Saya yakin sebagian besar dari Anda akan berhasil.

Apa yang dibutuhkan?

• Anda hanya perlu menginvestasikan beberapa jam dari waktu Anda
• dan mengikuti panduan yang bagus.

Beberapa jam? Yes, kenyataannya, tidak ada yang bisa membuat website dalam waktu singkat. Tidak realistis bagi pemula untuk dapat membuat website dalam 30 atau 60 menit seperti yang sering dijanjikan oleh beberapa sumber.

Dan panduan bagus? Saya percaya Anda sudah berada di tempat yang tepat saat ini.

Ayo mulai dari bab 1.

Bab 1: Memilih Platform Terbaik

Ada lebih dari 100+ platform tersedia sampai saat ini. Memilih satu diantaranya adalah keputusan pertama yang perlu Anda ambil. Saya akan pandu Anda menemukan yang terbaik: mudah dipelajari, gratis dan yang sudah memiliki komunitas yang besar.

Pertama-tama, apa itu platform?

Dahulu, sekitar tahun 2004 atau 2005, membuat website itu sulit. Anda perlu setidaknya belajar CSS dan HTML untuk membuat website.

Belum lagi belajar bagaimana cara men-design websitenya sebelum meng-coding nya.

Tidak mudah, membutuhkan waktu dan mungkin Anda perlu pergi kesalah satu tempat terpencil agar bisa fokus dalam mempelajarinya.

Di tahun 2024 ini, faktanya Anda bahkan tidak perlu mempelajari itu semua untuk membuat website yang dapat menambah penghasilan/penjualan Anda di dunia online, karena sebagian orang telah membuat sebuah platform yang dapat mempermudah Anda dalam membuat website.

Dengan adanya platform, Anda dapat membuat website sendiri tanpa perlu ikut pelatihan kursus.

Apa Platform Terbaik untuk Membuat Website?

Ada banyak pilihan platform yang dapat Anda pilih untuk membuat website. Jumlahnya lebih dari seratus ketika saya mengeceknya di situs W3Tech.

Menurut statistik, berikut adalah platform yang paling banyak digunakan:

Seperti yang Anda lihat dalam statistik diatas, WordPress adalah platform yang paling populer di dunia dengan jumlah market share mencapai 43%.

Pertanyaannya: Mengapa WordPress begitu populer? Karena WordPress…

• Mudah digunakan / user-friendly
• GRATIS dan tidak ada iklan yang akan disematkan ke website Anda
• Memiliki komunitas yang besar
• Website yang dibangun dengannya akan tampak responsive di semua perangkat termasuk handphone dan tablet

Bagaimana dengan platform lainnya, seperti website builder: WIX, Squarespace dan Weebly?

Mereka adalah pilihan platform yang juga bagus. Hanya saja memiliki beberapa keterbatasan, seperti:

• Tidak gratis
• Perlu memilih paket minimal yang seharga $8.5/bulan (WIX) untuk menghapus iklan
• Bandwidth dan storage yang terbatas pada paket termurahnya (WIX)
• Website yang Anda tempatkan dalam platform mereka bukan 100% milik Anda

Untuk Anda yang baru memulai, saya menyarankan menggunakan WordPress.

Saya pribadi juga menggunakan WordPress di semua website yang saya miliki (termasuk Penasihat Hosting) dan saya percaya WordPress juga akan cocok buat Anda.

Dan kabar baiknya: Anda akan belajar bagaimana cara membuat website sendiri menggunakan WordPress dalam panduan ini.

Bab 2: Memilih Domain dan Hosting

Website itu dimulai dari sebuah nama domain - bukan design. Anda membutuhkan sebuah nama sebelum memulai membangun website Anda.

Memilih Nama Domain

Website itu dimulai dari sebuah nama domain. Bukan design.

Domain adalah nama website Anda. Sebuah alamat yang orang akan orang gunakan ketika mencoba mengunjungi website Anda melalui browser.

Misalnya, nama domain website ini adalah penasihathosting.com.

Memiliki nama domain yang bagus adalah suatu langkah awal yang sangat penting.

Apa alasannya?

Pertama karena nama domain dapat membantu Anda membangun merek yang akan menempel di benak pelanggan atau pengunjung Anda.

Kedua, nama domain dapat membantu menentukan target pasar Anda. Contohnya domain website saya: penasihathosting.com.

Jadi, langkah ke-2 dalam cara membuat website setelah memilih platform (WordPress) adalah menentukan nama domain.

Jika Anda masih bingung menentukan nama domain, berikut saya berikan beberapa tips yang semoga dapat mempermudah Anda mencari nama domain yang tepat:

• Jika Anda berencana membuat website untuk diri Anda sendiri, maka Anda bisa menggunakan nama Anda sebagai domainnya: NamaAnda.com.
• Jika membuat website untuk perusahaan, maka Anda juga bisa menggunakan nama perusahaan: NamaPerusahaanAnda.com.
• Jika untuk organisasi, maka Anda bisa juga menggunakan nama organisasi, misalnya GenerasiBebasRiba.com

Dan gunakan ekstensi domain yang populer agar website Anda terlihat lebih professional, seperti:

• .com
• .net
• .org (biasanya digunakan untuk organisasi)
• .sch.id (cocok digunakan untuk website sekolah)
• .ponpes.id (cocok digunakan untuk pesantren)
• .co.id (untuk perusahaan yang sudah memiliki izin usaha)
• .id (cocok untuk personal, tapi sekarang penggunannya sudah umum dan tidak hanya cocok untuk website personal saja)

Tips lainnya:

• Hindari trademarks atau merk dagang, misalnya nama domain: reviewhpSAMSUNG.com
• Hindari menggunakan tanda penghubung atau nomor
• Dan keep it simple

Oia, harga domain tidak terlalu mahal, yaitu mulai dari Rp145.000 per tahun nya.

Note: Saya akan kasih tau Anda cara mendapatkan domain gratis selama 1 tahun pada tahap selanjutnya.

Memilih Web Hosting

Web hosting adalah sebuah server untuk menyimpan data-data website secara online. Fungsinya adalah untuk menghubungkan website Anda dengan internet.

Mungkin Anda bertanya-tanya: Apa bedanya web hosting dengan domain?

Domain hanyalah sebuah alamat, seperti alamat rumah. Sedangkan hosting adalah rumahnya.

Tanpa adanya alamat (domain) dan rumah (hosting), orang tidak akan bisa masuk ke website Anda.

Itu sebabnya Anda membutuhkan keduanya agar website Anda bisa diakses oleh semua orang di internet, dari seluruh dunia.

Anda sudah belajar bagaimana cara memilih domain. Lalu, bagaimana caranya memilih hosting?

Ada lebih dari 100 provider hosting di Indonesia. Memilih satu diantara ratusan bukan pekerjaan yang mudah.

Memilih hosting adalah milestone terpenting pertama yang perlu Anda lalui, karena:

• Salah-salah memilih hosting, website Anda bisa kena masalah dikemudian hari, seperti data hilang, website sering error/tidak bisa diakses, dan semacamnya
• Salah-salah memilih hosting, website Anda bisa mudah kena malware, mudah dimasuki hacker, dan semacamnya

Pada intinya, salah memilih hosting, justru tidak akan membantu Anda dalam menghasilkan penjualan, malah cost yang akan bertambah karena Anda harus pindah-pindah provider hosting.

Masalah hosting ini cukup kompleks.

Memilih satu diantara banyaknya pilihan itu mudah-mudah sulit. Mudah menemukannya, karena memang ada banyak pilihan yang tersedia, tapi sulit untuk menemukan yang terbaik.

Untungnya, kami di Harun Studio telah melakukan penelitian selama lebih dari 30 bulan terhadap 22 provider hosting paling populer di Indonesia. (baca hasil penelitian)

Tujuannya? Salah satunya, agar orang yang baru belajar cara membuat website seperti Anda tidak salah dalam memilih hosting.

Dan rekomendasi hosting terbaik untuk pemula berdasarkan hasil penelitian kami adalah DomaiNesia setidaknya karena 5 faktor kuat berikut:

• Hosting atau server mereka stabil
• Kecepatannya cukup bisa diandalkan
• Supportnya bagus dan dapat diandalkan
• Fitur yang cukup banyak
• Plus penawaran harga yang cukup bersaing

Dapatkan Hosting dan Domain di DomaiNesia

Diskon spesial:

• Masukkan kode promo: BUATWEBSITE ketika checkout untuk mendapatkan diskon 5%.

Garansi hosting: DomaiNesia menawarkan garansi hosting selama 30 hari. Jika Anda kecewa dengan layanan mereka, Anda bisa meminta refund dan uang Anda akan kembali (dikurangi biaya domain).

Disclosure: Support Anda membantu website ini terus berjalan. Kami menggunakan link affiliasi, dimana kami akan menerima komisi sebesar 20 - 50% dari pembelian hosting Anda tanpa ada biaya tambahan dibebankan keapda Anda. Baca lebih lengkap.

Cara membeli hosting dan domain murah di DomaiNesia:

1. Kunjungi www.DomaiNesia.com (link referral/affiliate)

(1) Masukkan nama domain yang Anda inginkan pada form nama domain “A better web awaits..” (2) Jika domain yang Anda pilih tersedia, klik tombol “Pesan paket hemat”.

Jika tidak tersedia, silahkan mencari nama domain lain nya atau pilih ekstensi yang berbeda (.com, .id, .net, .org, dll).

2. Isi detail pembelian paket hosting

(1) Pilih paket hosting Anda. Saran saya adalah paket Super (2GB) dan Anda akan mendapatkan gratis domain selama satu tahun. (2) Lokasi server boleh Anda pilih Singapore atau Jakarta. Keduanya bagus, tapi saya prefer Singapore. (3) Pilih siklus pembayaran hosting. Jika Anda memilih 1 tahun, maka Anda akan mendapatkan gratis 1 domain. (4) Pastikan bahwa nama domain Anda sudah benar. Perhatikan setiap karakternya, karena jika salah, nama domain tidak bisa di ganti jika sudah aktif (5) Ceklis Addons: DNS Zone Manager (Gratis) (6) Masukkan alamat email Anda untuk pembuatan account DomaiNesia (7) Klik tombol warna hijau “Masukkan ke Troli”

3. Masukkan kode promo untuk mendapatkan diskon lebih besar

Kode promo: BUATWEBSITE (Diskon 35% dan berlaku untuk perpanjangan.)

Harga total yang harus Anda bayarkan jika sebelumnya Anda memilih paket “Super” harusnya adalah Rp 368.940 setelah mengaplikasikan kode promo kami.

Jika sudah benar, klik tombol “DAFTAR”.

4. Isi Data Diri

Isi nama depan dan belakang, institusi, email, dan password.

Dilanjutkan dengan mengisi alamat, nomor telepon.

Dan sebelum mengklik tombol warna hijau “Sign Up”, pastikan sekali lagi bahwa semua informasi yang Anda masukkan sudah benar.

Jangan asal-asalan mengisi data diri Anda.

Jika sudah benar, akan muncul pemberitahuan bahwa pendaftaran telah berhasil.

Klik tombol “Selesaikan & Bayar”.

Bab 3: Menginstall WordPress di cPanel

Install WordPress di cPanel hosting itu mudah. Prosesnya engga ribet dan hanya membutuhkan waktu kurang dari 5 menit saja.

Anda sudah memiliki 2 amunisi dasar untuk membuat website, yaitu domain dan hosting.

Sekarang adalah saatnya untuk membuat website Anda online agar bisa diakses oleh semua orang di internet.

Hal pertama yang harus Anda lakukan adalah menginstal platform WordPress di hosting Anda.

Ada dua cara menginstall WordPress:

1. Cara otomatis (one click installation)
2. Cara manual

Kita akan gunakan cara yang paling mudah, yaitu menggunakan fitur One Click Installation (install dengan 1x klik) di cPanel hosting.

Menginstall WordPress Menggunakan Fitur One-Click Installation

Hampir semua penyedia hosting menyediakan fitur One-Click Installation untuk menginstal WordPress di dalam cPanel hosting atau DirectAdmin Hosting atau Plesk hosting.

Jika Anda memilih hosting yang bagus, Anda akan menemukan fitur ini dalam cPanel hosting Anda.

Pada contoh ini, saya menggunakan provider hosting DomaiNesia.

Bagaimana jika Anda menggunakan provider hosting yang berbeda? Jangan panik, karena pengaturan nya tidak akan jauh berbeda.

1. Log in ke akun DomaiNesia Anda

Atau klik link login berikut: https://my.domainesia.com/signin/

Masukkan username dan password yang sudah Anda buat pada saat mengisi form pendaftaran akun DomaiNesia sebelumnya.

2. Pastikan Domain Anda Sudah Menggunakan SSL

Sebelum masuk ke langkah menginstall WordPress, ada satu hal penting yang harus Anda lakukan agar website Anda terlihat professional, yaitu menginstall SSL.

Jika menggunakan SSL, maka koneksi ke website Anda akan aman, seperti ini:

Jika tidak menggunakan SSL = tidak aman. Di browser Chrome, website Anda akan di labeli sebagai “Not Secure”.

Anda tidak mau website Anda terlihat tidak aman seperti diatas, bukan?

Lalu, bagaimana cara nya menginstall SSL pada website baru Anda? Caranya mudah.

Perhatikan di bagian sebelah kanan atas dari cPanel Anda, apakah primary domain Anda sudah “DV Certificate” berwarna hijau?

Pada dasarnya, di DomaiNesia SSL sudah aktif secara otomatis. Jika belum, primary domain Anda akan diberi keterangan “No Valid Certificate”.

Cara memperbaiki nya:

Jika sudah, silahkan lanjut ke langkah ketiga.

3. Redirect HTTP ke https (Untuk SEO)

Agar domain selalu menggunakan https (secure dan bagus untuk SEO), maka Anda harus melakukan redirect dari http ke https, jika tidak, maka orang lain dapat mengakses dua versi dari website Anda.

Satu yang http (not secure)Satu lagi yang https (secure/karena sudah terinstall SSL)

Karena itu, Anda perlu melakukan redirect http ke https.

Di cPanel, Anda dapat dengan mudah melakukan redirect ini dengan 1x klik saja.

Ada beberapa cara, tergantung provider hosting dan control panel yang Anda gunakan:

1. Jika menggunakan DomaiNesia

2. Jika menggunakan provider lain (selain DomaiNesia)

4. Kembali Ke Tutorial Cara Menginstall WordPress

Jangan lupa mengisi admin email dengan email aktif Anda. Ini bisa digunakan juga untuk melakukan reset password jika Anda lupa suatu saat nanti.

Tunggu sekitar 1-3 menit hingga WordPress terinstall dengan sempurna.

Jika sudah terinstall:

Melakukan Penyesuaian Pada Website Baru

Oke, sekarang Anda sudah berhasil menginstal WordPress. Website Anda sudah bisa diakses oleh semua orang di internet.

Anda bisa coba buka website Anda dengan mengetik nama domain Anda di browser.

Misalnya: penasihathosting.com di address bar Google Chrome.

Tetapi, saat ini website Anda masih terlihat baru dan kosong.

Sebelum mengisi nya dengan konten dan lanjut ke bab ke-4 dari tutorial cara membuat website ini, Anda perlu mengurus beberapa hal penting terlebih dahulu untuk membuat website terlihat siap.

Apabila Anda tidak yakin bagaimana caranya, ketik: http://domainanda.com/wp-admin/ (ganti “domainanda.com” dengan nama domain Anda).

Masukkan username atau alamat email dan password (yang Anda buat pada saat menginstal WordPress). Ketika Anda sudah log in, beginilah tampilan dashboard WordPress Anda:

Judul dan tagline adalah bagian pertama yang perlu Anda sesuaikan.

Buatlah judul dan tagline yang mencerminkan isi website Anda.

Sebagai contoh, judul website ini adalah “Penasihat Hosting” dan taglinenya adalah “Review Penyedia Layanan Web Hosting”.

Bagaimana caranya mengganti judul dan tagline?Pada dasboard WordPress Anda, klik Settings -> General.

Bingung menentukan judul dan tagline?

Jika Anda tidak yakin mau menulis apa, berikut saya berikan 4 tips jitu yang dapat membantu Anda:

• Jika Anda bikin website untuk tujuan branding bisnis/usaha, Anda dapat menggunakan judul yang sama atau identik dengan nama domain Anda. Sebagai contoh, judul halaman Google adalah Google dan Facebook adalah Facebook.
• Gunakan deskripsi yang menggambarkan website Anda secara keseluruhan dan gabungkan dengan nama domain Anda. Sebagai contoh, judul halaman website Tokopedia adalah “Jual Beli Online Aman dan Nyaman - Tokopedia”.
• Tanyakan pada diri Ada: “Apa tujuan website Anda?” Apa yang ingin Anda capai melalui website Anda?Anda dapat menggunakan tujuan atau yang ingin Anda capai sebagai judul dan tagline website Anda.
• Jika Anda membuat blog personal, Anda dapat menggunakan nama Anda sendiri sebagai judul blog dan profesi Anda sebagai tagline.

Ada tiga poin penting yang perlu Anda pertimbangkan ketika menyiapkan website Anda agar search engine friendly (bagus SEO nya).

Untungnya, ketiga poin ini sangat mudah dilakukan di WordPress.

1. Jangan gunakan format yang panjang dan tidak penting pada struktur URL Anda.

Yang dimaksud struktur URL itu adalah yang seperti ini:

http://domainanda.com/2017/02/01/category/cara-membuat-blog

Sebenarnya, engga salah menggunakan struktur URL tersebut, tapi mesin pencari tidak menyukai struktur yang panjang seperti contoh diatas.

Sebaiknya gunakan struktur URL yang pendek dan hindari penggunaan tanggal.

http://domainanda.com/cara-membuat-website

Bagaimana caranya agar struktur URL website Anda dapat seperti contoh yang benar diatas?

Klik Settings > Permalinks, lalu pilih ‘post name’ dan simpan pengaturan Anda.

2. Jangan blok mesin pencari untuk membaca dan me-crawl website Anda.

Klik Settings > Reading.

Scrool mouse Anda kebagian paling bawah.

Pastikan bahwa Anda TIDAK mencentang search engine visibility, jika Anda mencentangnya, maka website Anda sama sekali tidak akan terindex oleh mesin pencarian Google, Yahoo, Bing dan lainnya.

3. Jangan biarkan komentar spam mudah masuk ke website Anda

Faktanya, ada jutaan orang di internet yang gemar meninggalkan komentar spam untuk mengiklankan produk atau jasa mereka.

Klik Settings > Discussion dan pastikan Anda mencentang kedua pilihan dibawah ini:

Konten-konten yang perlu Anda hapus:

• Hapus “Hello World” di bagian “Posts”
• Hapus “Sample Page” di bagian “Pages”

Arahkan kursor Anda ke judul artikel agar pilihan Edit | Quick Edit | Trash | View muncul.

Bab 4: Memilih Tema WordPress

Buat informasi saja, WordPress memiliki 6.000+ tema gratis yang telah dirancang professional dalam database mereka. Anda bisa menjelajahinya seperti seorang anak kecil di dalam toko permen.

Website Anda masih kosong, Anda perlu membuat beberapa halaman, seperti halaman depan (home), tentang, kontak, dsb. Juga, Anda perlu memilih tema website. Di langkah 4 ini, saya juga akan pandu Anda memilih tema WordPres terbaik untuk apapun kebutuhan Anda.

Bagaimana Caranya Memilih Tema?

Klik Appearance > Themes dan klik tombol “Add New” untuk mengakses tema gratis yang ada di WordPress.

Dan boom! Anda memiliki akses ke lebih dari 6.000+ tema gratis WordPress!

Sekarang Anda bisa menelusuri berbagai pilihan tema seperti seorang anak kecil di toko permen.

Sampai disini, saya perlu memberitahu Anda bahwa sebelum merampungkan panduan cara membuat website WordPress untuk pemula ini, saya sudah mencoba berbagai tema WordPress populer yang menurut saya mudah untuk digunakan bagi siapapun dan apapun tujuannya.

Tema-tema populer seperti:

• Astra (1 juta+ telah terinstall)
• OceanWP (700rb+)
• Kadence (100rb+)
• GeneratePress (400rb+)
• Blocksy (50rb+)
• Dan Neve (300rb+)

Setelah mencoba semuanya, saya sampai kepada kesimpulan bahwa, yang:

• Gratis
• Mudah digunakan untuk pemula
• Mudah dikustomisasi
• Cepat dan SEO friendly

Adalah Astra.

Note:

• Anda bisa memilih tema lainnya jika Anda mau. Tapi, rekomendasi saya tidak akan jauh-jauh dari 6 tema yang telah saya sebutkan diatas.
• Semua tema yang saya sebutkan diatas bentuknya adalah freemium. Artinya, Anda bisa menggunakannya secara free/gratis, tapi jika Anda ingin fitur yang lebih banyak, Anda harus membayar biaya untuk upgrade ke premiumnya.
• Astra dalam pengujian saya adalah tema gratis yang powerfull. Anda bahkan tidak perlu upgrade ke premium untuk membuat website yang bagus.

Anda bisa menambahkan tema Astra langsung dari dashboard WordPress Anda.

Ketik Astra pada kolom pencarian disebelah kanan atas.

Kemudian arahkan kursor Anda ke thumbnail Astra dan tombol install akan muncul.

Klik tombol “install” lalu “Activate”.

Dan begitu Anda klik tombol “Activate”, maka tema sudah aktif.

Great job!

Jika sudah Anda install, maka sekarang saatnya membuat koten halaman di website Anda. Konten di halaman-halaman seperti:

• Home
• Tentang Kami
• Layanan Kami
• Kontak Kami
• Blog
• Testimonial

Atau apapun halaman yang Anda butuhkan.

Bagaimana membuat halaman baru dan menambahkan artikel?

Faktanya, menulis konten di WordPress itu mudah.

Tapi, ada yang perlu Anda ketahui sebelumnya, yaitu WordPress punya 2 tempat yang bisa Anda gunakan untuk menambahkan konten.

Ada Posts dan ada Pages.

Anda mungkin bertanya-bertanya:

“Mengapa ada 2 tempat? Lalu apa bedanya antara Posts dan Pages? (Penting untuk diketahui sebelum Anda lanjut ke tahap selanjutnya, jadi saya sarankan untuk tidak meloncati bagian ini).

Post dan Pages memang terlihat mirip, namun memiliki fungsi yang berbeda.

• Post digunakan untuk menerbitkan artikel yang sifatnya rutin di website Anda.

  Sebagai contoh, jika Anda ingin menerbitkan artikel seminggu sekali atau seminggu dua kali, maka sebaiknya Anda menulisnya dalam bentuk Post. Selain itu, Post juga dapat dibagi berdasarkan kategori.

  Katakanlah Anda memiliki website tentang berita, dan Anda mempunyai artikel-artikel tentang berita teknologi, berita politik, berita olahraga memanah, berita pendidikan, dan lain-lain.

  Maka Anda dapat memasukkannya kedalam kategori agar lebih mudah dicari oleh pengunjung. Sebagai contoh, saya memasukkan artikel cara membuat website menggunakan WordPress ini dalam bentuk Post.

• Sedangkan Pages sifatnya adalah tetap atau statis.

  Halaman-halaman yang dibuat dalam bentu Pages tidak dapat dimasukkan dalam kategori. Contoh halaman yang biasa dibuat menggunakan Pages adalah halaman home, tentang kami, kontak kami, testimonial, produk kami, visi/misi, dsb.

Cara menambahkan Pages

Jika Anda ingin membuat halaman ‘Tentang Kami’, ‘Kontak Kami’, ‘Visi/Misi’, dsb maka Anda harus menulisnya dalam bentuk Pages.

Caranya sebagai berikut:

Sampai disini, Anda hanya perlu mengisi judul halaman saja kemudian langsung klik tombol “Publish”.

(Spoiler: Karena saya akan ajak Anda untuk mendesain halaman website menggunakan plugin Elementor(?) nanti pada bab selanjutnya).

Jadi, biarkan saja apa adanya dulu kosong seperti ini.

Jika sudah klik publish, Anda bisa mengklik tombol logo WordPress seperti gambar dibawah ini untuk kembali ke halaman dashboard WordPress.

Katakanlah: Halaman depan (home), halaman tentang kami, kontak kami, blog (halaman yang berisi artikel-artikel yang dibuat dalam bentuk post), dsb.. maka buatlah halaman tersebut dan biarkan kosong apa adanya.

Dan Bagaimana Cara Menambahkan Pages Kedalam Menu?

Sebelum kita mendesain halaman-halaman yang sudah dibuat barusan, sebaiknya Anda tambahkan halaman-halaman tersebut ke dalam menu website.

Perhatikan menu pada gambar website dibawah ini:

Caranya juga mudah.

1. Buat nama menu website Anda. Boleh apa saja, karena tidak akan mempengaruhi apapun
2. Klik tombol “Save Menu”
3. Tambahkan halaman yang sudah Anda buat sebelum nya ke dalam struktur menu dengan men-centang/ceklis nya. Misalnya, Anda ingin menambahkan halaman Home, Tentang dan Kontak. Anda juga bisa menambahkan menu di dalam posts atau membuat custom links.
4. Kemudian klik tombol ‘Add to Menu’. Maka semua halaman yang Anda centang akan muncul di struktur menu.
5. Atur menu sesuai keinginan dengan cara drag & drop. Ingat bahwa Anda juga bisa membuat sub menu seperti contoh saya diatas.
6. Centang ‘Header Menu 1”
7. Terakhir, klik tombol ‘Save Menu’ kembali (untuk kedua kalinya)

Sampai pada tahap ini, Anda bisa cek apakah menu website yang baru Anda buat sudah tampil di website Anda.

Bab 5: Melakukan Penyesuaian pada Tema

Astra merupakan tema yang mudah dikustomisasi dan salah satu dari tiga tema favorit saya selain GeneratePress dan Blocksy.

Sebelum lanjut ke langkah terakhir dari panduan cara membuat website, yaitu mendesain halaman kosong (home, tentang, kontak, dsb) yang sudah Anda buat sebelumnya, Anda perlu melakukan sedikit penyesuaian pada tema Astra terlebih dahulu, agar bisa sesuai seperti yang Anda inginkan.

1. Membuat Halaman Statis di Homepage

Halaman statis adalah halaman yang tidak pernah berubah.

Jadi, “statis” akan menampilkan konten atau artikel yang sama setiap kali seseorang datang ke website Anda.

Contohnya adalah halaman depan (harunstudio.com), kapanpun Anda mengunjunginya dan seberapa seringpun saya menulis artikel baru, halaman statis ini tidak akan pernah berubah.

Bagaimana cara membuat halaman statis?

Buka appearance > Customize.

Klik “Homepage Settings” pada bagian sebelah kiri Customize.

Lalu atur sebagai “A Static page”, kemudian pilih Homepage = Home (Halaman depan kosong yang sudah Anda buat sebelumnya).

dan Posts page = Blog.

Post Page ini sifatnya opsional, namun jika Anda ingin menulis artikel yang sifatnya rutin maka Anda perlu membuat halaman Post page yang menampilkan artikel-artikel yang sudah Anda terbitkan di website.

Jika Anda belum membuatnya, Anda bisa kembali untuk membuat halaman kosong baru dan beri judul sebagai Blog.

2. Kustomisasi Global Website

Ini termasuk bagian yang paling terpenting dari semua rangkaian proses cara membuat website, yaitu menentukan dari awal global website Anda.

Mulai dari apa font yang Anda gunakan, warna hingga layout website Anda.

Kita akan mulai dari menentukan typography.

Buka Global > Typography

Secara default, font tema Astra yang Anda gunakan menggunakan system font. Secara performance, system font adalah font yang paling cepat.

Tapi, jika Anda ingin menggantinya yang lebih fancy, Anda bisa memilih font lainnya.

(1) Anda bisa memilih satu diantara enam font yang telah direkomendasikan oleh Astra pada bagian “Presets” (2) Atau memilih font sendiri dari daftar font yang ada di bagian “Body Font Family” (3) Tentukan size body font Anda. Saran saya jangan gunakan font lebih kecil dari 16.

Untuk pengaturan yang lain, saya rasa tidak perlu diubah-ubah dahulu.

Buka Global > Colors

Salah satu ciri website yang bagus adalah konsisten terhadap warna. Saya menyarankan untuk tidak menggunakan kombinasi warna yang banyak, misalnya lebih dari 6 warna.

Lebih sedikit lebih baik.

Misalnya, Facebook identik dengan warna biru. Tokopedia identik dengan hijau. Youtube identik dengan warna merah.

Secara default, Astra menggunakan kombinasi warna biru, hitam dan putih. Anda bisa memilih warna lainnya.

Jika Anda bingung memilih kombinasi warna, Anda bisa mengunjungi situs berikut untuk mencari inspirasi warna:

• Coolors.co
• Canva

Buka Global > Container

(1) Container width adalah lebar website Anda. Semakin tinggi nilainya maka semakin lebar website Anda. Saran saya biarkan default saja (1200px) (2) Ini adalah model layout secara default. Jika Anda memilih contain boxed, maka secara default semua layout, baik page dan blog akan memiliki layout yang contained boxed. (3) Biasanya halaman Pages layoutnya full width, tapi saya serahkan kepada Anda bentuk layout nya sesuai dengan keinginan Anda.

3. Kustomisasi Header

Jika Anda tidak yakin mana yang disebut header, perhatikan gambar dibawah ini:

Sampai disini, Anda mungkin ingin mengganti nama website Anda menjadi gambar logo website Anda atau mengganti nya dengan nama lain.

Anda mungkin juga mau mengganti warna background header dari putih menjadi hitam, atau ingin merubah posisinya berada di sebelah kanan, kiri, atau tengah, dsb.

Kita akan mencoba satu per satu fungsi Header Builder mulai dari sini.

Anda bisa berkreasi sebebas yang Anda mau.

Ini sifatnya masih optional.

Jika Anda sudah memiliki logo website, Anda bisa mengganti logo text dari logo berbentuk text menjadi logo bergambar.

Caranya buka Header Builder > dan klik Site Title & Logo seperti yang saya tunjukkan dalam gambar dibawah ini:

Kemudian ikuti langkah-langkah berikut:

(1) Klik ‘Select Logo’ untuk upload logo Anda (2) Atur lebar logo Anda. Misalnya 150, 200, dll.. (3) Anda mungkin ingin menyembunyikan judul text website Anda (4) Jika Anda ingin menggunakan logo text, Anda bisa merubah text nya dengan nama lain, misal My Blog (5) Jika Anda ingin mensejajarkan logo gambar dengan logo text Anda (6) Jika Anda ingin menggunakan tagline

Jika sudah selesai klik tombol “Publish” berwarna biru yang terletak di bagian kiri atas layar Anda.

Secara default, warna background header tema Astra adalah putih.

Mungkin Anda ingin merubahnya menjadi warna merah, hijau, biru atau apapun warna yang Anda inginkan.

Buka Header > Arahkan kursor Anda ke bagian logo seperti gambar dibawah dan klik Main Row

Klik tab “Design” (yang saya lingkari warna merah).

Kemudian klik icon background dan pilih warna background Anda.

Untuk merubah-rubah posisi suatu element, baik logo, menu, search dan lain-lain itu sangat mudah dilakukan di tema Astra.

Anda bisa menambahkan apapun di dalam header Anda, seperti button, kolom pencarian (search), secondary menu, dan lain-lain.

Sampai disini, Anda bebas meng-explore bagian-bagian lainnya dari tema Astra Anda.

Namun, pastikan sebelum lanjut ke bab terakhir, Anda mengklik tombol “Publish” yang ada di sebelah kiri atas agar semua perubahan yang Anda lakukan tersimpan.

Bab 6: Membangun Halaman Website dengan Elementor

Langkah 6 merupakan inti dari panduan cara membuat website dengan WordPress ini. Saya ucapkan selamat karena Anda telah sampai disini. Great job! Yang bisa saya katakan adalah langkah terakhi ini adalah yang paling menyenangkan diantara semuanya.

Masih ingat dengan halaman-halaman kosong yang Anda buat pada langkah sebelumnya?

Sekarang saatnya Anda membangun halaman-halaman kosong tersebut.

Membangun Halaman Dengan Plugin Page Builder

Ada dua cara untuk membangun halaman di WordPress.

Pertama, cara yang membutuhkan pengetahuan coding: CSS, HTML, PHP dan JavaScript (cara tersulit).

Kedua, menggunakan cara yang mudah (drag & drop) -> cara yang akan Anda gunakan dalam panduan ini.

Masih ingat bagaimana Anda menggunakan fitur drag & drop ketika melakukan kustomisasi pada header website Anda?

Mudah bukan? Kira-kira seperti itulah cara bagaimana Anda akan membangun website membangun plugin Page Builder.

Atau jika sebelumnya Anda telah mencoba platform website builder seperti WIX dan Squarespace, maka Anda juga tidak akan merasa asing ketika mencoba plugin page builder di WordPress.

Faktanya, saya pun dalam membangun panduan cara membuat website dari nol ini juga menggunakan plugin page builder (drag & drop).

Saya bahkan tidak punya latar belakang IT dan saya percaya Anda juga pasti bisa melakukannya.

Memilih Page Builder yang Newbie-Friendly

Sama seperti ketika memilih tema Astra, sebelum memilih plugin Page Builder, saya juga sudah mencoba berbagai pilihan populer, seperti Elementor, Beaver, dan Brizy. Tidak lupa saya juga mencoba Gutenberg Editor seperti Kadence Block.

Setelah menghabiskan berjam-jam mencoba berbagai page builder, saya sampai pada kesimpulan dimana plugin Page Builder Elementor adalah yang paling tepat untuk pemula, karena dua alasan:

• Mudah digunakan untuk pemula sekalipun (User-Friendly)
• Versi gratisnya sudah cukup powerfull dan dilengkapi denagn fitur-fitur yang banyak
• Ada banyak plugin pendukung gratis yang bisa Anda manfaatkan untuk menambah fungsionalitas

Saya percaya Anda akan menyukai bagaimana membangun halaman-halaman website Anda menggunakan Elementor.

Faktanya, Elementor Page Builder adalah plugin yang sangat populer.

Saat ini sudah di install lebih dari 5 juta kali dan mendapatkan lebih dari 5.000 rating 5. Anda menggunakan plugin yang tepat.

Untuk memulainya, silahkan ikuti dua langkah beirkut ini:

Buka Plugins > Add New > Cari “Elementor” dalam kotak pencarian.

Kemudian klik tombol “Install Now” dan “Activate” hingga muncul pesan “Plugin Activated”.

Anda membutuhkan plugin pendukung untuk Elementor. Gunanya adalah untuk menambah fungsi pada plguin Elementor yang Anda gunakan menjadi lebih banyak, sehingga memudahkan Anda dalam membuat website.

Dari hasil pengujian beberapa plugin pendukung gratis terbaik untuk Elementor, saya sampai pada kesimpulan bahwa plugin Starter Templates dari Brainstorm Force adalah yang paling bagus.

Plugin Starter Templates ini adalah plugin yang dibuat oleh tim yang sama dengan yang membuat tema Astra.

Jadi, kombinasi antara tema Astra + plugin page builder Elementor + plugin pendukung Starter Templates adalah pilihan yang tepat dan merupakan yang terbaik berdasarkan pengujian yang saya lakukan.

Buka bagian Plugins kembali > Add New > Cari “Starter Templates” dalam kotak pencarian.

Kemudian klik tombol “Install Now” dan “Activate” hingga muncul pesan “Plugin Activated”.

Membangun Halaman Depan (Home)

1. Persiapan

Buka Pages.

Lalu Edit halaman depan Anda, dalam contoh ini saya memberikan judul halaman depan sebagai Home.

Kemudian, ikuti langkah-langkah pengaturan berikut untuk mempersiapkan halaman Anda sebelum meng-edit nya dengan plugin Elementor.

(2) Ubah Sidebar menjadi No Sidebar (3) Ubah Content Layoutnya menjadi Full Width / Stretched (4) Dan pilih Disable Title

Anda akan digiring ke halaman Elementor Page Builder.

Disinilah tempat Anda membangun halaman-halaman pada website WordPress Anda.

2. Mengenal User Interface Elementor

Seperti yang Anda lihat pada gambar dibawah, terdapat 2 bagian: kiri (bagian berwarna hijau) dan kanan (bagian berwarna merah) yang agak-agak mirip seperti fitur Customizer yang sudah Anda gunakan sebelumnya.

Di bagian kiri terdapat widget-widget yang bisa Anda gunakan, seperti:

• Widget heading untuk membuat Judul halaman
• Widget image untuk menambahkan gambar
• Widget button untuk membuat tombol
• Widget icon untuk menambahkan icon, dan lain-lain

Sedangkan di bagian kanan adalah halaman yang akan Anda bangun. Cara menambahkan widget ke dalam halaman adalah dengan cara drag & drop. Sama seperti ketika Anda menggunakan header dan footer builder dari tema Astra sebelumnya.

3. Membangun Halaman menggunakan Elementor

Mulai dari sini, Anda mungkin akan menghabiskan lebih banyak waktu membangun halaman menggunakan Elementor Page Builder.

Bagian ini menurut saya adalah yang paling menyenangkan, karena caranya cukup mudah, dan ada cukup banyak template dan block gratis yang disediakan oleh Elementor untuk membantu Anda dalam membangun halaman.

Ohiya, ada dua cara membangun halaman:

Pertama dan cara termudah adalah menggunakan template jadi, Anda cukup melakukan modifikasi saja.

Kedua, mendesain halaman dari nol. Ini bukanlah cara yang bagus buat pemula.

Jadi, di dalam panduan ini saya akan pandu Anda menggunakan cara pertama, yaitu menggunakan template yang sudah ada dan memodifikasinya.

3.1 Menggunakan template yang Sudah Ada

Ikuti langkah-langkah berikut:

Kemudian akan muncul.. Kita akan sebut ini sebagai Template Library, yaitu sebuah tempat dimana Anda bisa mencari template, baik itu template pages (sebuah template jadi) dan blocks (template per bagian).

Template library ini disediakan oleh plugin Starter Templates yang telah Anda instal sebelumnya.

Mungkin muncul pertanyaan di benak Anda:

Mengapa tidak menggunakan template yang telah disediakan langsung oleh Elementor saja?

Karena tidak banyak pilihan yang gratis. Saya sudah mengeceknya dan mereka seperti memaksa Anda untuk upgrade ke versi PRO untuk menggunakan semua template yang mereka buat.

Itulah alasan terbesar saya mengapa memilih untuk menggunakan plugin pendukung seperti Starter Templates, yaitu untuk memudahkan Anda ketika sedang membangun halaman website.

Template library dari Starter Templates memiliki dua buah template, yaitu yang bentuknya Pages dan yang bentuknya Blocks.

Apa bedanya template pages dan blocks?

Pages adalah template jadi. Lengkap. Biasanya terdiri dari kumpulan dari bagian:

• Hero
• Feature
• Price
• Testimonials
• Team

Sementara blocks adalah bagian-bagian dari template jadi diatas.

Misalnya, Hero adalah block. Feature adalah block. Testimonials adalah block.

Pertama-tama, Anda bisa filter pencarian dengan hanya menampilkan template yang free alias gratis saja.

Per 5 Januari 2022 ketika saya sedang meng-update panduan cara membuat website dengan Elementor ini, saya hitung ada sekitar 99 template pages gratis yang tersedia.

Atau Anda juga bisa mencari dengan memasukkan keyword tertentu di kotak pencarian, seperti: business, organic, clean, cv, dan lain-lain.

Misalnya, dalam contoh panduan cara membuat website ini, saya menggunakan template “Love Nature”.

Note: Anda bisa memilih template yang lainnya, tidak perlu sama dengan ini. Carilah template yang sekiranya cocok dengan kebutuhan website Anda.

Kemudian, klik gambarnya.

Akan muncul beberapa pilihan dari template “Love Nature”. Karena saat ini Anda sedang membangun halaman home, maka klik template yang “Home”.

Sebelum template dimasukkan ke dalam halaman home, Anda bisa melihat terlebih dahulu layout penuh dari template home yang Anda pilih tadi.

4. Memodifikasi Template

Nah, sekarang Anda sudah memiliki template dan Anda mungkin sudah siap untuk melakukan modifikasi dari template yang Anda pilih.

Saya akan pandu Anda untuk memodifikasi beberapa elemen penting yang menurut saya paling Anda butuhkan:

Ketika Anda memasukkan template ke halaman, Anda mungkin menyadari bahwa section bagian atas (istilahnya dalam web design adalah “Hero”) atau section-section lainnya memiliki lebar yang tidak full seperti yang tampil dalam screenshoot dibawah:

Anda bisa membuat lebarnya menjadi full atau full width dengan mengaturnya menjadi full width.

Caranya mudah. Arahkan kursor Anda ke section yang ingin Anda jadikan full width. Perhatikan akan muncul garis kotak berwarna biru. Pada bagian atasnya, ada tiga buah tombol icon yang berdampingan satu sama lain.

• Icon bertanda plus berfungsi untuk menambah section baru
• icon bertanda enam buah titik untuk melakukan editing pada section
• Dan icon bertanda “X” berfungsi untuk menghapus section

Nah, klik pada icon bertanda enam buah titik yang ada di tengah dan akan muncul pengaturan pada section tersebut disebelah kiri layar Anda.

Kemudian, aktfkan atau klik full width section pada toggle seperti yang saya tunjukkan dibawah ini:

Ini sifatnya optional dan tergantung dari selera atau kebutuhan design Anda. Tapi, jika Anda ingin membuat header Anda menjadi transparan seperti dibawah ini, maka ini juga mudah dilakukan.

Pengaturannya ada pada tema Astra, jadi Anda mungkin perlu membuka tab baru pada browser Anda dan pada dashboard WordPress Anda, buka Appearance > Customize.

Buka Header Builder > Lalu klik Transparent Header

Lalu, aktifkan Enable on Complete Website seperti yang saya arahkan dibawah ini untuk membuat header menajdi transparan.

Untuk merubah suatu text atau button, Anda cukup mengklik pada element yang Anda ingin ganti.

Kemudian perhatikan panel di sebelah kiri Anda, panel tersebut langsung berubah menjadi editor untuk element yang Anda klik.

Anda bisa merubah text langsung dari element, atau dari panel di sebelah kiri.

Bagaimana cara merubah style, seperti warna, size font dan lain-lainya?

Klik pada tab “Style” untuk mengatur warna text, ukuran, shadow, dan lain-lainnya.

Bagaimana dengan tombol atau button?

Sama caranya seperti ketika Anda merubah text. Anda klik terlebih dahulu button yang ingin Anda modifikasi, kemudian panel editor button akan muncul di sebelah kiri layar Anda.

Perhatikan yang saya kotaki warna merah diatas. Akan muncul semua warna palette yang Anda atur sebelumnya di tema Astra Anda.

Saya menyarankan untuk menggunakan warna yang konsisten, karena itu pilihlah warna berdasarkan warna palette yang tersedia saja.

Jika Anda ingin merubah kumpulan warna palette tema Anda, kembali pada pengaturan colors di fitur customize tema Astra Anda.

Ada cara yang berbeda dalam mengganti gambar tergantung dari widget atau element yang digunakan.

Jika gambar yang ingin Anda ganti adalah gambar background, maka caranya adalah arahkan kursor Anda ke gambar background yang ingin diganti, dan klik icon edit section (icon bertanda enam buah titik putih).

Kemudian klik gambar untuk menggantinya dengan gambar yang lain.

Ngomong-ngomong, plugin Starter Templates memiliki fitur untuk mengambil gambar langsung dari situs Pixabay. Anda bisa mencari ribuan gambar gratis langsung dari Media Library.

Pastikan Anda klik tab “Free Images” untuk mencari gambar yang Anda inginkan.

Benar-benar plugin yang bagus, bukan?

Bagaimana jika Anda ingin mengganti gambar yang bukan gambar background, seperti dibawah ini?

Cukup klik gambar yang ingin Anda ganti dan klik “Choose Image” pada panel sebelah kiri Anda.

Saya percaya kemungkinannya besar Anda akan menambahkan section baru pada design halaman Anda.

Mungkin Anda ingin menambahkan informasi lain seperti fitur, testimonials, FAQ dan lain-lain.

Ada tiga cara:

1. Bangun section dari awal (tidak menggunakan template)
2. Menggunakan template block yang telah disediakan Stater Templates
3. Mengambil section dari template pages yang lain

Cara kedua, memilih block dari Template Library.

Ada lebih dari 100+ block. Dan tidak seperti template pages, semuanya bisa Anda gunakan secara gratis. Wo-ho!

Cara ketiga, mengambil section dari template pages lainnya. Cara ini agak ribet, tapi tidak ada cari yang lebih mudah daripada Anda membuatnya dari nol.

5. Selesaikan Desain Halaman Home Anda

Elementor cukup mudah untuk dipahami.

Mungkin Anda akan menemui kesulitan pada awal mulai membangun halaman website Anda, tapi itu wajar, Anda perlu mencoba dan meng-eksplore bagian-bagian lainnya pada Elementor agar terbiasa menggunakannya.

Sampai disini Anda bebas berkreasi seperti mengganti warna background, menambah section dan widget, membuat tombol, dan lain-lain.

Lalu, bagaimana dengan halaman lainnya, seperti halaman about us, services, atau apapaun halaman selain homepage yang Anda buat?

Caranya sama dengan membuat halaman home, Anda hanya perlu mengulang prosesnya dari awal.

Launching Website Anda

Jika Anda benar-benar mengikuti panduan cara membuat website dari awal hingga akhir, saya percaya website Anda telah siap untuk di launching.

Apa Selanjutnya?

Sejujurnya, masih ada banyak hal yang perlu Anda pelajari. Panduan ini hanya awalnya saja.

Saya mungkin akan membuat panduan lainnya (sedang struggle mencari waktu), seperti panduan:

• Membuat contact form dan mengintegrasikannya dengan webmail dan 3rd party email
• Memilih plugin terbaik untuk SEO, Performance, Security, dan lain-lain
• Cara maintenance website WordPress
• Tips SEO On Page
• Dan lain-lain..

Terakhir, jika Anda memiliki pertanyaan, jangan sungkan-sungkan untuk mengirimkannya melalui kolom komentar yang ada dibawah.