Cara Membuat Website | Mudah Dengan WordPress (Untuk Pemula)

Cara membuat website

Ini adalah panduan terbaru (2019) tentang cara membuat website untuk pemula dan sama sekali TIDAK diperlukan pengetahuan coding untuk mengikuti panduan ini.

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

Semua ini bisa diselesaikan hanya dalam 60 menit.

Tertarik? Ayo selami lebih dalam...

Mungkin Anda bertanya-tanya, website apa yang bisa saya buat dengan mempelajari panduan cara membuat website ini. Jadi, apapun tujuan Anda, mulai dari membuat website personal, organisasi bahkan website untuk perusahaan pun bisa Anda buat. 

Namun, perlu diingat bahwa sementara ini saya belum menulis panduan khusus membuat toko online yang ada cart nya. 


Beberapa contoh website yang telah selesai dibuat dari mereka yang sudah lebih dulu mengikuti panduan ini hingga selesai.

Click to add text or drag and drop element from right hand panel
Click to add text or drag and drop element from right hand panel
Click to add text or drag and drop element from right hand panel

Sampai hari ini, lebih dari 100+ orang telah membangun website dengan mengikuti panduan cara membuat website ini.


Daftar isi panduan:
(Anda bisa mulai dari langkah #1 jika Anda baru memulai atau jika Anda sudah memiliki domain dan hosting, Anda bisa langsung loncat ke langkah #3)


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

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

Ngomong-ngomong, ini dia tiga platform paling populer di dunia

Seperti yang Anda lihat pada diagram diatas, WordPress adalah platform webstie yang paling populer. 

Dan kabar baiknya, Anda juga akan belajar bagaimana membuat website dengan WordPress dalam panduan ini.

Tapi, mungkin Anda bertanya-tanya, apa alasannya mengapa sebagian besar orang di dunia 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:

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

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

membeli domain dan hosting

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

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

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 checkout: KELASWEBSITE

Beli hosting di Niagahoster

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 Anda

3. Tentukan Nama Domain Website Anda

Kemudian, scroll kebawah ke bagian domain.

Anda bisa memilih "Pilih Domain Gratis Anda" jika Anda belum memiliki domain.

Jika Anda bingung dalam menentukan nama domain, berikut saya berikan beberapa tips yang bisa mempermudah Anda.

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

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.

tentukan nama domain website Anda

Ketika Anda sudah menentukan nama domain Anda, klik tombol "Cari Domain".

Jika domain tersedia, maka klik tombol "Add to Cart" dan jika belum tersedia, Anda bisa mencoba nama domain lainnya.

Lalu, Anda akan diarahkan ke halaman fitur pendukung seperti gambar dibawah ini. Anda tidak perlu mencentang apapun fitur pendukung disini, karena:

  • Gratis auto install WordPress? Saya akan tunjukan kepada Anda caranya pada bab selanjutnya. Tenang saja, ini sangat mudah, hanya butuh 1 klik saja.
  • Rekomendasi website builder? Tidak perlu, kita akan menggunakan WordPress sebagai platform website.
  • Rekomendasi kemanan? Niagahoster sudah menawarkan free lets encrypt atau SSL gratis yang mana sudah aman. Kelaswebsite.id juga menggunakan SSL gratis.
  • Rekomendasi privasi? Jika Anda ingin melindungi data-data registrasi domain Anda, maka Anda boleh mencentang fitur ini, jika Anda tidak yakin maka biarkan saja kosong apa adanya.

Lalu, klik tombol "Checkout Sekarang".

Fitur pendukung

4. Pilih Metode Pembayaran Hosting Anda

Selanjutnya, Anda perlu memilih metode pembayaran hosting Anda.

Dan jangan lupa masukkan kode kupon untuk mendapatkan tambahan diskon 10%: KELASWEBSITE

pilih metode pembayaran hosting

Lalu, scroll kebawah dan isi data diri Anda dengan lengkap dan benar.

Jika sudah klik tombol "Daftar & Checkout"

daftar akun dan checkout

Terakhir, Anda akan diarahkan ke halaman petunjuk pembayaran.

Oia, jangan lupa cek email Anda ya.


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

Install WordPress

Menginstal WordPress

Ada dua cara untuk menginstal WordPress:


1. 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. Dengan Cara 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:

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:

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

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

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

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.

hapus posts

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 2: 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.

Klik tombol "install" lalu "Activate".

install dan aktifkan tema OceanWP

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

Pastikan Anda sudah menginstall dan mengaktifkan plugin pendukungnya.

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 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 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 jika sudah selesai.

5

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?

3.1 Mengganti warna background header

Buka Header -> General

Ganti warna background dengan mengklik "Select Color"

ganti warna back header

3.2 Menghapus border bottom pada header

menghapus header border bottom
3.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)

3.4 Mengganti warna font 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
3.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
3.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

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

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

Cara membuat 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

Jika Anda merasa panduan cara membuat website ini bermanfaat, silahkan share ke social media Anda.

>