Menu mega adalah elemen desain populer yang dapat memberi Anda situs jaringan semburan keanggunan sambil menawarkan pengunjung lapisan navigasi tambahan. Ada beberapa cara untuk menambahkan mega-menu ke Divi. Salah satu metode termudah yang pernah saya gunakan adalahplug-in pihak ketiga yang disebut Divi Mega Pro .

Divi Mega Pro memudahkan pembuatan menu mega menggunakan Divi Builder. Setiap menu dapat ditambahkan ke elemen apa pun menggunakan kelas CSS. Ini berarti Anda dapat menambahkan tata letak Divi ke tautan mana pun di menu, tetapi Anda dapat melangkah lebih jauh dan menambahkannya ke elemen mana pun dari tata letak Divi hanya dengan menambahkan kelas CSS.

Ini sangat ideal untuk membuat menu dan popup dengan modul toko, gambar, slider, portofolio, ikon, uraian singkat, video, blog, dll. Ini juga bekerja dengan Extra.

Buat Menu Mega Pro Mega

Menu Divi Mega Pro ditambahkan ke menu dasbor. Di sini Anda dapat memasukkan kunci lisensi Anda, melihat menu yang telah Anda buat dan membuat menu baru. Saat Anda mengklik untuk menambahkan menu baru, Anda akan melihat editor untuk jenis posting menu. Layarnya sederhana, tetapi ada banyak hal yang terjadi di sini.

Penerbit - Anda dapat membuat mega-menu atau tooltip menggunakan Divi Builder.

Latar Belakang Mega Pro - Anda dapat memilih latar belakang dan warna font.

Lihat lokasi - pilih semua halaman atau beri nama halaman tertentu, lalu masukkan pengecualian.

Animasi Mega Pro - pilih animasi. Pilih dari offset, offset, perspektif, fade, atau scale.

Pemicu Mega Pro - tambahkan pemicu sebagai pemilih CSS. Setelah Anda menyimpannya, Anda akan melihat kelas CSS yang akan Anda tempelkan ke dalam bidang kelas CSS dari item menu, modul, baris, atau bagian. Inilah yang diklik atau di-arahkan untuk menampilkan menu. Semuanya bisa digunakan sebagai pemicu dan bukan hanya item menu. Ini berarti Anda juga dapat menggunakan Divi Mega Pro untuk membuat popup atau tooltips.

Pengaturan tampilan Mega Pro : pilih arah tampilan (atas atau bawah), masukkan margin atas dan bawah dalam piksel, pilih persentase lebar dan aktifkan panah. Mengaktifkan panah mengungkapkan lebih banyak penyesuaian di mana Anda dapat memilih jenis panah (segitiga atau bulat), memilih warna, mengatur lebar dan tinggi, dan melihat pratinjau panah.

kustomisasi tombol tutup: aktifkan tombol tutup di desktop atau di ponsel dan sesuaikan tombol tutup. Jika Anda mengaktifkannya, kustomisasi untuk warna teks, warna latar belakang, ukuran font, radius batas, isian, dan tampilan akan dipratinjau.

Parameter tambahan Mega Pro - pilih jenis pemicu (diarahkan atau diklik), jenis keluaran (diarahkan atau diklik) dan masukkan penundaan keluar.

Model Divi Mega Pro

Pengembang telah menyediakan beberapa model untuk Divi Mega Pro. Saat Anda membeli plugin, template ini tersedia di akun Anda, di tab Template Layout Plugin. Ini bagus untuk membantu Anda mulai merancang menu mega Anda. Saya akan menggunakan beberapa di contoh saya.

Menu Divi Mega Pro

Setelah Anda membuat mega menu, itu akan muncul di daftar. Di sini Anda dapat mengedit, mengedit, atau menghapus menu dengan cepat. Anda juga dapat mencari, memfilter berdasarkan tanggal, melihat berdasarkan status, dll. Ini juga menyediakan kelas Mega Pro yang unik sehingga Anda dapat menyalinnya dari sini alih-alih membuka masing-masing untuk mendapatkan kelas.

Saat Anda menyalin kelas, pastikan untuk menempelkannya tanpa spasi tambahan. Jika tidak, semua menu mega pada halaman tidak akan berfungsi lagi.

Saya yakin tidak akan mudah untuk menambahkannya, tetapi fitur salin dan edit akan berguna. Anda dapat menyimpan tata letak Divi ke perpustakaan Anda untuk digunakan kembali, tetapi itu tidak termasuk pengaturan sekitarnya.

Menambahkan pemicu

Di bidang Mega Pro Triggers, Anda akan melihat satu kelas Mega Pro. Salin dan tempelkan ke bidang Kelas CSS dari elemen yang ingin Anda gunakan sebagai pemicu.

Untuk menambahkan bidang Kelas CSS ke item menu, Anda harus mengaktifkan kelas CSS. Dari layar menu, pilih Opsi layar dan aktifkan Kelas CSS.

