Cara Membuat Website

6 Langkah Mudah Cara Membuat Website Untuk Pemula 

Pertama-tama: Apa itu Platform?

Sekitar 18 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.

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 kursus (pelatihan khusus)

Statistik platform paling populer di dunia

Ada banyak platform untuk membangun website, tapi menurut statistik, yang paling banyak digunakan adalah WordPress dengan penggunaan lebih dari 30% di seluruh dunia.

Dan kabar baiknya, hari ini Anda akan belajar bagaimana cara membuat website menggunakan WordPress.

... Mungkin Anda bertanya-tanya, mengapa WordPress begitu populer?

• 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.

Memilih Nama Domain

Jadi, setelah platform (WordPress), yang Anda butuhkan selanjutnya adalah nama domain.

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

Misalnya, nama domain website ini adalah penasihathosting.com. 

Harga domain tidak terlalu mahal, yaitu mulai dari Rp125.000 per tahun nya.

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

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

Dan gunakan ekstensi domain yang populer, seperti .com, id, .org, .net atau .co.id. 

Dapatkan Web Hosting dan Domain di DomaiNesia

Disclosure: Kami akan menerima komisi sebesar 25% jika Anda membeli hosting DomaiNesia menggunakan link referral atau kode kupon kami. Terima kasih atas support Anda!

Note: Kami berhasil menegosiasikan harga hosting yang lebih murah, yaitu diskon 25% (berlaku perpanjangan). Anda cukup memasukkan kode kupon: PENASIHATHOSTING pada saat checkout.

Saya akan pandu cara membeli hosting dan domain di DomaiNesia berikut ini:

2. Anda akan diarahkan ke halaman order dan isi detail nya seperti ini:

• (1) Pilih paket hosting Anda. Saran saya adalah paket Super (2GB).
• (2) Lokasi server boleh Anda pilih Singapore atau Jakarta. Kedua nya bagus.
• (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 karakter nya, karena jika salah, nama domain tidak bisa di ganti jika sudah aktif.
• (5) Ceklis Addons: DNS Zone Manager (Gratis)
• (6) Masukkan alamat email Anda. 
• (7) Terakhir, klik tombol warna hijau "Masukkan ke Troli"

3. Masukkan kode promo: PENASIHATHOSTING untuk mendapatkan diskon lebih besar, yaitu 25%. 

Harga total yang harus Anda bayarkan harus nya Rp 326.700 setelah mengaplikasikan kode promo kami.

Lalu, klik tombol "DAFTAR".

4. Selanjut nya, isi nama, pilih institusi dan buat password untuk account DomaiNesia Anda.

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.

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

Klik tombol "Selesaikan & Bayar".

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.

Melakukan Sedikit Penyesuaian Pada Website WordPress Baru

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

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

Sebelum mengisi nya dengan konten, Anda perlu mengurus beberapa hal penting terlebih dahulu untuk membuat website terlihat siap.

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.

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

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 untuk membangun blog personal maupun website untuk usaha.

Jadi, saya merekomendasikan tema OceanWP.

Note: Anda bisa memilih tema lainnya jika Anda mau.

Anda bisa menambahkan tema OceanWP langsung dari dashboard WordPress Anda.

Ketik OceanWP pada kolom pencarian disebelah kanan atas.

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

Klik tombol "install" lalu "Activate".

Tema sudah aktif. Good job!

Tapi, jangan lupa. Ini termasuk yang paling penting dan banyak pembaca panduan cara membuat website ini terlupakan, yaitu menginstall plugin tambahan (Ocean Extra).

Plugin Ocean Extra, seperti yang saya tunjukan dalam gambar dibawah ini. 

Plugin ini penting karena harus di install bersamaan dengan tema OceanWP yang Anda gunakan.

Jika sudah Anda install, maka sekarang saatnya 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).

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:

Dan Bagaimana Cara Menambahkan Halaman/Pages Kedalam Menu?

Sebelum kita mendesain halaman-halaman yang sudah dibuat barusan, mungkin Anda ingin menambahkan halaman-halaman tersebut ke dalam menu website.

Perhatikan menu pada gambar website dibawah ini:

Caranya juga mudah.

1. Klik Appearance > Menu

2. Ikuti langkah demi langkah nya dibawah ini untuk membuat menu website Anda.

1. Buat nama menu website Anda. Boleh apa saja, karena tidak akan mempengaruhi apapun. 
2. 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.
3. Kemudian klik tombol 'Add to Menu'. Maka semua halaman yang Anda centang akan muncul di struktur menu.
4. Atur menu sesuai keinginan dengan cara drag & drop. Ingat bahwa Anda juga bisa membuat sub menu seperti contoh saya diatas.
5. Centang 'primary menu' atau mungkin namanya 'Main' atau 'Utama'. Ini akan membuat menu yang Anda buat menjadi menu utama dan akan muncul di header website Anda.
6. Terakhir, klik tombol biru 'Save Menu'

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

