Cara Membuat Website
Panduan Mudah, Langkah Demi Langkah Untuk Pemula


​Ini adalah panduan terbaru tentang cara membuat website untuk pemula.


Berita baiknya, sama sekali TIDAK diperlukan pengetahuan coding untuk mengikuti panduan ini (pemula friendly).

Saya akan jelaskan langkah-langkahnya dari nol sampai tuntas, sampai website Anda siap untuk diluncurkan. No worries.


Ditulis oleh Willya Randika 
(Founder penasihathosting.com)
Terakhir di update: 10 Januari 2020

cara membuat website

KONTEN CARA MEMBUAT WEBSITE

(Apa yang akan Anda pelajari)

memilih platform website terbaik

Langkah 1:
Memilih platform website

memilih domain dan hosting terbaik

Langkah 2:
Memilih domain dan hosting

menginstall WordPress di cPanel hosting

Langkah 3:
Menginstall WordPress

memilih tema WordPress terbaik

Langkah 4:
Memilih Tema WordPress

Mendesain halaman website

Langkah 5:
Mendesain Website

Launching website Anda

Langkah 6:
Launching Website

N/B: Panduan ini tidak mencakup panduan membuat toko online
(Saya mungkin akan tulis panduan khusus toko online di lain kesempatan)

LANGKAH 1:
Memilih Platform Website Terbaik


Jika Anda serius ingin membangun website yang bagus dan mobile friendly, Anda harus memilih platform terlebih dahulu.

Platform yang dapat membuat proses pembuatan website Anda menjadi lebih mudah.

Dan hari ini, Anda akan belajar bagaimana cara membuat website menggunakan platform terbaik.

Lets do this..

memilih platform website terbaik

Pertama-tama: Apa itu Platform?

16 tahun yang lalu, orang yang ingin membuat website menghadapi masalah yang besar:

Dimana untuk membuat sebuah website, sangat diperlukan keterampilan design dan pengetahuan coding, karena sebagian besar website ketika itu dibangun menggunakan kode HTML, CSS dan flash sehingga membutuhkan waktu yang lama untuk mempelajarinya.

Saya tidak bercanda...

Satu-satunya cara untuk membuat website pada zaman itu adalah jika Anda mungkin mau menghabiskan sebagian besar hidup Anda belajar HTML di salah satu kuil terpencil di Himalaya.


Munculnya Platform

Tapi, Anda tidak perlu khawatir karena zaman tersebut sudah berlalu, bersyukurlah Anda yang hidup di zaman now, karena sekarang ini tiba-tiba membuat website menjadi mudah!

Dengan munculnya sebuah platform atau lebih dikenal dengan content management system (CMS), siapapun dapat membuat website sendiri tanpa perlu ikut pelatihan khusus.

Yang Anda butuhkan adalah panduan yang bagus dan mungkin secangkir teh atau kopi hangat atau apapun minuman kesukaan Anda untuk menemani Anda dalam proses pembuatan website.

Dan tentunya sebuah paltform terbaik sebagai alat untuk membangun website impian Anda.


Statistik platform paling populer di dunia

Seperti yang Anda lihat, WordPress adalah platform yang paling populer dengan penggunaan lebih dari 50% di seluruh dunia.

Kabar baiknya, Anda akan belajar bagaimana cara membuat website dengan WordPress dalam panduan ini.

Mengapa WordPress

Mungkin Anda bertanya-tanya, apa alasannya mengapa sebagian besar orang menggunakan WordPress:

  • WordPress itu benar-benar GRATIS
  • WordPress memiliki komunitas yang besar
  • Platform yang user-friendly, dan
  • Website yang dibangun menggunakan WordPress akan tampak responsive atau optimal pada semua perangkat termasuk handphone dan tablet.

"Jadi, untuk pemula saya sangat menyarankan WordPress"

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

LANGKAH 2:
Memilih Nama Domain dan Hosting


Agar website Anda bisa diakses oleh semua orang di internet, Anda membutuhkan dua hal, yaitu:

  1. Nama domain (alamat website seperti : namawebsiteanda.com),
  2. Dan web hosting (sebuah layanan yang menghubungkan website dengan internet).
