Sorotan Plugin Divi: Divi MadMenu

Divi Madmenu adalah plugin pihak ketiga untuk Divi yang menambahkan fitur menu baru ke Divi Theme Builder. Tambahkan tombol, keranjang belanja Woocommerce, opsi pencarian, dan sesuaikan penempatan setiap elemen. Rancang menu independen untuk desktop, tablet, dan ponsel, serta atur titik henti sementara. Atur header sebagai tetap dan tambahkan animasi. Setiap elemen dapat disesuaikan. Pada artikel ini, kita akan melihat Divi Madmenu dan melihat apa yang dapat dilakukannya.

Divi Madmenu dengan Divi Theme Builder

Divi Madmenu dirancang khusus untuk bekerja dengan Divi Theme Builder. Setelah Anda menginstal plugin, buka Divi Theme Builder, klik Add Global Header , dan pilih Build Global Header untuk membuat header kustom Anda.

Anda akan melihat modul baru ditambahkan ke Divi Builder yang disebut MadMenu. Ini adalah satu-satunya modul yang perlu Anda gunakan, tetapi Anda dapat menggunakan yang lain jika Anda ingin menambahkan lebih banyak fitur.

Isi

Modul menampilkan menu dan menyediakan banyak opsi untuk menyesuaikannya. Elemen memungkinkan Anda untuk mengaktifkan fitur seperti menu untuk desktop dan seluler, logo, pencarian, keranjang, dan dua tombol. Mereka dapat diatur secara berbeda dan ditata secara independen.

Desktop Menu memungkinkan Anda untuk memilih menu yang akan ditampilkan, mengatur breakpoint untuk menentukan kapan itu berubah ke menu seluler, dan mengatur animasi dan durasi submenu.

Menu Seluler memungkinkan Anda memilih menu berbeda untuk seluler dan menambahkan opsi untuk menciutkan submenu, membuat tautan induk dapat diklik, dan memilih mode akordeon. Ini mencakup opsi animasi yang sama dengan menu desktop.

Mobile Menu Toggle mencakup opsi ikon dan label termasuk format toggle, label tertutup dan terbuka, dan posisi label.

Jika Logo diaktifkan, Anda akan melihat opsi untuk memilih logo, memberikan URL tautan, dan memutuskan apakah itu akan terbuka di jendela yang sama.

Jika Pencarian diaktifkan, Anda dapat memilih ikon atau gambar.

Untuk Keranjang , Anda dapat menampilkan ikon, konten, atau ikon dan konten, memilih gambar atau menampilkan logo, memilih opsi visibilitas, pembaruan langsung, dll.

Tombol 1 dan Tombol 2 disesuaikan secara terpisah, tetapi keduanya memiliki opsi yang sama. Tambahkan teks, ikon, pilih penempatan ikon, visibilitas, tautan, dan pilih cara membukanya. Pada contoh di atas, saya telah menambahkan teks ke kedua tombol dan menambahkan ikon ke tombol pertama.

Desain

Tab Desain menambahkan opsi untuk teks, item menu, menu desktop dan seluler, submenu desktop dan seluler, logo, pencarian, keranjang, tombol, dan banyak lagi. Berikut adalah melihat beberapa dari mereka.

Layout General memungkinkan Anda memilih perataan. Atur ke kanan, kiri, tengah, spasi-sekitar, spasi-antara, dan spasi-merata. Pilih arah tarik-turun dan atur urutan menu untuk desktop dan seluler. Dalam contoh ini, saya telah mengatur perataan ke kanan dan mengatur dropdown langsung dari submenu ke atas.

Layout Elements memungkinkan Anda mengontrol perataan, lebar, dll., dari menu, logo, pencarian, keranjang, tombol 1, dan tombol 2.

Setiap elemen memiliki opsi desain Teks yang mencakup pengaturan untuk menu normal dan tetap. Sesuaikan warna link aktif, warna link biasa, font, berat font, ukuran, spasi, dll. Contoh di atas adalah Text: Desktop Menu. Saya telah mengubah warna, ukuran font, dan spasi.

