Anda disini: M Jurnal » WordPress » Mengenal Sidebar WordPress dan 4 Tips Optimasi Sidebar

Mengenal Sidebar WordPress dan 4 Tips Optimasi Sidebar

Dalam membangun sebuah website menggunakan WordPress, baik untuk blog, toko online ataupun portal berita, Anda pasti akan mendengar istilah sidebar dan content area. Kedua istilah ini merupakan bagian dari halaman website itu sendiri.

Pada Panduan sebelumnya (lihat Pintasan Panduan), Saya sudah membahas tentang Header WordPress.

Jika Anda benar-benar memahami panduan tersebut, Saya yakin Anda sudah tahu bahwa halaman website terdiri dari beberapa bagian.

Dan salah satunya adalah sidebar & content area.

Nah, pada panduan kali ini, Anda akan belajar untuk mengenal sidebar & area content. Mari kita mulai dari pengertiannya terlebih dahulu…

Mengenal Sidebar dan Content Area Website WordPress

Area content merupakan bagian khusus untuk menampilkan konten utama. Sedangkan sidebar dalam Bahasa Indonesia adalah Bar Samping yang artinya bagian khusus yang menampilkan konten pendukung / tambahan.

Note: Konten Utama bisa saja berupa Halaman Statis, Produk, Artikel, Kategori, Tag dll. Saya menyebut konten karena sidebar juga (bisa) tersedia untuk berbagai macam jenis halaman.

Sidebar memiliki peranan penting dalam mendesain layout website WordPress untuk menampilkan konten selain konten utama.

Secara garis besar, contoh layout halaman website dengan sidebar seperti berikut:

Layout konten Website

Penting! Sidebar itu bukan widget ya… Widget itu adalah element-element yang ada di dalam sidebar. Jadi dalam 1 sidebar bisa menampilkan banyak widget. Sementara widget bisa saja berada dalam sidebar, header, maupun footer. Tentang Widget nanti bisa Anda pelajari pada SUB-BAB Widget WordPress (Lihat Pintasan Panduan).

Dalam WordPress, penempatan sidebar akan tergantung dengan theme yang Anda gunakan.

Ada theme yang menggunakan 1 sidebar, 2 sidebar, bahkan ada juga theme yang membedakan sidebar untuk konten blog dengan halaman produk E Commerce hingga halaman hasil pencarian.

Jadi penempatan sidebar bakal tergantung theme yang Anda gunakan.

Misalnya seperti Demo Site ID Blog, Saya menggunakan 1 sidebar kanan yang berisi beberapa widget seperti Pencarian, Iklan, Konten Terkait dll…

diskon-hosting

Sidebar kanan website

Sementara tampilan untuk 2 sidebar tampak seperti ini:

2 Sidebar WordPress (kiri dan kanan)

Seperti yang Anda lihat, sebagian besar widget yang tampil dalam sidebar kiri dan kanan merupakan konten tambahan / pendukung.

Namun, bila masih kurang, ini beberapa contoh widget dalam sidebar website WordPress yang sering digunakan:

  1. Rekomendasi Produk / Layanan.
  2. Shopping Cart.
  3. Filter Produk.
  4. Testimoni Pelanggan.
  5. Kotak Pencarian.
  6. Artikel / Produk Terbaru.
  7. Artikel / Produk Terpopuler / Rekomendasi.
  8. Berlangganan Newsletter.
  9. Tombol Social Media.
  10. Tombol Share.
  11. Advertisements.
  12. Profil Pemilik Website.
  13. Menu Navigasi.
  14. Konten Penting lainnya…

Cara Mengatur Tampilan Sidebar WordPress

Untuk mengatur tampilan sidebar WordPress, silahkan login ke dahsboard Admin WordPress Anda. Kemudian buka menu Tampilan > Sesuaikan.

Cara setting sidebar website WordPress

Note: Demo Site ID Blog yang Saya jadikan patokan dalam Setiap Panduan WordPress menggunakan Theme Astra. Jadi penempatan menu dalam live preview customization bisa saja berbeda dengan theme lain. Jadi perlu disesuaikan sendiri yaa…