memilih domain dan hosting terbaik

Web hosting adalah sebuah server untuk menyimpan data-data website secara online, jadi tanpa web hosting, website Anda tidak bisa diakses di internet.

Dan jika Anda membuat website untuk tujuan bisnis, untuk branding atau hanya agar website Anda terlihat professional, maka Anda membutuhkan nama domain yang berekstensi professional juga, seperti .com, .net, .id, .org, .co.id, dsb.

Maksud saya, bukan nama domain yang ada embel-embel seperti websiteanda.blogspot.com atau sejenisnya, karena tentu saja itu tidak terlihat keren.

Berapa Harga Sebuah Nama Domain dan Hosting?

Platform WordPress itu sendiri gratis.

Tetapi nama domain dan hosting akan dikenakan biaya kurang dari Rp 30.000 per bulan. Tidak terlalu mahal bukan?

Lalu dimana saya bisa mendapatkan domain dan hosting?

Rekomendasi saya ada dua, yaitu Jetorbit dan Niagahoster.

Pengungkapan: Saya akan menerima komisi (30% - 70%) jika Anda membeli hosting di Jetorbit atau Niagahoster. Anda tidak akan dikenakan biaya tembahan, bahkan khusus Niagahoster saya berhasil menegosiasikan harga yang lebih murah untuk Anda (extra diskon 10%). Terima kasih atas support Anda. Baca lebih lengkap.

Pilihan Pertama

review Jetorbit Hosting

Jetorbit adalah salah satu dari sedikit perusahaan hosting yang mampu menjaga keseimbangan antara harga dan kualitas.


Jetorbit memiliki rata-rata uptime terbaik (99,93%) + ditunjang dengan rata-rata speed yang cepat (0,799 detik).

Pilihan Kedua

Niagahoster

Niagahoster adalah pilihan hosting yang ramah untuk pemula. Mereka sudah menerapkan sistem conversation dimana semua support 100% dilayani via live chat.


Niagahoster juga memiliki rata-rata speed yang bagus + uptime yang mengesankan (kecuali bulan Oktober 2019).

Keduanya bagus.

Sementara Jetorbit lebih baik dari sisi uptime (server yang stabil/tidak sering down), Niagahoster lebih bagus dari sisi support. Sedangkan dari faktor kecepatan server nya, keduanya tidak jauh berbeda (berdasarkan penelitian Penasihat Hosting update Januari 2020).

Kalau soal harga, Jetorbit lebih murah.

Jika Anda masih bingung memilih antara Jetorbit atau Niagahoster, saya menyarankan Anda untuk membaca review lengkap kedua hosting terlebih dahulu.

Dan untuk memudahkan Anda, saya akan pandu cara membeli hosting dan domain di kedua provider tersebut.

  • cara beli hosting di jetorbit
  • cara beli hosting di niagahoster

1. Kunjungi www.Jetorbit.Com dan klik menu "Web Hosting Murah"

Klik web hosting murah

2. Pilih paket hosting Anda. Saran saya minimal Anda perlu memilih paket Mars.

Jika Anda sudah yakin paket hosting mana yang ingin Anda beli, maka klik tombol "BELI". Dalam contoh ini, saya mengklik tombol "BELI" pada paket "MARS".

Klik tombol beli

3. Masukkan nama domain Anda (1), kemudian pilih ekstensi domain (.com, .net, .id, .org, dll), dan klik tombol "Periksa".

Masukkan nama domain Anda

Jika domain yang Anda periksa tersedia, maka akan muncul keterangan bahwa domain yang Anda pilih masih tersedia. Jika tidak tersedia, Anda bisa memikirkan nama domain lainnya atau memilih ekstensi yang berbeda (.com, .net, .id, org).

Selanjutnya, klik tombol "+Add" pada esktensi domain yang Anda inginkan.

klik add pada ekstensi yang diinginkan

4. Selanjutnya, pilih siklus penagihan.

Anda bisa memilih siklus tagihan mulai dari secara bulanan, tiga bulanan hingga tahunan dan tiga tahunan (1).

