Apakah Anda ingin memiliki Menu Divi Mega dengan gambar untuk mengilustrasikannya isi dari menunya? Ikuti tutorial kami tentang cara menambahkan gambar ke Mega Menu?
Kami senang berinteraksi dengan gambar secara online. Dengan mengingat hal itu, masuk akal untuk menambahkan gambar ke Anda situs jaringan bila memungkinkan.
Plus, menambahkan gambar dalam menu mega adalah peluang bagus lainnya untuk memberi pengguna Anda interaksi yang mereka butuhkan.
Gambar juga menyempurnakan menu dengan menarik perhatian mereka untuk lebih menyederhanakan proses navigasi.
penelitian
Sebelum kita masuk ke tutorial ini, mari kita lihat hasil yang ingin kita capai.
Pembuatan menu mega
Untuk memulai, pertama-tama kita perlu membuat menu.
Untuk contoh ini, kami akan membuat item menu induk utama yang disebut “Menu Besar” dengan empat item submenu di bawah ini. Masing-masing dari empat item sub-menu memiliki tiga item sub-sub-menu.
Buka dasbor WordPress lalu klik Penampilan> Menu
Klik 'Buat menu baru', beri nama dan klik 'Buat menu'.
Pastikan untuk mengaktifkan properti menu Kelas CSS dengan mengklik tab Opsi layar di kanan atas layar Menu dan memeriksa kelas CSS.
Anda sekarang dapat menambahkan item menu ke menu baru yang Anda buat.
Pertama-tama mari kita buat item menu yang akan menjadi induk dari semua item menu lainnya. Ini adalah tautan yang akan menampilkan menu mega Anda saat mengarahkan kursor.
Untuk membuat item menu ini, buat tautan khusus dengan parameter berikut:
- URL: http://#
- Judul navigasi: Menu Mega
- Kelas CSS: mega-menu
Sekarang atur/tarik keempat item menu (masing-masing dengan tiga sub-item sendiri) untuk menjadi sub-item dari tautan Mega Menu induk utama.
Setelah tautan ditambahkan ke menu, gulir ke bawah ke 'Reglages du menu' di bagian bawah layar menu dan pilih 'Menu utama' untuk lokasi tampilan. Terakhir, klik 'Simpan menu'
Berikut tampilan menu mega kami sejauh ini:
Menambahkan gambar ke menu mega
Sekarang menu sudah siap, saatnya menambahkan gambar.
Dapatkan gambarnya
Mulailah dengan mendapatkan empat gambar. Gambar-gambar ini harus berhubungan dengan empat item submenu (Tentang, Pengiriman Layanan, Pekerjaan Kami dan Hubungi Kami).
Gunakan editor foto untuk memperkecil dan memotong setiap gambar menjadi lebar 500 piksel dan tinggi 300 piksel.
Tambahkan gambar-gambar ini ke perpustakaan WordPress. Klik Media > Tambahkan.
Seret gambar Anda ke halaman untuk menambahkannya atau klik 'Pilih file'
Sisipkan gambar di Mega Menu
Kembali ke halaman menu di dashboard WordPress.
Dalam contoh ini, tautan di bagian atas kolom pertama adalah " Tentang ".
Klik panah di sebelah kanan item " Tentang ". Di kotak Label Navigasi, tambahkan gambar yang diinginkan menggunakan tag html img tepat sebelum teks " Tentang ". Tag gambar akan terlihat seperti ini:
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
Untuk menemukan url gambar, buka Media > Pustaka media, klik gambar yang ingin Anda tambahkan.
Di layar pop-up Detail lampiran, temukan URL di bagian kanan, lalu klik 'Salin URL ke papan klip'
Sekarang kembali ke konfigurasi item menu " Tentang " pada halaman menu dan ganti teks "Sisipkan URL Gambar" dengan menempelkan URL gambar Anda menggunakan ctrl + v.
Sebelum keluar dari opsi konfigurasi untuk item menu " Tentang ", temukan kotak teks Kelas CSS dan masukkan kelas "mega-link".
Ini akan memungkinkan kita untuk menambahkan gaya kustom nanti.
Ulangi proses ini untuk menambahkan tiga gambar berikut ke masing-masing item submenu dengan kelas "mega-link". (Dalam contoh ini, tiga elemen yang tersisa adalah “Pengiriman layanan”, “Pekerjaan kami” et " Hubungi kami ".)
Hasil
Akses Anda situs web dan arahkan kursor ke tautan menu mega. Sekarang menu mega Anda akan terlihat seperti ini:
Perhatikan bahwa saat Anda mengarahkan kursor ke setiap gambar, gambar memudar dengan item submenu langsung di bawah. Ini karena gambar adalah bagian dari tautan itu, jadi mengkliknya akan membawa Anda ke URL yang terkait.
Sentuhan akhir
Untuk langkah terakhir ini, tambahkan beberapa css khusus ke menu untuk membuat font teks lebih besar dan terpusat. Beri juga radius border di sekitar gambar agar terlihat lebih bersih.
Di dasbor WordPress, buka Divi> Opsi tema .
Gulir ke bawah ke kotak Custom CSS, masukkan CSS di bawah ini dan klik 'Simpan perubahan' :
.mega-link > a {
text-align: center;
font-size: 20px !important;
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 3px;
}
.mega-link > a img {
margin-bottom: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Hasil akhir
Kamu telah selesai !
Jika Anda telah mengikuti semua langkah dalam tutorial ini, inilah hasil yang seharusnya Anda dapatkan.
Unduh DIVI Sekarang!!!
Kesimpulan
Anda memiliki menu mega Divi dengan gambar tanpa harus menggunakan plugin. Jenis menu ini bekerja sangat baik untuk situs web. e-commerce yang punya banyak isi dan memerlukan gambar produk. Kami berharap tutorial ini bermanfaat untuk proyek Divi Anda berikutnya.
Jika Anda membutuhkan lebih banyak elemen untuk menyelesaikan proyek pembuatan situs web Anda, telusuri juga panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Tapi sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
