Cara Membuat Basis Pengetahuan untuk Situs Web Anda dengan Divi

Memiliki basis Pengetahuan di situs web Anda dapat menjadi aset yang sangat berharga baik bagi pelanggan dan karyawan Anda. Dan jika dilakukan dengan benar, basis pengetahuan dapat menjadi ciri jaminan kualitas jangka panjang untuk bisnis Anda. Mereka bisa menjadi solusi yang bagus untuk FAQ, Dokumentasi, manual Software, Tutorial, dan banyak lagi.

Dalam tutorial ini, saya akan menunjukkan cara menambahkan basis pengetahuan ke situs web Anda dengan Divi. Untuk melakukan ini, saya akan menggunakan plugin Basis Pengetahuan Echo (versi gratis) yang memiliki beberapa opsi konfigurasi bermanfaat yang memudahkan untuk mengatur dan menata halaman basis pengetahuan Anda. Saya juga akan menunjukkan bagaimana Anda dapat menata halaman utama basis pengetahuan dan halaman artikel menggunakan Divi Builder.

Sneak Peek

Berikut ini adalah sneak peek dari apa yang akan kita bangun.

Halaman Basis Pengetahuan Utama

Contoh Halaman Artikel

Apa yang Anda Butuhkan untuk Tutorial Ini

• Tema Divi (Terpasang dan Aktif)
• Plugin Basis Pengetahuan Echo (Terpasang dan Aktif)
• Paket Tata Letak Produk Digital (Tersedia GRATIS di Divi Builder)

Aktifkan Jenis Postingan Basis Pengetahuan di Divi

Divi memudahkan untuk memberikan dukungan untuk jenis pos kustom pihak ketiga tertentu. Karena plugin basis pengetahuan menggunakan jenis posting mereka sendiri untuk artikel, Anda harus mengaktifkannya di Divi. Ini akan memungkinkan Anda menggunakan Divi Builder untuk mengedit artikel tersebut.

Untuk melakukan ini, buka Dasbor WordPress Anda dan arahkan ke Divi > Opsi Tema. Klik tab Builder dan aktifkan jenis posting "KB: Basis Pengetahuan".

Membuat Artikel dan Kategori Basis Pengetahuan

Untuk mendapatkan ide bagus tentang seperti apa desainnya, Anda perlu memiliki beberapa artikel dan kategori basis Pengetahuan. Untuk saat ini, boleh saja menggunakan konten tiruan.

Membuat Kategori Basis Pengetahuan Anda

Anda dapat membuat Kategori basis pengetahuan seperti yang Anda lakukan untuk kategori posting normal di WordPress.

Untuk melakukan ini, navigasikan ke Basis Pengetahuan > Kategori. Kemudian tambahkan Nama, Siput, dan Kategori Induk (jika ada) untuk setiap kategori yang akan Anda gunakan untuk artikel basis pengetahuan. Untuk contoh ini, saya menambahkan 6 kategori induk masing-masing dengan beberapa subkategori.

Untuk memberi Anda gambaran tentang ke mana arahnya, berikut adalah bagaimana Kategori dan Subkategori Induk akan ditampilkan di halaman utama basis pengetahuan.

Menetapkan Kategori ke Artikel Baru

Saat ini kategori Anda sudah ada tetapi tidak ada artikel yang ditetapkan untuk kategori tersebut. Anda perlu membuat artikel dan menetapkan satu (atau lebih) kategori yang Anda buat untuk masing-masing kategori.

Anda dapat membuat artikel baru seperti Anda membuat posting baru di WordPress. Arahkan ke Basis Pengetahuan > Tambahkan Artikel Baru. Kemudian tambahkan Judul dan tetapkan kategori ke artikel. Anda akan melihat Divi Builder dapat diaktifkan karena kami mengaktifkan jenis posting ini di Opsi Tema. Saya akan membagikan beberapa tips untuk melakukan ini nanti. Tetapi untuk saat ini, Anda bisa menambahkan beberapa editor WordPress default konten tiruan. Setelah itu publikasikan artikel tersebut.

Lanjutkan proses yang sama ini untuk membuat semua artikel yang dibutuhkan sehingga setiap kategori memiliki setidaknya satu artikel yang ditetapkan untuknya.

Periksa Halaman Basis Pengetahuan Default

Setelah Anda mengaktifkan plugin, halaman basis pengetahuan secara otomatis dibuat untuk Anda. Halaman ini memiliki kode pendek yang diperlukan untuk menyebarkan basis pengetahuan utama.

Berikut adalah tampilan halaman secara default.

Mengonfigurasi Tata Letak dan Gaya Basis Pengetahuan

Plugin basis pengetahuan memiliki banyak opsi berguna untuk mengonfigurasi basis pengetahuan agar sesuai dengan desain situs web Anda. Ada opsi yang dapat disesuaikan untuk Halaman Utama, Halaman Artikel, dan Halaman Arsip.