Teks

Ini adalah Teks: Submenu Desktop . Saya telah mengubah warna, ukuran font, dan membuat teks menjadi huruf besar.

Ini adalah Teks: Toggle Menu Seluler . Ini menyediakan kustomisasi teks untuk teks buka dan tutup. Saya telah mengubah warna font dan meningkatkan ukuran dan spasi huruf.

Ini adalah Teks: Menu Seluler . Saya telah mengubah warna font dan membuat teks menjadi huruf besar.

Teks: Submenu Seluler mengontrol font untuk menu tarik-turun. Saya telah mengubah warna, memilih teks huruf besar dengan huruf pertama yang lebih besar untuk setiap kata, meningkatkan ukuran font, dan memusatkan teks.

Teks: Tombol 1 dan Teks: Tombol 2 memiliki opsi yang sama dan mengontrol tombolnya sendiri-sendiri. Saya telah meningkatkan ukuran font untuk kedua tombol dan membuat Tombol 1 lebih besar. Saya juga telah mengubah warna mereka. Untuk Tombol 2, saya memilih font yang berbeda.

Teks: Keranjang mengontrol font untuk teks isi keranjang. Saya telah mengubah warna font, memperbesar ukuran, membuat font miring, menggarisbawahi font dengan gaya bergelombang, dan mengubah warna garis bawah.

Tidak bisa

Item Menu Desktop memberi Anda kontrol atas latar belakang, margin, bantalan, sudut, batas, bayangan kotak, dll. Saya telah mengubah warna latar belakang, menambahkan margin dan bantalan untuk menambahkan ruang di antara item menu, menambahkan sudut, batas, dan bayangan kotak.

Item Submenu Desktop memberi Anda kontrol yang sama seperti item menu. Saya telah mengubah warna latar belakang, menambahkan batas ke bagian atas setiap item, dan menambahkan bayangan kotak.

Saya suka bahwa setiap item dapat ditata secara individual. Saya telah menambahkan bayangan kotak ke menu utama, item menu, dan pencarian, dan saya telah membulatkan sudutnya. Saya juga telah mengubah warna font dan latar belakang.

Ini salah satu yang saya buat untuk situs pengujian saya. Saya telah menambahkan logo dengan bayangan kotak, menu utama, pencarian, keranjang, dan kedua tombol. Tombol-tombolnya ditata dengan latar belakang putih dan batas hitam. Saya juga menambahkan batas bawah menggunakan warna dari tata letak.

Kita bisa mendapatkan ide yang lebih baik tentang apa yang bisa dilakukan dengan menu dengan menggali demo.

Demo Divi Madmenu

Plugin ini dilengkapi dengan 10 demo Madmenu yang dapat Anda unggah ke Divi Library. Beberapa demo memiliki gambar di dalam foldernya. Anda harus mengunggahnya ke perpustakaan media.

Untuk menggunakan demo dengan Pembuat Tema, klik untuk membuat header global. Klik untuk menyisipkan bagian dan pilih Tambahkan Dari Perpustakaan . Sekarang Anda dapat memilih salah satu demo untuk digunakan.

Gunakan demo sebagai titik awal untuk membuat desain atau cukup tambahkan logo dan menu Anda. Mereka memanfaatkan warna latar belakang, opsi logo, opsi pencarian, dan tombol CTA dengan baik. Mari kita lihat beberapa demo dengan situs pengujian saya. Mereka menyertakan desain yang berbeda untuk desktop, tablet, dan header ponsel.

Demo 1

Demo 1 menggunakan judul situs, menu, dan tombol 1. Menu menggunakan perataan tengah. Submenu mencakup penataan dengan bayangan kotak dan batas untuk memisahkan tautan. Saya mengarahkan kursor ke tautan kedua.