Untuk theme Astra, Anda bisa mengatur penempatan sidebar pada menu Bilah Sisi dalam Live Preview. Beberapa pengaturan yang perlu Anda sesuaikan seperti berikut:

Cara setting sidebar website WordPress
  1. Tentukan Tata Letak Baku Sidebar. Pilih apakah Anda menggunakan sidebar kanan atau kiri. Tata letak baku ini akan berlaku sebagai pengaturan default untuk website Anda.
  2. Atur Sidebar untuk Halaman, Artikel Blog dan Archives.
  3. Tentukan lebar sidebar. Saya menggunakan 30% artinya sidebar akan menggunakan 30% dari lebar layout konten secara keseluruhan. Sesuaikan bagian ini agar tampilan website Anda tetap terilhat proporsional.

Note: Dalam WordPress, konten utama terbagi menjadi 3 yaitu Halaman, Pos dan Archives. Halaman dan Pos sudah jelas konten yang berbeda yang ada di menu dalam dashboard WordPress. Sementara Archives adalah Kategori dan Tag.

Jadi, Anda bisa mengatur tampilan sidebar yang berbeda untuk ke 3 jenis halaman ini.

4 Tips Optimasi Sidebar WordPress

Seperti yang Saya sebutkan diawal artikel ini, penempatan sidebar akan tergantung dari theme apa yang Anda gunakan.

Namun, biasanya theme WordPress menyediakan 1 sidebar yang bisa Anda pilih untuk tampil pada sisi kiri atau kanan halaman.

Agar penggunaan sidebar ini bisa optimal, Saya punya 4 tips yang bisa Anda terapkan.

#1 Gunakan 2 Sidebar Hanya Jika dibutuhkan

Jika theme WordPress Anda menggunakan layout 3 kolom (2 sidebar), pertimbangkan terlebih dahulu, apakah Anda betul-betul membutuhkan sidebar 2 sisi ini.

Pikirkan juga apakah Anda memiliki konten tambahan yang akan ditampilkan di ke dua sidebar.

Misalnya seperti website w3school. mereka menambahkan menu navigasi ke dalam sidebar kiri. Sedangkan sidebar kanan untuk konten tambahan / advertisements.

Tips optimasi sidebar WordPress

Ini jelas, ada konten yang berguna bagi pengunjung di ke 2 sidebar.

#2 Pikirkan: Sidebar Kiri / Kanan

Jika theme Anda hanya mendukung 1 sidebar, pikirkan dulu apakah menggunakan sidebar kiri / kanan.

Sidebar kiri cenderung lebih cocok untuk menu navigasi seperti website w3 diatas.

Contoh lainnya, Website E Commerce cenderung lebih cocok menambahkan fitur Filter Produk pada halaman archives product seperti ini:

Widget Filter Produk Website Toko Online

Teknik ini Saya rasa sangat bermanfaat untuk meningkatkan engagement visitor.

Karena pada umumnya visitor membaca konten dari kiri ke kanan. Jadi area pertama kali yang dilihat visitor adalah sisi kiri halaman.

Filter Product yang ada disisi kiri memberi tahu visitor tentang struktur situs Anda E Commerce ini. Mereka bisa menemukan berbagai macam produk berdasarkan herarki kategori ini.

Sedangkan sidebar kanan cenderung cocok untuk konten tambahan / pendukung lainnya seperti iklan atau konten terkait dan sebagainya.

Lihat lah situs-situs populer seperti Search Engine Land.

Contoh Sidebar kanan WordPress

Sidebar kanan berisi konten tambahan seperti artikel terkait dan sebagainya.

Teknik ini juga menguntungkan website / blog. Karena fokus visitor adalah membaca konten Anda.

Apabila mereka menemukan konten terkait pada sidebar kiri, Saya rasa ini sedikit mengganggu.