Kedua, pastikan lokasi server yang Anda pilih adalah INDONESIA jika website Anda berbahasa Indonesia atau lokasi US jika website berbahasa Inggris (2).

Jika sudah, klik tombol "Selanjutnya" (3).

Pilih siklus penagihan hosting

5. Harap periksa ulang nama domain Anda. Jika sudah benar, klik tombol "Selanjutnya"

periksa ulang nama domain dan addons jika ada

6. Terakhir, Anda perlu membuat account di Jetorbit dengan cara mengisi data diri lengkap dalam form yang sudah disediakan.

Daftar Jetorbit

Jika semua sudah Anda, klik tombol "Selesaikan Pesanan".

Selanjutnya Anda bisa membayar tagihan Anda dan menunggu sebentar hingga hosting dan domain aktif dan siap untuk digunakan.

Jika sudah aktif, Anda bisa lanjut ke langkah 3 dimana kita akan mulai menginstall WordPress pada website Anda 😉

LANGKAH 3:
Menginstall WordPress di cPanel


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

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

Hal pertama yang harus Anda lakukan adalah menginstal WordPress di domain Anda.

Ada dua cara menginstall WordPress, dan kita akan gunakan cara yang paling mudah, yaitu menggunakan fitur Once Click (install dengan 1x klik) di cPanel hosting.

menginstall WordPress di cPanel hosting

Menginstall WordPress Menggunakan Fitur One Click Installation (Install dengan 1x klik)

Hampir semua penyedia hosting terbaik pasti menyediakan fitur One-Click Installation untuk menginstal WordPress.

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

1

Pertama-tama, masuk ke cPanel: www.domainanda.com/cpanel (ganti "domainanda" dengan nama domain Anda).

Lalu masukkan username dan password yang diberikan pada saat pembelian hosting (cek email pendaftaran hosting jika lupa).

Masuk ke cPanel Hosting
  • masuk ke cpanel jetorbit
  • masuk ke cpanel niagahoster

1. Log in ke account Niagahoster Anda: https://panel.niagahoster.co.id/login dan masukkan username dan password yang sudah Anda buat pada saat mengisi form pendaftaran account Niagahoster.

2. Perhatikan menu-menu yang ada di sisi sebelah kiri Anda. Klik menu "Layanan Anda", kemudian klik tombol "Kelola" pada layanan hosting Anda.

Klik layanan Anda Niagahoster

3. Kemudian, klik icon cPanel seperti yang saya arahkan pada gambar dibawah ini.

Klik cPanel All features

2

Sebelum menginstall WordPress, saya akan mengajak Anda untuk menginstall SSL pada domain Anda (hanya beberapa detik saja), agar domain Anda terlihat secure di browser seperti ini:

Website menggunakan SSL = Secure dan professional

Menggunakan SSL

Website TIDAK menggunakan SSL = Not Secure dan tidak professional

Tidak menggunakan SSL

Bagaimana caranya?

Jika Anda menggunakan Jetorbit, SSL sudah otomatis terinstall dan aktif begitu hosting dan domain Anda aktif. Jadi, Anda bisa langsung lanjut ke langkah ketiga.

Jika Anda menggunakan Niagahoster, Anda perlu melakukan 1-2 langkah sederhana berikut:

1. Pada pengaturan akun hosting, klik icon "Lets Encrypt" seperti yang saya arahkan berikut:

Insatall SSL Lets Encrypt

2. Klik "+ Issue" pada domain Anda

klik issue new ssl

3. Terakhir, pastikan semua domain di ceklis/include dan klik tombol biru "Issue".

Proses install SSL sendiri hanya beberapa detik saja. Sampai disini, Anda bisa lanjut ke langkah ketiga.

Issue new ssl certificate

4. Jika sudah selesai, klik logo cPanel untuk kembali ke halaman awal cPanel

klik logo cPanel

3

Cari dan klik logo WordPress atau bila tidak ada, pilih "Softaculous Apps Installer"

cari dan klik WordPress

4

Klik tombol biru "Install Now"

Klik tombol Biru Install Now

