CARA MEMBUAT WEBSITE

Panduan mudah dan GRATIS yang ditulis oleh seorang Blogger


Ini adalah panduan terbaru (2019) tentang cara membuat website untuk pemula.

(TIDAK diperlukan pengetahuan coding untuk mengikuti panduan ini).

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

Tertarik? Ayo selami lebih dalam...

desain website

Langkah 1:
Memilih Platform Website Terbaik


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

Platform atau Content Management System (CMS), 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 terbaik

Pertama-tama: Apa itu "Content Management System"?

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

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

Saya tidak sedang 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 Content Management System

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 content management system (CMS) seperti WordPress, siapapun dapat membuat website sendiri tanpa perlu ikut pelatihan khusus.

Yang Anda butuhkan hanyalah panduan yang bagus (seperti panduan ini) ๐Ÿ™‚

Jadi, teruskanlah membaca....

BTW, ini tiga platform paling populer tahun 2018

platform paling banyak digunakan di dunia

Dan ini alasannya mengapa 55% website menggunakan WordPress:

  • WordPress itu benar-benar GRATIS,
  • 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 menggunakan WordPress.

WordPress adalah platform yang paling mudah digunakan, saya pribadi menggunakan WordPress di semua website yang saya miliki, dan saya percaya WordPress juga akan cocok untuk Anda.

Catatan: sampai disini Anda tidak perlu mendownload atau menginstall apapun, saya akan tunjukan caranya pada langkah berikutnya.

Langkah 2:
Memilih Nama Domain dan Hosting


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

  • Nama domain (alamat website seperti : namawebsiteanda.com),
  • Dan web hosting (sebuah layanan yang menghubungkan website dengan internet).
membeli domain dan hosting

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.

Tapi nama domain dan hosting akan dikenakan biaya kurang dari Rp 50.000 per bulan.

Tetap lebih murah dari harga satu gelas ice capuccino di Startbucks, ya kan? ๐Ÿ™‚

Lalu, dimana saya mendapatkan alamat domain dan hosting?

Rekomendasi saya adalah: www.Niagahoster.co.id

Harga hosting di Niagahoster terjangkau, customer support mereka bagus dan Anda akan mendapatkan gratis domain bila berlangganan minimal paket pelajar.

Pengungkapan pengiklan dan catatan penting: 


  • Saya akan menerima komisi jika Anda membeli hosting Niagahoster melalui link referral saya. Ini untuk membantu saya membuat website ini tetap beroperasi dan up-to-date dengan perkembangan terbaru. Terima kasih atas support Anda.
  • Niagahoster memberikan garansi pembelian hosting selama 30 hari, jadi jika Anda merasa tidak puas dalam 30 hari pertama, Anda bisa mengajukan refund / pengembalian uang. No worries.
  • Saya juga membuka konsultasi gratis via email tentang cara membuat website. Anda dapat menghubungi saya kapanpun melalui email di: randi(at)kelaswebsite(dot)id

Jika Anda sudah memiliki domain dan hosting, silahkan lanjut ke langkah #3 dimana saya akan menjelaskan tentang bagaimana cara menginstall WordPress.

1

Langkah 1: KUNJUNGI WWW.NIAGAHOSTER.CO.ID (ATAU WEB HOST LAIN YANG ANDA PERCAYAI)

INGAT: Sejak saya merekomendasikan Niagahoster, saya berhasil menegosiasikan harga yang lebih murah untuk pengunjung KelasWebsite.id.

Anda akan mendapatkan extra diskon 10% dengan memasukkan kode promosi ini pada saat checkoutKELASWEBSITE

Beli hosting di Niagahoster

2

LANGKAH 2: PILIH PAKET HOSTING ANDA

Sebagai permulaan, Anda boleh memulai dari Paket Pelajar dulu.

Sumber daya nya (resources) sudah lebih dari cukup: unlimited storage, bandwidth dan email accounts, free shared SSL (https) dan gratis domain. 

Pilih paket hosting dan durasi langganannya

Oia, kotak centang"Gratis auto install website WordPress" tidak perlu di klik, karena saya akan menunjukan caranya kepada Anda pada langkah selanjutnya (Jangan khawatir, proses install nya sangat mudah dan hanya membutuhkan waktu 1-2 menit saja).

Klik tombol "selanjutnya" untuk melanjutkan proses.

tidak perlu auto install WordPress

3

LANGKAH 3: PILIH NAMA DOMAIN

Tips memilih nama domain:

  • Jika Anda membuat website untuk bisnis Anda, saran saya sebaiknya nama domain harus sesuai dengan nama perusahaan Anda.
  • Jika Anda berencana untuk membangun website atau blog untuk kebutuhan pribadi, maka NamaAnda.com adalah pilihan yang bagus.