Kustomisasi Tema OceanWP

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

Anda perlu melakukan sedikit penyesuaian pada tema OceanWP Anda 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 (www.penasihathosting.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 Header Website

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

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 header dari putih menjadi hitam, 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.

2.1 Menambahkan Logo Website

Ini sifatnya masih optional.

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

Caranya buka Header > Logo.

Kemudian ikuti langkah-langkah berikut:

(1) Klik 'Select Logo' untuk upload logo Anda
(2) Ini optional, tapi jika Anda ingin upload retina logo, maka Anda bisa mengupload nya di langkah ini
(3) Ini juga optional, fungsi nya untuk mengganti warna judul jika Anda tidak menggunakan logo

2.2 Merubah posisi dan warna background navigation

Secara default, warna background navigation tema OceanWP adalah putih.

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

Buka Header > General

(1) Jika Anda ingin merubah style header Anda, maka klik pada nomor 1 ini
(2) Rubah warna background header sesuai keinginan Anda. Dalam contoh diatas, saya mengganti nya dari warna putih menjadi biru.

Jika Anda merubah warna background header menjadi warna gelap, mungkin Anda juga ingin merubah warna text logo atau text menu menjadi warna terang, misal nya warna putih.

Maka kembali ke bagian Header > Logo, dan rubah warna logo menjadi warna terang.

Kemudian untuk text menu, pergi ke Header > Menu dan perhatikan bagian yang saya kotaki warna merah pada gambar dibawah ini untuk mengganti warna pada text menu.

2.3 Menambahkan konten atau menghapus Top Bar

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

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

Anda bisa menggunakan Top Bar atau boleh juga tidak menggunakan nya. Tergantung kebutuhan saja.

Jika Anda tidak ingin menggunakan nya, Anda bisa menonaktifkan nya di Top Bar > General dan jangan ceklis pilihan "Enable Top bar" nya.

Jika Anda ingin menggunakan nya dan ingin menambahkan konten di dalam nya, seperti informasi nomor telephone dan alamat email, Anda bisa buka di Top Bar > Content.

Dan untuk merubah posisi kontent, baik di tengah, kiri atau kanan. Buka Top Bar > General

(1) Ganti 'Style' untuk merubah lokasi konten (tengah, kiri atau kanan)
(2) Jika Anda ingin mengganti warna background pada Top Bar

3. 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 hapus saja terlebih dahulu.

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

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 tersimpan.

Mendesain Halaman Dengan Plugin Elementor

Ada dua cara untuk mendesain halaman di WordPress.

Pertama, cara yang membutuhkan pengetahuan coding (cara tersulit).

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

Saya pun dalam mendesain panduan cara membuat website ini juga menggunakan plugin (drag & drop).

Saya bahkan tidak punya latar belakang IT. 

Dan saya percaya Anda juga pasti bisa melakukannya.

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 OceanWP, 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".

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.

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

2. Edit Halaman Dengan Elementor

Disinilah tempat Anda mengedit dan mendesain halaman website.

Ini adalah cara terbaru dan termudah dalam mengedit 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 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, dan lain-lain.

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.

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 template yang Anda sukai, kemudian klik pada gambar untuk untuk preview template nya.

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

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

Ingat bahwa Anda selalu bisa menghapus template yang Anda gunakan sebelumnya dan mengganti nya dengan yang baru.

Upps, sebelum Anda bisa menggunakan template Elementor, Anda perlu membuat account terlebih dahulu.

Proses nya simple kok, yang di mulai dari meng-klik "create an account" jika Anda belum memiliki nya.

Hingga sampai Anda perlu menghubungkan atau connect website Anda dengan Elementor.

Jika sudah connected, maka template otomatis akan tampil di halaman home website Anda.

4. Memodifikasi Template

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

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.

Pada panel Editor, klik tab "Style" untuk mengganti warna text, ukuran font, jenis font, dan lain-lain yang berhubungan dengan text.

Mari kita coba berlatih mengganti element lainnya.

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

(1) Klik kanan pada mouse/touchpad laptop Anda pada gambar background, lalu pilih "Edit Section".
(2) Kemudian perhatikan panel di sebelah kiri Anda. Klik tab "Style"
(3) Lalu klik pada gambar untuk mengganti gambar pada background.

Bagaimana jika Anda ingin menghapus bagian atau element tertenu?

Element disini maksud nya adalah element text, button, gambar, background, section dan lain-lain.

Cukup klik kanan element yang Anda maksud, lalu pilih "Delete".

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.