5

Isi informasi yang dibutuhkan (perhatikan gambar dibawah ini). Setelah semuanya selesai klik tombol "Install". 

Note:

  • Pastikan Anda memilih "choose protocol" nya: https
  • Pastikan Anda menyimpan informasi admin username dan admin password Anda.
install WordPress

6

Tunggu sekitar 1-2 menit hingga website Anda terinstal WordPress dengan sempurna.

Website WordPress sudah berhasil diinstall

Dan... Anda sudah berhasil menginstal WordPress.

Mudah bukan?

Melakukan Sedikit Penyesuaian Pada Website WordPress Baru

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

Selanjutnya apa?

Saat ini website Anda masih terlihat baru dan kosong.

Anda perlu mengurus beberapa hal penting terlebih dahulu untuk membuat website terlihat siap.

1. Log in ke Dashboard WordPress Anda

Apabila Anda tidak yakin bagaimana caranya, ketik: http://domainanda.com/wp-admin/ 

(ganti "domainanda.com" dengan nama domain Anda). 

Log in ke WordPress

Masukkan username atau alamat email dan password (yang Anda buat pada saat menginstal WordPress).

Ketika Anda sudah log in, beginilah tampilan dashboard WordPress Anda:

Dashboard WordPress

2. Ganti Judul dan Tagline Website 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 Terbaik".

Bagaimana caranya mengganti judul dan tagline?

Pada dasboard WordPress Anda, klik Settings -> General.

Mengganti judul dan tagline

Bingung menentukan judul dan tagline?

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

  • Jika Anda membuat 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.

3. Pastikan Website Anda Search Engine Friendly (SEO)

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/bagaimana-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.

pilih permalinks post name

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:

moderasi-komentar

4. Hapus konten default WordPress [Seperti: Hello World, Sample Page & Hello Dolly]

Konten-konten yang perlu Anda hapus:

  • Hapus "Hello World" di bagian "Posts"
  • Hapus "Sample Page" di bagian "Pages"
  • Hapus "Hello Dony" di bagian "Plugin"

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

hapus post

Jangan lupa hapus juga "Sample Post" di bagian "Pages" dan plugin "Hello Dony" di bagian "Plugin" karena kita tidak membutuhkannya.

LANGKAH 4:
Install Tema WordPress dan Tambahkan Halaman Utama Website


Website Anda masih kosong, Anda perlu menambahkan beberapa halaman, seperti 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.

memilih tema WordPress terbaik

Bagaimana Caranya Memilih Tema Website?

Buat informasi saja, WordPress memiliki 5.000+ tema gratis yang telah dirancang professional dalam database mereka.

Bagusnya lagi, Anda dapat mengaksesnya secara GRATIS. Disinilah kelebihan WordPress.

Dan untuk mengawali semuanya, kita akan mulai dari memilih tema terbaik untuk website Anda.


1. Akses tema gratis WordPress

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

Cari-tema-gratis-di-WordPress

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

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

pilih-tema-WordPress


2. Pilih tema WordPress Anda

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

Entah itu Anda membangun blog personal, website untuk usaha Anda, untuk perusahaan kecil ataupun besar sekalipun.

Jadi, saya merekomendasikan tema GeneratePress (affiliate link / referral).

Tema GeneratePress

GeneratePress adalah tema GRATIS yang sangat populer. Meskipun ada versi berbayarnya yang menawarkan lebih banyak fitur, tapi versi gratis nya sudah cukup powerfull.

GeneratePress sudah di download lebih dari 2 juta kali dan mendapatkan 800+ rating 5. Faktanya, saya juga menggunakan GeneratePress di penasihathosting.com dan juga di semua website yang saya miliki.

Bagusnya lagi, saya akan menunjukan kepada Anda bagaimana cara mengkustomisasi tema ini hingga bisa menjadi tema yang cocok untuk segala kebutuhan Anda pada bab selanjutnya.

Anda bisa menambahkan tema GeneratePress langsung dari dashboard WordPress Anda.

Ketik GeneratePress pada kolom pencarian disebelah kanan atas.

