Advan – Elementor memudahkan kamu membuat website yang keren dan interaktif. Namun, salah satu fitur yang sering diabaikan adalah header dengan menu multi-level. Header ini sangat berguna untuk navigasi, terutama jika kamu punya banyak halaman atau kategori. Mungkin kamu merasa kesulitan atau bahkan belum tahu cara membuat header multi-level. Tenang saja, dalam artikel ini, kamu akan belajar langkah demi langkah membuat header multi-level menu di Elementor.
Tidak perlu keahlian coding, cukup ikuti panduan ini dan website kamu akan terlihat lebih profesional.
Langkah-langkah Membuat Header Multi-level Menu di Elementor
Kamu mungkin merasa membuat header multi-level menu di Elementor itu sulit, tetapi sebenarnya sangat sederhana. Dengan mengikuti langkah-langkah yang tepat, kamu bisa menciptakan menu navigasi yang rapi dan profesional tanpa perlu keahlian khusus:
1. Buat Template Header
Buka Elementor dan pergi ke Templates > Theme Builder. Klik Add New dan pilih Header. Beri nama pada template kamu dan klik Create Template. Pilih salah satu template yang tersedia atau buat dari nol.
2. Tambahkan Menu Nav
Setelah template terbuka, tambahkan widget Nav Menu ke header. Kamu bisa menemukan widget ini di panel sebelah kiri. Tarik dan letakkan di area yang kamu inginkan.
3. Buat Menu di WordPress
Sekarang, pergi ke Appearance > Menus di dashboard WordPress. Buat menu baru atau edit menu yang sudah ada. Tambahkan item menu utama, lalu tambahkan sub-menu di bawahnya. Kamu bisa drag and drop item untuk membuat hierarki.
4. Atur Menu di Elementor
Kembali ke template header di Elementor. Pilih widget Nav Menu dan di panel sebelah kiri, pilih menu yang baru saja kamu buat. Menu multi-level kamu akan muncul di preview. Kamu bisa menyesuaikan tampilan menu ini sesuai keinginan.
Baca Juga: Cara Menambahkan Link di Header Elementor
5. Tambahkan CSS Kustom
Untuk tampilan yang lebih menarik, tambahkan sedikit CSS kustom. Pergi ke Advanced > Custom CSS di widget Nav Menu dan tambahkan kode berikut:
- css
.elementor-nav-menu .sub-menu {
background-color: #f7f7f7;
border-radius: 5px;
.elementor-nav-menu .sub-menu a {
padding: 10px 20px;
6. Sesuaikan Tampilan untuk Mobile
Jangan lupa untuk menyesuaikan tampilan menu untuk perangkat mobile. Elementor memudahkan kamu untuk mengatur tampilan responsif. Klik ikon Responsive Mode di bagian bawah dan pilih Mobile. Sesuaikan ukuran font, padding, dan margin agar tampilan tetap rapi.
7. Publish Header
Setelah selesai, klik Publish. Elementor akan menanyakan kondisi untuk menampilkan header ini. Pilih Entire Site agar header ini muncul di semua halaman website kamu. Klik Save & Close untuk menyimpan perubahan.
Tips Tambahan
Jika kamu ingin tampilan lebih menarik, kamu bisa menambahkan animasi hover pada menu. Misalnya, tambahkan efek fade-in untuk sub-menu saat pengguna mengarahkan mouse.
Kamu juga bisa mencoba berbagai gaya font dan warna untuk menyesuaikan dengan tema website kamu. Jangan takut untuk bereksperimen!
Baca Juga: Cara Membuat Mega Menu di Header Elementor
Membuat header multi-level menu di Elementor sebenarnya tidak sulit. Dengan mengikuti langkah-langkah di atas, kamu bisa membuat navigasi yang lebih baik dan profesional untuk pengunjung website. Cobalah berbagai desain dan lihat mana yang paling cocok untuk kamu.
Untuk mendukung produktivitas dan kreativitas kamu dalam membuat website, gunakan Advan 360 Stylus. Laptop ini dilengkapi dengan layar sentuh dan stylus yang memudahkan kamu dalam mendesain.
Performa tinggi dan baterai tahan lama membuatnya ideal untuk pekerjaan sepanjang hari. Upgrade ke Advan 360 Stylus dan rasakan bedanya!***
Editor: Mahfida Ustadhatul Umma