Apakah Anda ingin tahu cara menyesuaikan keranjang dan ikon pencarian modul Menu Lebar Penuh Divi?
Menu Anda situs jaringan adalah salah satu bagian terpenting dari Anda situs jaringan karena dampak langsungnya terhadap cara pengguna menavigasi Anda isi.
Bilah menu yang dirancang dengan baik dapat membuat perbedaan besar dengan menyederhanakan navigasi, menyorot halaman utama, dan meningkatkan pengalaman pengguna secara keseluruhan.
Modul "Menu Lebar Penuh" Divi menawarkan fleksibilitas luar biasa dengan memungkinkan Anda menyesuaikan keranjang belanja dan ikon pencarian sesuai keinginan Anda.
Dalam tutorial ini, kami akan menunjukkan kepada Anda tiga desain berbeda untuk modul "Menu Lebar Penuh" dengan gaya berbeda untuk keranjang belanja dan ikon pencarian.
Mari kita mulai!
penelitian
Berikut adalah preview dari apa yang akan kita rancang.
Desain pertama
Untuk desain pertama, kami menempatkan salah satu ikon di kiri dan yang lainnya di kanan dengan memilih struktur menu di tengah. Kami juga akan mengubah warna pada hover.
Desain kedua
Untuk desain kedua, kita letakkan dua ikon di sisi kanan dan ubah warnanya saat melayang.
Desain ketiga
Untuk desain ketiga, kami menggunakan CSS tambahan untuk menyesuaikan ikon.
Baca juga: Divi: Cara menyesuaikan modul "Penghitung Waktu Mundur" dengan GIF
Kustomisasi keranjang belanja dan ikon pencarian modul "Menu Lebar Penuh" Divi
Buat tajuk global
Untuk masing-masing dari tiga desain menu, kita akan mulai dengan membuka pembuatnya tema dari Divi.
Untuk melakukan ini, dari dasbor WordPress, buka Divi > Pembuat Tema
kemudian klik Tambahkan Tajuk Global
Lalu pilih Bangun Header Global
Sisipkan bagian lebar penuh baru.
Kemudian hapus bagian sebelumnya.
Masukkan modul Menu Lebar Penuh.
Unggah logo Anda dari menu.
Kami sekarang siap untuk melanjutkan.
Desain pertama
Desain pertama kami akan menggabungkan efek hover bawaan Divi untuk mengubah warna teks dan ikon saat melayang. Ayo mulai.
Lihat juga: Divi: Cara menambahkan ikon hamburger ke modul Menu
Mulailah dengan membuka pengaturan modul dan menambahkan latar belakang.
- Latar belakang: #fbf9f4
Buka tab Mendesain dan pilih tata letak logo.
- Gaya: Logo Berpusat Sebaris
Sekarang mari kita ubah beberapa pengaturan teks menu.
- Warna Tautan Aktif: #09148c
- Font Menu: Ruby
- Berat Font Menu: Tebal
- Gaya Font: TT dan U (Kapital dan digarisbawahi)
Selanjutnya, atur warna teks menu, ukuran teks, dan spasi huruf.
- Warna Teks Menu: #000000
- Ukuran Teks Menu: 21px
- Spasi Huruf: 1px
Kami ingin menambahkan efek hover ke menu ini, jadi ubah warna teks menu di hover. Atur warna teks menu yang berbeda saat mengarahkan kursor.
- Warna Teks Menu (Hover): #b70018
Lalu pergi ke pengaturan Menu drop down di bawah tab Mendesain.
- Warna Latar Menu Dropdown: #fbf9f4
- Warna Garis Menu Dropdown: #b70018
- Warna Teks Menu: #000000
Kami ingin warna teks menu tarik-turun juga berubah saat mengarahkan kursor, jadi pilih opsi arahkan kursor untuk pengaturan ini dan atur warna teks yang berbeda.
- Warna Teks Menu Dropdown (Hover): #b70018
- Warna Tautan Aktif Menu Dropdown: #b70018
- Warna Latar Menu Seluler: #fbf9f4
- Warna Teks Menu Seluler: #000000
Sekali lagi, kami ingin warna teks menu seluler berubah saat mengarahkan kursor. Pilih opsi arahkan kursor untuk pengaturan ini, lalu atur warna teks yang berbeda saat mengarahkan kursor.
- Warna Teks Menu Seluler (Hover): #b70018
Keranjang belanja dan kustomisasi ikon pencarian
Sekarang mari tambahkan dan sesuaikan keranjang belanja dan ikon pencarian. Di bawah tab Konten, buka Elemen dan aktifkan ikon keranjang belanja dan ikon pencarian.
- Tampilkan Ikon Keranjang Belanja: YA
- Tampilkan Ikon Pencarian: YA
Kembali ke tab Mendesain dan buka pengaturan ikon. Setiap ikon kita akan berwarna hitam dan merah saat melayang. Pertama, atur warnanya menjadi hitam.
- Warna Ikon Keranjang Belanja: #000000
- Warna Ikon Pencarian: #000000
- Warna Ikon Menu Hamburger: #000000
Selanjutnya, pilih ikon hover dan tambahkan warna pada hover.
- Warna Ikon Keranjang Belanja (Hover): #b70018
- Warna Ikon Pencarian (Hover): #b70018
- Warna Ikon Menu Hamburger (Arahkan kursor): #b70018
Setel ukuran ikon.
- Ukuran Font Ikon Keranjang Belanja: 25 px
- Ikon Pencarian Ukuran Font: 25 px
Pergi ke bagian Jarak, lalu atur padding atas dan bawah.
- Padding (Atas dan Bawah): 5px
Terakhir, kita akan menambahkan batas ke bagian atas dan bawah modul Menu. Buka pengaturan perbatasan.
- Lebar Batas Atas: 3px
- Lebar Batas Bawah: 3px
Desain akhir
Dan inilah desain akhir kami.
Desain kedua
Desain kedua kami akan menggunakan efek hover bawaan Divi untuk mengubah ukuran ikon menu dan teks saat melayang. Ayo mulai.
Pertama, kita akan menambahkan gradien latar belakang ke modul Menu. Gradien memiliki tiga perhentian, pengaturannya adalah sebagai berikut:
- Gradien Berhenti:
- 0%: rgba(255,255,255,0)
- 23%: rgba(252,199,76,0.65)
- 82%: rgba(232,119,255,0.32)
Atur jenis gradien dan posisi gradien.
- Tipe Gradien: Kerucut
- Posisi Gradien: Bawah
Lalu pergi ke tab Mendesain dan mengatur tata letak (tata ruang).
- Gaya: Terpusat
Pergi ke bagian Menu teks untuk menyesuaikan desain teks menu.
- Warna Tautan Aktif: #FFFFFF
- Menu Font: Syne
- Berat Huruf: Tebal
- Gaya Font Menu: TT (Huruf Besar)
- Menu Warna Teks: #FFFFFF
Sekarang atur ukuran teks menu dan spasi huruf.
- Ukuran Teks Menu: 20px
- Spasi Huruf Menu: 2px
Karena kami ingin ukuran teks menu kami bertambah saat mengarahkan kursor, pilih opsi arahkan kursor.
- Ukuran Teks Menu: 22px
Selanjutnya, ubah pengaturan desain dari menu tarik-turun.
- Warna Latar Menu Dropdown: #fcda90
- Warna Garis Menu Dropdown: #FFFFFF
- Menu Warna Teks: #FFFFFF
- Menu Dropdown Warna Tautan Aktif: #FFFFFF
Atur latar belakang menu seluler dan warna teks.
- Warna Latar Menu Seluler: #fcda90
- Warna Teks Menu Seluler: #FFFFFF
Keranjang belanja dan kustomisasi ikon pencarian
Sekarang mari kita mulai menyesuaikan ikon menu kita. Pergi ke Elemen di bawah tab Konten dan aktifkan ikon keranjang belanja dan ikon pencarian.
- Menabur Ikon Keranjang Belanja : YA
- Tampilkan Ikon Pencarian: YA
Kembali ke tab Mendesain dan buka pengaturan ikon.
- Warna Ikon Keranjang Belanja: #ffffff
- Warna Ikon Pencarian: #ffffff
- Warna Ikon Menu Hamburger: #ffffff
Ikon akan memiliki warna oranye gelap saat melayang. Pilih opsi sampul dan atur warnanya.
- Warna Ikon Keranjang Belanja (Hover): #fcac00
- Cari Ikon Warna (Arahkan): #fcac00
- Warna Ikon Menu Hamburger (Arahkan kursor): #fcac00
Selanjutnya, atur ukuran font untuk keranjang belanja dan ikon pencarian.
- Ukuran Font Ikon Keranjang Belanja: 25 px
- Ikon Pencarian Ukuran Font: 25 px
Untuk memperbesar ukuran ikon saat mengarahkan kursor, pilih opsi arahkan kursor.
- Ukuran Font Ikon Keranjang Belanja (Hover): 30 px
- Ikon Pencarian Ukuran Font (Hover): 30 px
Akhirnya, pergi ke bagian Jarak dan atur padding atas dan bawah.
- Padding (Atas dan Bawah): 5px
Desain akhir
Berikut adalah desain akhir dari tata letak menu kedua kami.
Desain ketiga
Untuk desain akhir kami, kami akan menambahkan lingkaran latar belakang di belakang ikon keranjang menggunakan CSS khusus.
Baca juga: Divi: Cara membuat menu hover yang lengket dan dapat diperluas
Mari kita mulai.
Pertama, tambahkan warna latar belakang ke modul.
- Latar belakang: #efb6ac
Lalu pergi ke tab Mendesain dan buka opsi Menu teks.
- Warna Tautan Aktif: #e84322
- Font Menu: Cinzel
- Menu Berat Font: Ultra Tebal
Kami ingin warna teks menu berubah saat melayang. Pertama, atur warna teks menu.
- Menu Warna Teks (Desktop): #e7644a
Klik ikon hover dan atur warna teks hover.
- Warna Teks Menu (Arahkan kursor): #e84322
Selanjutnya, atur ukuran teks menu dan spasi huruf.
- Ukuran Teks Menu: 21px
- Spasi Huruf Menu: 1px
Kami juga ingin spasi huruf diperpanjang saat mengarahkan kursor, jadi pilih opsi arahkan kursor untuk pengaturan.
- Spasi Huruf Menu: 2px
Atur perataan teks ke kiri.
- Perataan Teks: kiri
Selanjutnya, ubah pengaturan berikut dari menu drop-down.
- Warna Latar Menu Dropdown: #efb6ac
- Warna Garis Menu Dropdown: #e7644a
Baca juga: Divi: Cara membuat bagian Testimonial dalam bentuk grid
- Warna Teks Menu Dropdown
- Desktop: #e7644a
- Arahkan kursor ke: #e84322
- Warna Tautan Aktif Menu Dropdown: #e84322
Atur latar belakang menu seluler dan warna teks.
- Warna Latar Menu Seluler: #efb6ac
- Warna Teks Menu Seluler:
- Desktop: #e7644a
- Arahkan kursor ke: #e84322
Keranjang belanja dan kustomisasi ikon pencarian
Pertama, pergi ke Elemen di bawah tab Konten dan aktifkan ikon keranjang belanja dan ikon pencarian.
- Tampilkan Ikon Keranjang Belanja: YA
- Tampilkan Ikon Belanja: YA
Kemudian kembali ke tab Mendesain dan buka pengaturan ikon. Mengatur warna ikon.
- Warna Ikon Keranjang Belanja: #e7644a
- Warna Ikon Pencarian: #e7644a
- Warna Ikon Menu Hamburger: #e7644a
Warna ikon ini akan berubah saat mengarahkan kursor. Aktifkan opsi hover dan atur warnanya.
- Warna Ikon Keranjang Belanja (Hover): #e84322
- Warna Ikon Pencarian (Arahkan kursor): #e84322
- Warna Ikon Menu Hamburger (Arahkan kursor): #e84322
Kami juga ingin ukuran ikon bertambah saat mengarahkan kursor. Pertama, atur ukuran font ikon.
- Ukuran Font Ikon Keranjang Belanja: 22 px
- Ikon Pencarian Ukuran Font: 22 px
Selanjutnya, atur ukuran font ikon di hover.
- Ukuran Font Ikon Keranjang Belanja (Hover): 26 px
- Ikon Pencarian Ukuran Font (Hover): 26 px
Lalu pergi ke bagian Jarak dan tambahkan padding atas dan bawah.
- Padding (Atas dan Bawah): 5px
Terakhir, kita dapat menambahkan CSS khusus ke header global untuk menambahkan lingkaran di belakang keranjang belanja dan ikon pencarian.
Anda dapat menyesuaikan CSS ini sesuai keinginan Anda agar sesuai dengan desain modul Menu Anda.
Buka pengaturan templat tajuk, lalu buka tab Advanced dan masukkan CSS khusus berikut.
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}
Desain akhir
Ini melengkapi desain tata letak menu ketiga dan terakhir kami.
Hasil akhir
Sekarang mari kita lihat desain akhir dari tiga menu yang berbeda.
Desain pertama
Unduh DIVI Sekarang!!!
Desain kedua
Desain ketiga
Unduh DIVI Sekarang!!!
Kesimpulan
Modul Menu Divi, keranjang, dan ikon pencarian mudah disesuaikan untuk membuat tata letak dan desain unik untuk Anda situs jaringan.
Anda dapat dengan mudah meningkatkan tampilan modul Menu Anda menggunakan pengaturan Divi bawaan seperti efek hover dan CSS khusus.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