memilih nama domain

Singkatnya, nama domain harusnya mencakup tiga karakteristik, yaitu relevan dengan bisnis atau website Anda, mudah diingat dan tidak rumit ketika dieja.

Dan nama domain selalu diakhiri dengan ekstensi .com, .net, .org, .co.id, dll. Namun sekarang ini sudah banyak ekstensi domain yang beragam seperti .travelling, .agency, .pizza.

Saran terbaik saya? Hindari ekstensi domain yang aneh-aneh, dan gunakan .com, .net, .id, .co.id atau .org.

Jika Anda sudah menentukan nama domain Anda, klik tombol "Selanjutnya".

4

LANGKAH 4: CEK DETAIL ORDER ANDA

Sampai disini, perhatikan kembali detail order Anda. Mulai dari nama domain dan durasi pembelian hostingnya. Jika sudah benar, maka klik tombol "Lanjut ke Checkout".

Oia, dibagian bawah ada pilihan rekomendasi builder dan privasi, jika Anda tidak yakin boleh dibiarkan saja dan lanjutkan saja ke langkah berikutnya.

detail order pembelian hosting Niagahoster

5

LANGKAH 5: BUAT AKUN UNTUK PENGGUNA BARU

daftar akun Niagahoster

Selanjutnya, silahkan isi data diri Anda dengan benar di form yang telah disediakan. Untuk kolom yang bertanda (*) artinya wajib Anda isi, tidak boleh dikosongkan.

masukkan informasi Anda

Dan pilih metode pembayaran yang Anda inginkan dan klik tombol "Checkout Sekarang".

Bagusnya, apapun metode yang Anda pilih adalah instant aktivasi yang artinya order hosting dan domain Anda akan langsung aktif (tidak perlu menunggu hingga 48 jam untuk propagansi domain).

kode promosi kelaswebsite

Jangan lupa gunakan kode promo: KELASWEBSITE untuk mendapatkan extra diskon 10%.

6

LANGKAH 6: CEK EMAIL UNTUK CARA DAN DETAIL PEMBAYARAN

Terakhir, silahkan cek email Anda atau klik pada tombol "cara dan konfirmasi pembayaran" seperti yang saya tunjukan pada gambar dibawah ini.

klik untuk mengetahui bagaimana cara melakukan pembayaran

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.

(hanya butuh 1 atau 2 menit saja).

Menginstal WordPress

Ada dua cara untuk menginstal WordPress:

1. DENGAN MENGGUNAKAN ONE CLICK INSTALLATION

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

Jika Anda menggunakan Niagahoster, Anda akan menemukan fitur ini dalam cPanel hosting Anda.

Berikut adalah langkah-langkah yang perlu Anda ikuti untuk menginstall WordPress (jangan khawatir bila Anda menggunakan hosting yang berbeda, karena pada umumnya pengaturannya sama atau mirip):

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 Anda

2

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

cari script WordPress

3

Klik tombol biru "Install Now"

klik tombol install now

4

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

Note: Pastikan Anda menyimpan informasi admin username dan admin password Anda

install-WordPress-di-Niagahsoter

5

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

website sudah terinstall WordPress

Dan... Anda sudah berhasil menginstal WordPress.

Mudah bukan? ๐Ÿ™‚

2. ATAU MENGINSTAL WORDPRESS SECARA MANUAL (JIKA DIPERLUKAN)

Jika karena beberapa alasan yang terdengar aneh (beberapa perusahaan hosting tidak menyediakan fitur one-click installation untuk menginstal WordPres), maka tidak ada jalan lain kecuali menginstalnya secara manual.

Lihat panduannya dibawah ini:

Cara menginstal WordPress secara manual (klik "toggle" ini)

Melakukan Sedikit Penyesuaian Pada Website 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 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:

dashboard wp

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 "Kelas Website" dan taglinenya adalah "Belajar Membuat Website dengan WordPress".

Bagaimana caranya mengganti judul dan tagline?

Pada dasboard WordPress Anda, klik Settings -> General.

Mengganti judul dan tagline di WordPress

Bingung menentukan judul dan tagline?

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

  • check
    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.
  • check
    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".
  • check
    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.
  • check
    Jika Anda membuat blog personal, Anda dapat menggunakan nama Anda sendiri sebagai judul blog dan profesi Anda sebagai tagline.

    Sebagai contoh:
kevin muldoon

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

Lalu, bagaimana caranya agar struktur URL website Anda dapat seperti contoh yang benar diatas?

Klik Settings -> Permalinkslalu pilih 'post name' dan simpan pengaturan Anda.

ganti permalink

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.