Seluler meningkatkan ukuran font dan menggunakan gaya yang sama untuk menu utama dan submenu. Itu juga menggunakan teks dengan ikon untuk tombol buka dan tutup dan mengganti judul situs dengan logo.

Demo 2

Demo 2 menambahkan logo, pencarian dengan ikon yang dilingkari dengan batas di satu sisi, menu di tengah, keranjang belanja, dan tombol. Kedua tombol tersebut menampilkan logo media sosial. Item submenu adalah gaya secara independen dari latar belakang.

Menu seluler memusatkan semua ikon, mengganti teks menu dengan ikon terbuka, dan menambahkan warna biru muda untuk menu.

Demo 3

Demo 3 menggunakan tombol yang menarik. Tombol 1 menyertakan teks untuk masuk atau mendaftar dan memiliki efek melayang yang menghilangkan latar belakang saat melayang. Tombol 2 menggunakan gambar hati yang ditarik garis.

Untuk seluler, tombol buka/tutup menyertakan ikon dan teks di bawah ikon. Ikon untuk tombol diberi jarak yang sama di seluruh header menggunakan spasi-antara. Judul situs diganti dengan logo, yang dipindahkan ke kanan.

Demo 5

Demo 5 menggunakan spasi-antara untuk tata letak dan menampilkan tombol sebagai CTA. Kedua tombol menggunakan latar belakang berwarna berbeda untuk menonjol.

Menu seluler menempatkan tombol di paling kanan dan kiri dan mereka menambahkan ikon. Logo dan tombol buka/tutup dengan teks dan ikon ditempatkan di tengah.

Demo 7

Demo 7 menempatkan tombol di kedua sisi header dengan menu di tengah. Logo ditempatkan di atas nama situs. Menu termasuk ikon buka dan tutup dengan teks. Item dalam menu tarik-turun dipisahkan satu sama lain sehingga bagian latar belakang dapat terlihat.

Versi seluler menyimpan tombol di tempatnya dan mengganti teks dengan ikon. Judul situs juga dihapus.

Demo 8

Demo 8 menyertakan warna kuning tebal dengan menu tarik-turun dan judul di sebelah kiri, dan menu dengan tombol di sebelah kanan. Masing-masing tombol menyertakan grafik.

Menu seluler menempatkan tombol di sebelah kiri dan logo serta ikon menu di sebelah kanan.

Demo 10

Demo 10 menggunakan gradien untuk latar belakang dan menempatkan latar belakang yang lebih gelap di belakang setiap ikon. Tombol termasuk teks dan ikon. Setiap tautan di menu tarik-turun dipisahkan satu sama lain dan tautan aktif lebih gelap. Logo ditempatkan di sebelah kiri.

Menu seluler menghapus semua ikon kecuali ikon pencarian. Menu diganti dengan ikon buka/tutup, dan logo ditempatkan di tengah. Menu tarik-turun terlihat sama.

Beli Divi Madmenu

Divi Madmenu dapat dibeli di Divi Marketplace seharga $39 per tahun untuk penggunaan tak terbatas dan pembaruan serta dukungan satu tahun.

Mengakhiri Pikiran

Divi Madmenu untuk Divi Theme Builder memiliki banyak fitur dan penyesuaian, membuatnya mudah untuk mendesain hampir semua jenis header yang mungkin Anda perlukan. Banyaknya penyesuaian di tab desain dapat membingungkan pada awalnya, tetapi mereka mudah digunakan dan tidak butuh waktu lama untuk memahami apa yang mengontrol apa. Menggunakan dua tombol bersama dengan menambahkan gambar dan ikon ke tombol pencarian dan keranjang membuka banyak kemungkinan desain. Jika Anda tertarik untuk membuat menu yang menarik dengan satu modul, Divi Madmenu patut untuk dicoba.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba Divi Madmenu? Beri tahu kami pendapat Anda tentang hal itu di komentar di bawah.

Gambar Unggulan melalui venimo / shutterstock.com