Cara Membuat Sticky Menu Di WordPress

TokoDaring.Com – Cara Membuat Sticky Menu Di WordPress. Membuat sticky menu WordPress bisa jadi cara ampuh untuk meningkatkan produktifitas dan transaksi website toko daring anda.

Artikel Lainnya:

Cara Membuat Tombol Share Media Sosial di Website eCommerce

Sticky menu WordPress

Bahkan walaupun website WordPress anda bukan sebuah website toko online, sticky header WordPress ‘di percaya’ bisa meningkatkan engagement, meningkatkan transaksi dan meningkatkan pendapatan google adsense atau konversi afiliasi.

Berulangkali kami selalu mengatakan bahwa membuat website toko online menggunakan WordPress dan WooCommerce tidak akan membatasi fitur yang ingin anda hadirkan. Termasuk jika anda mungkin ingin membuat menu header website eCommerce anda menjadi sticky (WordPress sticky header).

Apa yang kami maksud dengan sticky menu WordPress ? Sticky menu adalah menu navigasi pada halaman website yang selalu tetap terlihat dan berada di posisi yang sama meskipun pengguna menggulir ke bawah.

Contohnya adalah menu di website ini sendiri, ketika anda menggulir halaman ini ke bawah, menu header tetap terlihat di atas. Saat ini, mungkin sticky menu sudah menjadi standar dalam dunia desain website.

Tapi sebagian tema website WordPress mungkin tidak dapat mengakomodir hal tersebut. Terutama tema website versi gratis. Bahkan tema website storefront sebagai tema default WooCommerce juga tidak bisa melakukan hal itu.

Cara membuat sticky menu di WordPress

Cara membuat sticky menu di WordPress bisa di lakukan dengan menggunakan plugin. Beberapa plugin yang bisa anda gunakan di antaranya :

Plugin sticky menu WordPress

• Sticky menu & sticky header.
• myStickymenu.
• Atau Sticky Header Effects for Elementor, jika anda menggunakan elementor.

Cara membuat sticky menu di WordPress tanpa plugin

Selain menggunakan plugin, membuat sticky menu WordPress juga bisa di buat dengan menambahkan script kode kustom.

Membuat menu website anda menjadi sticky secara mudah hanya dengan memberikan property CSS position: fixed; pada selector header. Seperti contoh script CSS berikut :

/* 
 * Cara membuat sticky menu di WordPress
 *
 */

#masthead {
    position: fixed;
    top: 0;
    width: 100%;
}

Cara di atas sudah bisa membuat menu navigasi dan header website anda menjadi sticky, tapi mungkin belum memiliki tampilan yang sempurna. Secara lebih lengkap kami memberikan tutorial tentang bagaimana cara membuat sticky menu di WordPress.

Cara membuat sticky menu di WordPress dengan script kustom yaitu dengan mengkatrol hook yang tepat menggunakan element navigasi yang ada.

Atau membuat element navigasi baru dengan opsi menambahkan script jquery agar sticky menu baru bisa aktif hanya ketika user sudah melakukan scroll dalam beberapa ukuran px tertentu.

Artikelnya kami kategorikan sebagai artikel yang teknikal. Itu sebabnya kami memaparkan cara tersebut pada kategori coding for fun.

Lihat selengkapnya script dan kode yang kami sertakan di artikel berikut, Cara Membuat Menu Sticky Di WordPress tanpa plugin.

WordPress sticky header untuk meningkatkan transaksi eCommerce anda

Pada paragraf di atas, kami singgung bahwa membuat sticky menu di WordPress merupakan salah satu cara memaksimalkan revenue toko online anda. Baik penjualan produk-produk daring, pendapatan iklan google adsense maupun komisi dari produk afiliasi.

Lalu apa logika sebenarnya yang membuat sticky menu memiliki kaitan dengan meningkatkan konversi dan penghasilan eCommerce ?

Secara langsung memang tidak ada hubungannya antara sticky menu di website WordPress dengan meningkatnya transaksi penjualan.

Apalagi, jika berfikir secara umum, bahwa sticky menu mungkin hanya sekedar mempercantik tampilan dan desain website.

Ternyata, ada hal yang lebih menarik dari sebuah sticky menu. Sticky menu dapat menambah pengalaman positif pengunjung website, yaitu dapat menonjolkan, baik sisi fleksibilitas maupun aksesibilitas website tersebut.

Aksesibilitas itu yang akan membuat user atau pengunjung website tidak cepat-cepat meninggalkan website anda setelah selesai membaca sebuah konten.