Karena konten terkait bukan berarti yang dicari mereka. Melainkan mereka mencari konten yang mereka kunjungi saat ini.

Masih kurang ?

Coba buka dashboard youtube.com, lihat apa isi sidebar kirinya. Menu navigasi bukan ?

Terus, coba tonton salah satu video… Lihat isi sidebar kanannya. Konten terkait bukan ?

#3 Jangan Gunakan Terlalu Banyak Widget Dalam Sidebar

Dalam keadaan tertentu, menggunakan terlalu banyak widget dalam sidebar bisa berdampak buruk dari sudut pandang visitor.

Misalnya seperti ini:

jangan gunakan terlalu banyak widget

Ketika area koten sudah habis, tapi masih banyak widget yang ada di sidebar, maka pengguna hanya akan melihat halaman kosong setelah konten.

Coba jadikan diri Anda sebagai visitor dan nilai sendiri tampilan sidebar seperti itu…

Bagi Saya, isi konten utama terlalu sedikit dibandingkan sidebar.

Jadi setelah mencapai bagian kosong dibawah konten, visitor tidak akan lanjut scroll ke bagian paling bawah.

Ya dampaknya, selain membuat tampilan blog jadi kurang menarik, widget juga tidak akan terlihat sepenuhnya.

Pasti rugi dong, apalagi kalo widget terakhir dalam sidebar adalah sebuah iklan.

#4 Gunakan Sticky Sidebar / Widget

Ini bisa jadi solusi jika Anda menulis artikel / konten yang sangat panjang namun memiliki beberapa sidebar saja.

Sticky Sidebar iti seperti yang Anda lihat pada Demo Site Blog Biz.

Sticky Sidebar Website WordPress

Sedangkan pada website M Jurnal serta Demo Site ID Blog, namanya Sticky Widget. Karena hanya beberapa widget yang sticky (melekat) ketika di scroll ke bawah, dan bukan keseluruhan sidebar.

Contoh Sticky Widget

Jika tidak menggunakan sticky sidebar / widget, resikonya ketika konten / artikel Anda sangat panjang, maka pengguna hanya akan melihat bagian kosong setelah widget terakhir. Sementara artikel Anda masih panjang kebawah.

Ini contohnya:

Manfaatkan Space kosong dengan menggunakan Widget

Cukup disayangkan space yang berguna ini tidak dioptimalkan.

Jadi Anda bisa memanfaatkan sticky sidebar / widget untuk memaksimalkan promosi konten lainnya, dengan tujuan bisa meningkatkan engagement ataupun meningkatkan konversi penjualan.

Tapi terlepas dari tips-tips diatas… Yang lebih penting…

DESAIN WEBSITE YANG TERBAIK TERGANTUNG SELERA DAN KEBUTUHAN ANDA

ROLAN MARDANI

Buatlah desain website / blog WordPress yang keren dan menjawab semua kebutuhan Anda. Selera Saya bisa saja tidak sesuai dengan selera Anda.

Next… Silahkan lanjut ke SUB-BAB berikutnya untuk mempelajari tentang desain dan tampilan WordPress melalui Pintasan Panduan berikut:

Pintasan Panduan Desain dan Tampilan WordPress

SUB-BAB Sebelumnya: Membuat Link Satu Halaman.

  1. Template: 3 Cara install Tema WordPress dan mengganti tampilan website.
  2. Favicon & Logo: Cara menambahkan Logo dan Favicon (Icon) di WordPress.
  3. Menu: Cara membuat menu dan dropdown sub menu website WordPres.
  4. Header: Cara mengubah desain header theme WordPress + Contoh Real Website Demo.
  5. Content & Sidebar: (Anda Disini).
  6. Footer: Cara mengubah desain footer theme WordPress (mengubah copyright, menambahkan menu footer, icon social dan mengatur section footer).
  7. Widget WordPress: Cara membuat dan mengatur Widget (di Header, Sidebar, dan Footer).

SUB-BAB Berikutnya: Plugin WordPress.

Komentar Paling Lambat di Balas Pukul 23:59.