Cari tema GeneratePress

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

Klik tombol "install" lalu "Activate".

Install Tema GeneratePress

Tema sudah aktif.

Maka sekarang saatnya Anda membuat halaman di website Anda.

Halaman-halaman seperti: Home, Tentang Kami, Layanan Kami, Kontak Kami, Blog, Testimonial atau apapun halaman yang Anda butuhkan.


Bagaimana saya dapat membuat halaman baru dan menambahkan artikel?

Faktanya, membuat konten di WordPress itu mudah, semudah menulis di Microsoft Word.

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-di-WordPress

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 blog tentang olahraga, dan Anda mempunyai artikel-artikel tentang olahraga memanah, renang, sepakbola, badminton dan lain-lain.

    Maka Anda dapat memasukkannya kedalam kategori agar lebih mudah dicari oleh pengunjung.

  • Sedangkan Pages sifatnya adalah tetap. 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.

1

Di sidebar sebelah kiri pada layar Anda, klik Pages -> Add New.

klik-pages-dan-add-new-untuk-menambahkan-pages-baru

2

Dan beginilah tampilan WordPress pages editor secara default.

Tampilan pages WordPress

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

Karena saya akan ajak Anda untuk mendesain halaman website Anda dengan plugin Elementor nanti pada bab terakhir.

Jadi, biarkan saja apa adanya dulu kosong seperti ini.

Tulis judul dan klik publish

3

Jika Anda ingin membuat beberapa halaman.

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.

halaman-di-website-WordPress


Dan Bagaimana Cara Menambahkan Halaman/Pages Kedalam Menu?

Sebelum kita mendesain halaman-halaman yang sudah dibuat, pertama saya ajak Anda untuk menambahkan halaman yang sudah dibuat tersebut ke dalam menu, perhatikan gambar dibawah ini:

Menu Website

Caranya mudah.

Kita akan manfaatkan fitur Customize di WordPress.

1

Di sidebar sebelah kiri pada layar Anda, klik Appearance -> Customize

fitur customizer pada WordPress

Di bagian sebelah kiri yang saya kotaki warna merah, Anda dapat melihat banyak fungsi untuk mengatur tema website Anda, seperti Site Identity, Menus, Widgets, dll.

Sedangkan di sebelah kanan adalah preview website Anda, jadi ketika Anda melakukan suatu perubahan, hasilnya akan langsung terlihat di bagian sebelah kanan/preview.

Nah, pada langkah kali ini kita akan menambahkan halaman ke dalam menu website.

2

Pertama-tama, klik "Menus"

Klik Menus

3

Lalu klik "Create New Menu"

klik tombol create new menu

4

Tulis nama menu (boleh apa saja), karena tidak akan berpengaruh ke tampilan website Anda nantinya (1), kemudian ceklis "main" (2), lalu tekan tombol "Next" (3).

Membuat menu di WordPress

5

Terakhir, klik tombol "Add Items" lalu tambahkan halaman-halaman yang ingin Anda masukkan ke dalam menu.

menambahkan menu

6

Cek bagian preview, jika sudah ditambahkan seharusnya halaman-halaman yang Anda masukkan akan muncul.

cek menu sudah tampil di preview

Jangan lupa klik tombol "Publish" yang berwarna biru jika sudah selesai.


Kustomisasi Tema GeneratePress

Sebelum kita lanjut ke langkah terakhir, yaitu mendesain halaman kosong (home, tentang, kontak, dsb) yang sudah kita buat sebelumnya.

Anda perlu melakukan sedikit penyesuaian pada tema GeneratePress Anda terlebih dahulu, agar bisa sesuai seperti yang Anda inginkan.

(Kita masih bermain dalam fitur Customize)


1. Membuat Halaman Statis di Homepage

Halaman statis adalah halaman yang tidak pernah berubah.

Tidak seperti halaman blog, dimana artikel baru akan muncul dibagian atas setiap waktu.

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

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

Penasihat Hosting


Bagaimana cara membuat halaman statis?

Klik "Homepage Settings" pada bagian kiri Customize.

Lalu atur sebagai "A Static page", kemudian pilih Homepage = Home

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.