Tempel kelas CSS ke dalam bidang menu. Sekarang item menu ini akan menampilkan menu mega saat melayang dan membawa Anda ke halaman saat diklik.

Anda akan melihat bahwa Divi Mega Pro juga merupakan opsi di opsi tautan menu. Mereka bagus untuk menambahkan item menu ke menu yang sebenarnya tidak ke mana-mana. Tambahkan kelas CSS seperti item menu lainnya.

Bagian kontak pada menu mega

Menu terbuka di hover. Saya selalu dapat mengklik tautan Kontak untuk membuka halaman kontak jika saya mau. Jika saya hanya ingin menu mega ditampilkan, saya cukup menggunakan tautan menu utama Kontak dan mengganti namanya (seperti pada contoh di atas).

Yang satu ini, saya mengubah sedikit warna menggunakan latar belakang dan pengaturan tampilan daripada menggunakan Divi Builder. Ia menambahkan sebuah bar di bagian bawah menu.

Ajakan bertindak sederhana dengan kolom menu

Ini adalah salah satu model yang menambahkan banyak kolom. Saya melakukan penyesuaian pada latar belakang dan warna font. Saya juga menambahkan panah dan membuat lebarnya 75%.

Warna latar belakang dan opsi font menambahkan sedikit lebih banyak untuk membuatnya menonjol. Saya meninggalkan perataan default, yang menempatkan menu di sebelah kanan layar. Anda dapat mengatur posisi di pengaturan.

tab

Template tab menyertakan modul kode dengan jQuery untuk membuat efek hover.

Saya menambahkan konten ke tab dan menyesuaikannya dengan situs. Setiap tautan di sebelah kiri menunjukkan tab berbeda di sebagian besar menu.

Konfigurasi info Bubbles

Untuk yang ini, saya menambahkan kelas CSS ke beberapa uraian sehingga membuka pop-up kecil saat melayang. Popup hanyalah gambar dengan bayangan di bawah.

Pada gambar di atas mouse saya melayang di atas kata-kata SITUS LANGSUNG. Saya belum menyesuaikan posisinya, tetapi mudah untuk membuatnya muncul di mana pun Anda inginkan.

Untuk yang ini, saya membuat popup untuk menampilkan gambar dengan beberapa teks. Saya mengatur arah tampilan ke Rendah dan, untuk membuatnya muncul di sebelah gambar yang ingin saya tambahkan, saya menambahkan margin -300.

Pop-up sekarang muncul di kiri dan atas gambar saat saya mengarahkan kursor ke atasnya. Saya menambahkan warna latar belakang transparan, warna batas, isi dan garis bulat.

Lisensi dan dokumentasi

Anda memiliki pilihan antara empat lisensi:

• Situs tunggal - $ 15 per tahun
• Tiga situs - $ 29 per tahun
• Situs tak terbatas - $ 59 per tahun
• Seumur Hidup Tidak Terbatas - $ 129 satu kali

Dokumentasi disediakan oleh demonstrasi video dan artikel di situs menjelaskan fitur dan menjelaskan, langkah demi langkah, cara menggunakan plugin.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorial” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Tutorial Divi lainnya

• 5 website untuk restoran penggunaan Divi tema
• Bagaimana cara menambahkan teks pada produk Divi WooCommerce
• Cara mengubah warna menu antara halaman Divi
• Cara mempersonalisasi kisi-kisi blog dengan Divi
• Cara menggunakan peran Divi editor pada WordPress
• Cara membuat slider Divi layar penuh
• Cara mengubah warna menu antara halaman Divi
• Fitur yang Anda mungkin tidak tahu tentang Divi
• Cara menggunakan Divi Builder di WordPress
• Cara menggunakan modul gulir video Divi
• Cara menggunakan modul Flip Divi Builder
• Bagaimana cara menambahkan modul testimonial pada Divi Builder
• Cara menggunakan modul teks Divi
• Cara membuat slider di Divi
• Cara mengedit peran pengguna Divi
• Cara menggunakan modul Divi Social Media
• Cara menggunakan modul shop pada tema WordPress Divi
• Cara menggunakan modul sidebar Divi
• Cara menggunakan Modul Tabel Divi Price
• Cara menggunakan modul judul publikasi Divi
• Bagaimana cara menambahkan modul video Divi
• Cara menggunakan modul navigasi artikel
• Cara menggunakan modul pencarian Divi
• Cara menggunakan modul dompet Divi
• Cara menggunakan modul orang di Divi Builder
• Cara menggunakan modul dompet dengan filter Divi
• Cara menggunakan modul slider lebar penuh
• Cara menggunakan Modul Gambar Divi Builder
• Cara menggunakan modul navigasi penuh lebar dari Divi Builder
• Cara menggunakan modul galeri gambar
• Cara menggunakan Modul Full-Width Divi Builder Card
• Cara menggunakan Modul Portofolio Full Full Divi
• Cara menggunakan modul header penuh lebar Divi
• Cara menggunakan Modul Divi Counter
• Cara menggunakan slider artikel di Divi Builder
• Cara menggunakan modul Divi Email Optin