Sticky menu memungkinkan pengunjung untuk melakukan eksplorasi lebih dalam karena menu navigasi tidak hilang dan tetap berada pada pandangan mereka.

Pengunjung website anda mungkin mendarat untuk pertama kalinya hanya untuk membaca sebuah konten. Lalu mengunjungi halaman produk jualan anda atau halaman lainnya yang berisi iklan.

Sticky menu WordPress untuk meningkatkan konversi penjualan

Halaman produk anda mungkin terbagi dalam beberapa kategori, dan semuanya di tampilkan pada menu navigasi.

Sticky menu akan membuat pengunjung berpindah dari satu kategori produk ke kategori produk lainnya lebih mudah, dan mungkin akan tertarik untuk membeli produk anda.

Sticky menu WordPress untuk meningkatkan konversi adsense

Terkait dengan adsense, anda mungkin menempatkan beberapa unit iklan di halaman konten artikel. Membuat pengunjung untuk tinggal lebih lama dan mengklik konten lain di website anda tentu dapat meningkatkan angka tayangan iklan.

Itu karena iklan akan ikut refresh atau menampilkan tayangan iklan yang lain ketika pengunjung juga berpindah ke halaman lainnya.

Logikanya, akan ada multiple impression ketika pengunjung membaca dua atau tiga artikel yang berkaitan.

Jika satu konten panjang anda berisi 15 unit tayangan iklan yang di tempatkan di antara paragraf atau di sidebar, maka akan ada 45 tayangan iklan yang tampil ketika user membaca tiga artikel yang lain.

Multiple logic akan terasa lebih bekerja ketika anda memiliki trafik yang lebih besar. Dapat di hitung seberapa besar iklan yang akan muncul dalam satu hari, atau jika di hitung periode tampilan dalam satu bulan.

Semakin banyak iklan yang tampil juga sudah pasti membuat jumlah klik akan semakin banyak.

Meningkatkan konversi penjualan dan pendapatan dengan memaksimalkan beberapa bagian website

Selain membuat menu sticky header WordPress. Beberapa bagian (section) website anda juga bisa di buat sticky.

Sticky sidebar

Sidebar juga merupakan seksi yang dapat di optimalkan untuk memberikan pengalaman positif bagi pengguna dan meningkatkan penjualan maupun tayangan iklan.

Dan anda beruntung, karena tema website WordPress sudah dapat mengakomodasi hal tersebut.

Pada banyak tema website premium anda bisa melakukan setting atau memilih bagaimana desain layout website anda. Biasanya opsinya adalah sebagai berikut :

• Full width narrow, ini adalah layout satu kolom dengan padding atau margin sisi yang besar.
• Full width stretched, dimana satu halaman dengan porsi konten yang besar.
• Dua kolom dengan sidebar, baik pilihan sidebar di sebelah kiri atau kanan.

Layout dua kolom atau yang memiliki sidebar tentu bisa di maksimalkan untuk menempatkan produk yang anda jual atau unit iklan.

Sticky footer

Selain header dan sidebar, seksi lain dari website yang bisa di buat sticky adalah bagian footer. Meskipun kami tidak sependapat seksi footer untuk di buat sticky lalu di tempatkan produk atau iklan di sana.

Jikapun anda memilih untuk membuat footer anda menjadi sticky, maka taruh menu untuk kustomer anda mengakses halaman lainnya, seperti misalnya halaman dashboard.

WordPress sticky header pada tema website premium

Kembali ke topik utama tentang bagaimana cara membuat membuat sticky menu di WordPress.

Tema website premium, memungkinkan anda untuk tidak perlu lagi membuat menu sticky. Itu karena tema website WordPress premium kebanyakan sudah memiliki fitur sticky secara default.

Anda hanya perlu untuk mengaktifkan atau menonaktifkan melalui sebuah ‘toggle’ dari halaman pengaturan (customizer).

Jika memang anda menggunakan tema website premium dan memiliki fitur tersebut. Maka kami sarankan untuk mengaktifkannya sepanjang waktu. Sticky menu akan membuat konversi atau session pengunjung website anda menjadi lebih baik.

Bonus lainnya jika anda menggunakan tema website premium adalah jika menu tersebut sudah mendukung mega menu. Jika ya, maka aktifkan juga fitur mega menu tersebut.

Kombinasi sticky menu dan mega menu juga dapat memaksimalkan sesi kunjungan pengguna di website dan meningkatkan potensi transaksi online anda.

Artikel terkait :