membuat-halaman-statis


3. Kustomisasi Header Website

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

header website WP

Sampai disini, Anda mungkin ingin mengganti nama website dari "My Website" atau "My Blog" menjadi gambar logo website Anda atau mengganti nya dengan nama lain.

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

Kita akan mencoba satu per satu fungsi Customize mulai dari sini. Anda bisa berkreasi sebebas yang Anda mau.


3.1 Menambahkan Logo Website

Ini sifatnya masih optional saja.

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

Caranya buka Site Identity.

Menambahkan logo dan site icon

Kemudian ikuti langkah-langkah berikut:

(1) Centang "Hide site title" karena Anda ingin menampilkan logo image
(2) Klik tombol "change logo" dan upload logo dari komputer atau laptop Anda
(3) Jika Anda ingin mengatur lebar logo Anda
(4) Ini sifatnya opsional, tapi jika Anda ingin menampilkan favicon atau site icon (perhatikan icon pada address bar browser yang berwarna biru dongker dibawah), Anda bisa mengupload nya dengan mengklik tombol "select site icon".


3.2 Merubah warna background navigation

Secara default, warna background navigation tema GeneratePress adalah hitam.

Mungkin Anda ingin merubahnya menjadi warna merah, hijau, biru atau putih.

Buka Colors, Lalu perhatikan bagian "Navigation Color Presets". Fitur ini terbatas, Anda hanya bisa mengganti warna yang telah disediakan saja pada tema GeneratePress versi gratis nya, seperti biru, putih, grey, merah, dll.

Dalam contoh dibawah, saya merubahnya menjadi warna putih.

merubah warna navigation


3.2 Merubah posisi navigation menu

Setelah Anda mengganti warna background navigation, Anda mungkin juga ingin merubah posisinya.

Misalnya pada contoh dibawah, saya merubah posisi navigation menu ke sebelah kanan.

Merubah posisi navigation

Caranya sangat mudah, buka Layout -> Header. Kemudian perhatikan bagian Header Presets seperti yang saya tunjukan pada gambar diatas.


3.3. Menambahkan Top Bar

Jika Anda belum tau apa itu top bar, perhatikan yang saya kotaki warna merah pada gambar dibawah ini:

menambahkan top bar

Biasanya, fungsi top bar di aktifkan untuk menambahkan informasi-informasi penting, seperti nomor telefon, alamat email, dsb.

Buka Widgets -> Top Bar. Kemudian klik tombol "Add a Widget" (1), lalu ketik "text" di kolom pencarian (2) dan klik widget text nya (3).

Menambahkan text pada top bar

Kosongkan bagian "title" dan isi informasi yang ingin Anda masukkan pada top bar. Dalam contoh dibawah ini, saya memasukkan informasi nomor telf dan alamat email.

menambahkan informasi pada top bar

Catatan:

Anda juga bisa merubah posisi text pada top bar ke sebalah kiri, tengah atau tetap di kanan.

(Fitur ini akan muncul setelah Anda menambahkan widget top bar)

Buka Layout -> Top Bar. Lalu ganti posisi text top bar: Left, Center atau Right.

top bar alignment


4. Menghapus Widgets Pada Sidebar

Ada beberapa widgets yang secara default muncul ketika Anda selesai menginstall WordPress.

Jika Anda tidak membutuhkannya, dan memang saya rasa widget-widget ini belum begitu penting, maka sebaiknya di buang saja terlebih dahulu.

Buka Widgets -> Right Sidebar. Kemudian pilih widget yang ingin dihapus (perhatikan gambar dibawah).

Menghapus widget pada sidebar


Sampai disini, Anda bebas meng-explore bagian-bagian lain dari Customize.

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

LANGKAH 5: 
Desain Halaman Website Anda Agar Terlihat Professional


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

Yes, sekarang saatnya kita mendesain halaman kosong tersebut.

Ini adalah bagian yang paling asyik dari panduan cara membuat website ini.

Mulai dari sini, Anda akan mendesain halaman depan (home), tentang kami, kontak kami, dan lainnya.