jangan centang bagian ini

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.

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 terbaik untuk apapun kebutuhan Anda.

Desain Halaman website

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

Langkah 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

Langkah 3: Pilih tema WordPress Anda

Sampai disini, saya perlu memberitahu Anda bahwa sebenarnya sebelum merampungkan panduan ini, saya sudah mencoba puluhan 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 OceanWP kepada Anda.

OceanWP adalah Tema GRATIS, meskipun ada versi premiumnya tapi versi gratisnya sudah powerfull.


Dan saya akan menunjukan cara mengkustomisasi tema ini menjadi tema yang cocok untuk segala kebutuhan Anda di bab selanjutnya.

Ketik "OceanWP" pada kolom pencarian disebelah kanan atas.

Cari tema OceanWP

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

install dan aktifkan tema OceanWP

Klik tombol "install" lalu "Activate".

3

Langkah 4: Instal plugin pendukung

Di kebanyakan tema yang bagus seperti OceanWP, ada plugin-plugin pendukung yang direkomendasikan supaya tema terlihat lebih baik.

(Sebentar-sebentar...!)

Apa itu plugin? Mungkin sebagian besar dari Anda masih asing dengan istilah plugin.

Sebenarnya kita belum masuk ke dalam bab plugin (bab terakhir).

Tapi agar lebih mudah dimengerti, bayangkan plugin itu seperti aplikasi-aplikasi yang Anda download di Google Play Store atau App Store. 

Dengan bantuan aplikasi, Anda dapat menggunakan fitur tambahan yang tidak ada di smartphone Anda, seperti aplikasi WhatsApp untuk bertukar pesan dengan teman, Facebook Messanger, Google Translate, dsb.

Begitupun dengan plugin pada WordPress, Anda dapat menambahkan fitur-fitur yang tidak ada pada WordPress. 

Apa saja fiturnya?

Ada ribuan plugin di WordPress. Kita akan bahas nanti di bab selanjutnya. 

Jadi, Kembali ke tema OceanWP, tema ini datang dengan plugin pendukung yang harus Anda download (perhatikan gambar dibawah). 

Klik tombol "Begin Installing Plugins".

Plugin plugin pendukung OceanWP

Kemudian, Install plugin "Ocean Extra" dan "Elementor".

install plugin pendukung Ocean Extra

Tema sudah aktif, begitupun dengan plugin pendukungnya.

Maka sekarang adalah saatnya Anda membuat halaman di website Anda.

Halaman-halaman seperti: Home, Tentang Kami, Layanan Kami, Kontak Kami, Blog, Testimonial, dan lain-lain.

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

Anda mungkin bertanya-bertanya:

"Mengapa ada 2 tempat? Lalu apa bedanya antara Posts dan Pages?

Perbedaan antara Posts dan Pages (wajib diketahui):
โ€‹

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