Mengkonfigurasi Halaman Utama

Pengaturan Halaman Utama

Pertama, klik tombol Halaman Utama di bagian atas halaman konfigurasi basis pengetahuan. Di bawah tab penyiapan, Anda dapat membiarkan gaya dan warna tata letak default. Tetapi untuk contoh ini, saya akan mengubah opsi template untuk menggunakan "Template Basis Pengetahuan yang Dirancang untuk Artikel". Saya melakukan ini terutama karena memungkinkan Anda untuk menyesuaikan Halaman Arsip dengan opsi gaya yang berbeda. Tetapi, jika Anda ingin menyimpan Template Tema Divi untuk ini, Anda dapat memilih opsi "Templat Tema Saat Ini Digunakan untuk Postingan dan Halaman".

Pada popup Templates, batalkan pilihan Display Main Title dan atur semua padding dan margin 0px. Ini akan memungkinkan kita untuk menggunakan Divi Builder untuk judul halaman dan spasi.

Pengaturan Halaman Utama dan Semua opsi Teks

Untuk saat ini, saya akan membiarkan opsi Atur dan Semua Teks ke default, tetapi jangan ragu untuk mengubahnya sendiri. Di bawah tab Atur, Anda bahkan dapat menarik dan melepas kategori dalam urutan apa pun yang Anda inginkan. Dan opsi Semua Teks memungkinkan Anda untuk mengubah kata-kata yang digunakan di seluruh halaman (yaitu Judul pencarian dan teks tombol).

Opsi Penyetelan Halaman Utama

Selanjutnya, klik tab Tuning. Di sinilah sebagian besar penataan dilakukan untuk basis pengetahuan utama. Saya tidak akan menggunakan semua pengaturan ini, tetapi saya akan mengubah beberapa warna dan menambahkan beberapa ikon. Ini bagaimana Anda dapat mencocokkan basis pengetahuan dengan Tata Letak Divi Anda yang sudah dibuat sebelumnya. Karena saya berencana menggunakan paket tata letak Produk Digital, saya akan menggunakan warna-warna itu untuk menata halaman basis pengetahuan.

Warna Kotak Pencarian

Di bawah kategori kotak pencarian , pilih warna dan perbarui yang berikut:

Judul: #333333
Cari Latar Belakang: #ffffff
Latar Belakang Tombol: #091c4f

Gaya Konten

Di bawah kategori Konten , pilih Gaya dan perbarui yang berikut ini:

Lebar Halaman: Lebar Penuh

Daftar Gaya dan Warna Artikel

Di bawah kategori Daftar Artikel , pilih Gaya dan perbarui yang berikut ini:

Ikon: Segitiga Panah
Tinggi Daftar Artikel: tinggi minimum 100px (ini berguna untuk membuat semua kotak memiliki tinggi yang sama)

Kemudian pilih Warna dan perbarui yang berikut:

Teks Artikel: #091c4f
Ikon Artikel: #6767ef

Kategori Gaya dan Warna

Selanjutnya, di bawah Kategori , pilih Gaya dan perbarui yang berikut ini:

Lokasi Ikon: atas

Kemudian Klik salah satu kotak kategori di pratinjau untuk memilihnya. Kemudian pilih Icon Kategori yang kategori tertentu. Lakukan ini untuk setiap kotak Kategori.

Ada lebih dari 500 ikon untuk dipilih!

Kemudian pilih Warna dan perbarui yang berikut:

Ikon Kategori Tingkat Atas: #ffffff
Teks dan Ikon Subkategori: #333333
Pembagi: #ffffff
Teks Judul Kotak Kategori: #ffffff
Latar Belakang Judul Kotak Kategori: #091c4f

Fitur Halaman Artikel

Sekarang kita memiliki Halaman Utama yang dikonfigurasi, klik Halaman Artikel di bagian atas halaman. Kemudian klik pada tab fitur. Di sini Anda dapat menyesuaikan elemen seperti tombol kembali dan remah roti yang akan muncul di bagian atas tata letak artikel.

Untuk saat ini, saya hanya akan mencocokkan tombol kembali dengan tata letak premade yang akan saya gunakan untuk halaman artikel. Di bawah Fitur, pilih Navigasi Kembali dan perbarui yang berikut ini:

Warna Teks: #ffffff
Warna Latar Belakang: #091c4f
Warna Batas: #091c4f
Lebar batas: 3px

Gaya Tata Letak Halaman Arsip

Untuk mengubah tata letak halaman arsip, klik “Halaman Arsip” di bagian atas halaman. Di bawah tab pengaturan, Anda akan melihat daftar tarik-turun dari berbagai gaya yang tersedia. Saya mempertahankan default tetapi jangan ragu untuk bereksperimen dengan gaya lain.