Mendesain halaman website

Mendesain Halaman Dengan Plugin Elementor

Ada dua cara untuk mendesain halaman di WordPress.

Pertama, cara yang membutuhkan pengetahuan coding (cara tersulit) -> seperti mereka 15 tahun yang lalu. 

ATAU menggunakan cara yang sangat mudah (drag & drop) -> cara (2019) yang akan kita gunakan dalam panduan ini.

Faktanya, saya pun dalam mendesain panduan cara membuat website ini juga menggunakan plugin (drag & drop). Saya bahkan tidak punya latar belakang IT, semuanya berawal dari mencoba.

Dan saya yakin Anda juga pasti bisa melakukannya.

Elementor

Kita akan memanfaatkan plugin Elementor untuk mendesain halaman. Plugin ini bisa digunakan secara GRATIS, Anda bisa mendownlaod nya langsung dari dashboard WordPress Anda.

Sama seperti tema GeneratePress, plugin ini juga ada versi berbayarnya yang menawarkan fitur lebih banyak, namun saya merasa versi gratis nya juga sudah powerfull dan bisa digunakan untuk membangun website, apapun tujuan Anda.

Untuk memulainya, silahkan Anda install plugin Elementor Page Builder.

Buka Plugins > Add New > Cari "Elementor" dalam kotak pencarian.

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

Elementor Page Builder adalah plugin yang sangat populer. Saat ini sudah di install lebih dari 3 juta kali. 

Anda sudah menggunakan plugin yang tepat.

Mendesain Halaman Depan (Home)

1. Edit Halaman Depan

Buka Pages. 

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

edit-halaman-depan

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

1

Perhatikan bagian sebelah kanan bawah layar hingga Anda menemukan pengaturan sidebars, footer widgets, disable elements dan page builder container.

Pertama, pada bagian Sidebars (1) pilih atau centang "Content (no sidebars)"

no sidebar

2

Kedua, klik bagian Disable Elements dan centang "Content Title"

disable content title

3

Ketiga, pilih "Full Width" pada bagian Page Builder Container.

Pilih full width

4

Setelah itu klik tombol Update" (1) yang ada di sebelah kanan atas.

Kemudian klik tombol "Edit with Elementor" (2).

update dan edit dengan Elementor


2. Edit Halaman Dengan Elementor

Disinilah tempat Anda mengedit dan mendesain halaman depan Anda.

Desain halaman dengan Elementor

Faktanya, ini adalah cara modern dalam mendesain halaman di WordPress.

Jadi, seperti yang Anda lihat pada gambar dibawah, terdapat 2 bagian kiri (1) dan kanan (2) yang agak mirip seperti fitur Customize yang sudah kita 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, dan lain-lain.

2 bagian dalam editing halaman dengan Elementor

Disini ada 2 cara untuk mendesain halaman.

Pertama dan cara termudah adalah menggunakan template yang sudah disediakan oleh Elementor, Anda cukup melakukan modifikasi dari template yang sudah ada.

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

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


3. Menggunakan Template yang Sudah Ada

Klik icon "Add Template" yang terletak di tengah-tengah layar Anda.

klik icon add template

Elementor memiliki berbagai template untuk dipilih.

Beberapa tersedia gratis, sementara ada template yang hanya bisa digunakan jika Anda upgrade plugin Elementor ke versi pro.

Cari layout yang Anda sukai dan klik "insert".

Disini, Anda dapat melihat preview template yang Anda pilih sebelumnya.

Jika Anda sudah yakin, klik tombol "Insert" untuk menampilkannya pada halaman website Anda.

Jika tidak, klik "Back to Library" untuk mencari template lainnya.

insert-template-ke-halaman-website

Sekarang Anda sudah memiliki template dan Anda sudah siap untuk melakukan modifikasi dari template yang Anda pilih.


4. Memodifikasi Template

Untuk merubah suatu bagian atau element, Anda cukup mengklik element yang Anda ingin ganti.

Misal pada contoh dibawah ini saya ingin mengganti text menjadi "Hi guys, disini Randika......"

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

klik-element-untuk-merubahnya