post dan pages di WordPress
  • 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 sepak bola, bulutangkis, basket, renang, 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, testimonials, produk kami, visi/misi, dll.

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 editor secara default.

    WordPress Editor Terbaru

    3

    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.

    Menulis judul dan klik publish

    4

    Jika Anda ingin membuat beberapa halaman, katakanlah: Halaman depan (home), halaman tentang kami, kontak kami, dsb.. maka buatlah halaman tersebut dan biarkan kosong apa adanya.

    halaman di website WordPress

    Dan Bagaimana Cara Menambahkan Halaman/Pages Kedalam Menu?

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

    Menambahkan menu

    Caranya mudah.

    Kita akan manfaatkan fitur Customize di WordPress.

    Buka Appearance -> Customize

    1

    Dan Anda akan melihat 2 bagian dalam fitur Customize ini. 

    customize WordPres fiturs

    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 create menu

    4

    Tulis nama menu Anda boleh apa saja, karena tidak akan berpengaruh ke tampilan website Anda nantinya pada langkah (1), 

    kemudian ceklis "main" pada langkah (2), 

    lalu tekan tombol "Next" pada langkah (3).

    buat nama menu, main dan next

    5

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

    Cara menambahkan menu

    Jangan lupa klik tombol "Publish" yang berwarna biru.

    6

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

    menu sudah ditambahkan

    Kustomisasi Tema WordPress OceanWP

    Masih bermain dalam fitur Customize WordPress, sekarang Anda perlu melakukan sedikit penyesuaian pada tema agar sesuai seperti yang Anda inginkan.

    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.kelaswebsite.id), kapanpun Anda mengunjunginya dan seberapa seringpun saya menulis artikel baru, halaman statis ini tidak akan pernah berubah.

    contoh halaman statis guru website

    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

    2

    Hapus Top Bar

    Top bar adalah bagian yang paling atas dari website Anda.

    top bar

    Jika Anda tidak menginginkan fitur "Top Bar", Anda bisa menghapusnya dengan cara:

    Klik "General", lalu jangan ceklis "Enable Top Bar"

    jangan enable top bar

    3

    Kustomisasi Header Website

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

    kustomisasi Header

    Nah, sampai disini Anda mungkin ingin mengganti warna backgroundnya, ukuran fontnya, warna font, dll.

    Misalnya, saya merubah header yang sebelumnya berwarna putih menjadi hitam seperti gambar dibawah ini:

    header website

    Bagaimana cara mengkustomisasi bagian header?

    1. Mengganti warna background

    Buka Header -> General

    Ganti warna background dengan mengklik "Select Color"

    ganti warna back header

    (klik gambar untuk memperbesar)

    2. Menghapus border bottom pada header

    menghapus header border bottom

    3. Mengganti warna text logo

    Jika Anda mengganti warna background menjadi warna gelap, Anda perlu juga mengganti warna logo text Anda menjadi warna terang.

    Caranya buka Header -> Logo

    Atau jika Anda sudah mempunya logo, Anda dapat menguploadnya di dalam kotak yang saya tandai warna merah (ini opsional bisa belakangan kalau Anda belum memilikinya).

    mengganti warna text logo

    (klik gambar untuk memperbesar)

    4. Mengganti warna menu

    Buka Header -> Menu

    Perhatikan tiga fungsi, yaitu:

    Link Color untuk mengganti warna menu secara keseluruhan

    Link Color: Hover untuk mengganti warna menu ketika kursor mendekati menu (hover)

    Link color: Current Menu Item untuk membuat warna menu berubah ketika menu halaman tersebut di klik

    mengganti warna menu

    5. Mengganti font dan ukuran font logo dan menu

    Klik bagian Typography -> Logo

    Anda dapat merubah font Logo dengan memilih berbagai Font Family yang tersedia, juga mengganti ukuran Font Size sesuai yang Anda inginkan.

    mengganti font ukuran Logo

    6. Kustomisasi header pada tampilan mobile

    Pertama, ganti Customize Anda pada tampilan mobile dengan mengklik icon mobile yang ada di bawah kiri desktop Anda:

    mengganti tampilan mobile

    Kemudian klik Header -> Mobile Menu

    Perhatikan Pada fungsi Mobile Menu Style jika Anda ingin membuat tampilan header di mobile Anda menjadi seperti gambar dibawah ini:

    kustomisasi menu di mobile

    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 widgets ini belum begitu penting, maka sebaiknya di buang saja terlebih dahulu.

    menghapus widgets di sidebar

    5

    Menghapus Footer Widgets

    Footer widgets adalah bagian yang paling bawah sebelum bagian Copyright, yang selalu muncul disetiap halaman website Anda.

    Jika Anda tidak memasukkan apapun dalam footer widgets, Anda bisa menghapus bagian tersebut dengan TIDAK menceklis "enable footer widgets".

    Klik Footer Widgets, kemudian jangan ceklis enable footer widgets.

    Menghapus footer widgets

    Langkah 5:
    Desain Halaman Website Anda Agar Terlihat Professional


    desain website

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

    Yes, sekarang saatnya kita mendesain halaman kosong tersebut.

    Mulai dari halaman depan (home), tentang kami, kontak kami, dan lainnya.

    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, perhatikan bagian pengaturan tema OceanWP Anda (pengaturannya ada dibagian bawah).

    Ubah Content Layout menjadi 100% Full Width.

    ubah content layout 100 full width

    Lalu buka bagian "Title".

    Dan ubah Display Page Title menjadi Disable.

    disable display page title

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

    Kemudian klik tombol "Edit with Elementor".

    Klik edit with elementor

    2

    Edit Halaman Dengan Elementor

    Disinilah tempat Anda mengedit dan mendesain halaman depan Anda.

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

    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 Anda akan menggunakan cara pertama, yaitu menggunakan template yang sudah ada lalu 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".

    mencari-template-Elementor

    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, menambahkan video Youtube, dan lain-lain.

    Dan ini adalah contoh website yang saya desain menggunakan Elementor, tidak buruk, bukan? ๐Ÿ˜€

    belajar membuat website sendiri

    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.

    TIP:


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

    cari template contact Elementor

    Langkah 6: 
    Launching Website Anda dan Share ke Social Media


    Jika Anda benar-benar mengikuti panduan 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 ragu untuk mengirimkan saya pertanyaan.

    Saya selalu mengusahakan menjawab semua pertanyaan yang masuk.

    Biasanya pesan masuk akan saya balas dalam 1x24 jam.

    Launching website
    >