Berikut adalah contoh tampilan halaman arsip kategori dengan Gaya default 1.

Mendesain Halaman Basis Pengetahuan dengan Divi

Sekarang setelah kami menyelesaikan konfigurasi halaman basis Pengetahuan kami, kami siap untuk menyelesaikan desain halaman utama basis pengetahuan dengan Divi Builder.

Pertama, pergi untuk mengedit halaman Judul "Basis Pengetahuan" yang dibuat secara otomatis oleh plugin.

Kemudian Terapkan Pembangun Divi. Pilih opsi “Choose a Premade Layout” dan kemudian dari popup Load from Library, pilih Digital Product Layout Pack. Kemudian terapkan Tata Letak Halaman Dokumentasi ke halaman tersebut.

Setelah tata letak dimuat ke halaman, pilih "Build on the Front End".

Anda akan melihat bahwa bagian atas berisi modul teks dengan kode pendek yang menampilkan basis pengetahuan baru kami.

Sekarang yang perlu kita lakukan adalah memindahkannya ke tempat yang kita inginkan dalam tata letak yang telah dibuat sebelumnya dan menyesuaikan desain sesuai kebutuhan dengan opsi Divi Builder.

Untuk contoh ini, saya memindahkan modul teks yang memegang kode pendek KB langsung di bawah modul teks dengan Judul "Dokumentasi".

Kemudian saya menghapus semuanya sampai satu-satunya yang tersisa adalah bagian atas yang berisi satu baris dengan Modul Teks "Dokumentasi" dan modul teks yang berisi kode pendek. Saya juga menyimpan bagian bawah dengan CTA.

Untuk menyelesaikan desain, buka pengaturan modul teks yang berisi kode pendek dan perbarui yang berikut:

Warna Latar Belakang: #ffffff
Font Teks: Poppins
Sudut Bulat: 10px

Berikut adalah desain akhir.

Dan itu juga menyesuaikan dengan baik di ponsel.

Mendesain Halaman Artikel Menggunakan Divi Builder

Karena kami mengaktifkan jenis posting Pangkalan Pengetahuan KB di Opsi Tema Divi, Anda dapat mendesain artikel Anda menggunakan Divi Builder. Templat artikel basis pengetahuan membatasi Divi Builder ke konten di bawah Judul Halaman dan Remah Roti, dan tombol kembali. Ini juga membatasi konten pembuat divi hingga lebar maksimal 1080px.

Untuk contoh ini, saya akan memulai desain artikel basis pengetahuan dengan tata letak yang sudah jadi. Untuk melakukan ini, pergi untuk mengedit salah satu artikel dan menyebarkan Divi Builder. Pilih “Choose a Premade Layout” dan dari Load from Library Popup, pilih Digital Product Layout Pack dan gunakan Digital Product Contact Page.

Sekarang lihat seperti apa artikel itu. Perhatikan bahwa konten Divi Builder berada tepat di bawah Judul Artikel, Breadcrumbs, dan tombol kembali yang tidak dapat disesuaikan oleh Divi Builder.

Tetapi Anda masih memiliki beberapa opsi penyesuaian yang kuat untuk konten yang memungkinkan Divi Builder. Anda dapat menggunakan latar belakang bagian atas tata letak halaman kontak untuk mencari sebagai latar belakang bagian untuk berbagai bagian (atau langkah) artikel. Dan Anda dapat dengan mudah menambahkan tangkapan layar menggunakan modul gambar. Pada dasarnya, Anda memiliki potensi tak terbatas dari Divi Builder untuk seluruh artikel.

Berikut adalah contoh sederhana tentang tampilan halaman artikel yang dirancang dengan Divi.

Tentu saja, Anda dapat menambahkan beberapa CSS khusus untuk menyesuaikan lebar wadah artikel untuk mendapatkan tata letak lebar penuh. Dan Anda dapat menambahkan beberapa kode untuk menyembunyikan Judul dan kemudian menggunakan konten dinamis Divi untuk menempatkan judul artikel di mana pun Anda inginkan dalam Divi Builder.

Pikiran Akhir

Plugin Basis Pengetahuan Echo sangat kuat, bahkan tanpa semua tambahan premium yang tersedia (meskipun layak untuk dicoba). Opsi konfigurasi memungkinkan Anda mengatur dan menata halaman basis pengetahuan Anda agar sesuai dengan tata letak Divi Anda dengan mudah. Sebagai tambahan, Anda bahkan dapat menggunakan Divi Builder untuk mendesain halaman basis pengetahuan dan halaman artikel Anda. Saya harap tutorial ini bermanfaat bagi mereka yang ingin menambahkan basis pengetahuan ke situs web Divi Anda.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!