Pada panel Editor, klik tab "Style" untuk mengganti warna text dan ukuran font.

mengganti-warna-dan-ukuran-font

Mari kita coba berlatih mengganti element lainnya.

Misalnya Anda ingin merubah gambar pada background hitam di gambar dibawah ini.

Klik kanan pada mouse/touchpad laptop Anda pada gambar background, lalu pilih "Edit Section".

mengganti-gambar-background

Kemudian perhatikan panel di sebelah kiri Anda.

Klik tab "Style" lalu klik pada gambar (2) untuk mengganti gambar pada background.

ganti-gambar-background

Jika Anda ingin menghapus element, klik kanan element yang Anda maksud, lalu pilih "Delete".

menghapus-widget


5. Selesaikan Desain Halaman Depan (Home) Anda

Elementor cukup mudah untuk dipahami.

Mungkin Anda akan menemui kesulitan pada awal mulai mendesain website Anda, tapi itu wajar, Anda perlu mencoba dan mengeksplore bagian-bagian pada Elementor agar terbiasa menggunakannya.

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


Mendesain Halaman Lainnya

Setelah Anda menyelesaikan halaman home, mungkin Anda perlu mengisi halaman-halaman lainnya, seperti kontak, layanan dan tentang.

halaman-lain-yang-perlu-Anda-kustomisasi

Caranya sama dengan mendesain halaman depan (home).

Gunakan plugin Elementor seperti Anda mendesain halaman depan (home) pada langkah sebelumnya.

Tips:

Ketika memilih template, Anda bisa mencari dengan menggunakan kata kunci, seperti: "Contact", "About", dsb.

cari-template-contact-Elementor

LANGKAH 6:
Launching Website Anda dengan Membagikannya ke Social Media Anda


Jika Anda benar-benar mengikuti panduan cara membuat website dengan WordPress ini dari awal hingga akhir, saya yakin website Anda sudah siap untuk di terbitkan.

Atau jika belum, mungkin masih ragu atau punya pertanyaan lain, jangan sungkan untuk mengirimkan saya pertanyaan.

Biasanya pesan masuk akan saya balas dalam 1x24 jam.

Launching website Anda
  • Saya sering dengar page builder Elementor, SiteOrigin dan Beaver Builder.
    – minta rekomendasinya mas, dari salah satu page builder diatas, menurut mas Willya sendiri, mana yang paling RINGAN dan paling BANYAK FITURnya untuk kategori sama-sama FREE.
    – Mas Willya sendiri menggunakan plugin apa saja untuk websitenya?

    Tambahan: Untuk theme GeneratePress, rasanya masih non-amp ya mas.

  • Setiap artikel mas Willya selalu komplit dan terarah, jadi mudah memahami, Semoga sukses selalu,
    tentang ulasan diatas, ada satu hal yang masih mengganjal, yaitu footer yang ada tulisan “Ditenagai oleh generate press” bagaimana cara mengganti kalimat tersebut? terima kasih.

    • Sukses selalu juga buat mas Lewi 🙂
      Sayangnya, credit atau tulisan “ditenagai oleh GeneratePress” tersebut hanya bisa diganti apabila mas beli versi premiumnya.

  • Artikel yang bagus.
    Saya ingin bertanya, adakah tutorial tentang bagaimana membuat section yang bergambar, seperti tiap bab pembahasan dalam artikel ini?
    Mohon pencerahannya. Terimakasih.

    • Bisa dibuat menggunakan Elementor.
      Caranya mudah sekali kok:
      1. Tambahkan 2 kolom terlebih dahulu di dalam section
      2. Kemudian tambahkan ‘text’ di sisi sebelah kiri dan ‘image’ di sebelah kanan

      • Tema generatepress yang saya instal, tidak ditemukan fitur section di blok postingan. Apa yang harus saya terapkan agar bisa menggunakannya?

        • Memang tidak ada fitur section. Maksud section disini bukan sebuah fitur, tapi section/bab/bagian dalam sebuah artikel.

          Di Elementor, nanti section nya bisa di stretch untuk meregangkan section nya.

  • >