Apakah Anda ingin berkreasi dengan membuat menu tempel yang dapat diperluas saat melayang dengan Divi ?
Dalam tutorial ini, kami akan menunjukkan cara membuat menu lengket yang dapat diperluas saat mengarahkan kursor menggunakan oleh Paket Tata Letak Mekanik Divi .
Kami akan menangani dua desain sampel berbeda yang dapat Anda buat ulang dari awal dan berlaku untuk semua jenis situs jaringan yang Anda buat!
Menu akan ditampilkan saat mengarahkan kursor ke desktop dan diaktifkan saat klik di perangkat seluler.
Mari kita pergi!
penelitian
Sebelum masuk ke tutorial ini, mari kita lihat hasilnya pada ukuran layar yang berbeda.
Contoh 1
Komputer desktop
mobil
Unduh DIVI Sekarang!!!
Contoh 2
Komputer desktop
mobil
Unduh DIVI Sekarang!!!
Langkah umum
Nonaktifkan navigasi tetap
Akses opsi tema Divi
Kita akan mulai dengan beberapa langkah umum. Langkah-langkah ini sama untuk kedua contoh dan diperlukan untuk mencapai hasil yang diinginkan.
Jika Anda berencana untuk menggunakan menu lengket yang diperluas di bagian bawah halaman Anda, Anda mungkin ingin meninggalkan bilah menu utama di bagian atas.
Baca juga: Cara Membuat Hamparan Gambar Khusus di Divi
Untuk ini, Anda harus pergi Divi >> Opsi Tema dari dasbor WordPress
Nonaktifkan navigasi tetap
Di sana Anda harus menonaktifkan “Bilah Navigasi Tetap” untuk memastikan tidak ada ruang tersisa di bagian atas halaman Anda.
- Bilah Navigasi Tetap: Dinonaktifkan
Sembunyikan bilah menu utama di halaman
Buka pengaturan halaman
Buka halaman tempat Anda ingin menambahkan menu tempel yang dapat diperluas dan buka pengaturan halaman.
Tambahkan CSS khusus
Sembunyikan menu utama dengan menambahkan baris kode CSS berikut ke halaman Anda.
#main-header {
display: none;
}
Tambahkan bagian baru di akhir halaman
Apa pun contoh yang ingin Anda buat ulang, beberapa langkah dasarnya tetap sama. Langkah pertama adalah menambahkan bagian reguler di bagian bawah halaman.
jarak
Buka pengaturan bagian dan ubah pengaturan berikut di tab Mendesain di bawah opsi Jarak.
- Padding (Atas dan Bawah): 0px
Tambahkan baris baru
Struktur kolom
Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan berikut, di tab Mendesain di bawah opsi Perekat
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 100%
jarak
Kemudian hapus semua padding atas dan bawah secara default, di bawah opsi Jarak.
- Padding (Atas dan Bawah): 0px
Elemen utama
Kami mengizinkan seluruh baris untuk menempel di bagian bawah halaman kami dengan menambahkan dua baris kode CSS sederhana ke elemen baris utama.
bottom: 0px;
position: fixed;
Z-indeks
Dan kami akan memastikan baris (dan modul Teks yang akan kami tambahkan pada langkah selanjutnya) tetap berada di atas segalanya isi halaman dengan meningkatkan indeks Z, Perluas opsi Posisi.
- Z-indeks: 99
Tambahkan modul Kode ke kolom
Tambahkan kode CSS di antara tag gaya
Bagian terakhir dari langkah umum adalah menambahkan modul Kode ke baris baru. Kode CSS yang kami tambahkan dalam modul Kode ini akan membantu kami mencapai efek terbuka saat mengarahkan kursor.
Lihat juga: Cara Membuat Menu Roda Pemintal saat Melayang di Divi
Rekatkan baris kode CSS berikut ke dalam modul:
<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>
Contoh desain #1
Tambahkan modul Teks ke kolom
Tambahkan konten
Sekarang setelah kita melalui semua langkah, kita dapat mulai berfokus pada dua contoh desain yang berbeda, dimulai dengan yang pertama!
Tambahkan modul Teks ke kolom baris Anda. Di daerah isi, kami menggunakan gaya paragraf untuk menampilkan teks '≡Menu'.
Kami kemudian menempatkan semua item menu dalam daftar yang tidak berurutan. Kami juga akan menambahkan tautan ke setiap judul halaman satu per satu.
Warna latar belakang default
Buka pengaturan latar belakang modul dan ubah warna latar belakang.
- Latar belakang: #ffffff
Warna latar belakang saat melayang
Ubah warna latar belakang ini saat melayang.
- Latar Belakang (Hover): rgba(255,255,255,0.83)
Latar belakang gradien
Dan juga menambahkan latar belakang gradien default.
- Warna kiri: rgba(255,255,255,0)
- Warna kanan: #ffffff
- Posisi kanan: 60%
Pengaturan teks default
Lanjutkan dengan membuka tab Mendesain dan mengubah pengaturan teks.
- Font Teks: Khand
- Berat Huruf: Tebal
- Warna Teks: #021827
- Ukuran Teks: 3vh
- Orientasi: Pusat
Arahkan pengaturan teks
Ubah beberapa pengaturan teks hover.
- Warna Teks (Arahkan: rgba(255,255,255,0)
- Ukuran Teks (Hover): 0vh
Pengaturan teks tautan
Selanjutnya, buka pengaturan teks tautan dan ubah warna teks tautan.
- Warna Teks Tautan: #000000
Daftar Default (Desktop)
Beralih ke pengaturan teks daftar default dan sesuaikan sesuai keinginan. Pastikan Anda menggunakan '0px' untuk ukuran teks dalam status default.
- Font Daftar Tidak Terurut: Khand
- Daftar Gaya Font: TT
- Daftar Perataan Teks: terpusat
- Warna Teks Tidak Terurut: rgba(255,255,255,0)
- Ukuran Teks Daftar Tidak Terurut: 0px
- Berat Teks Daftar: 0em
- Posisi Gaya Daftar Tidak Terurut: Di dalam
Arahkan kursor ke pengaturan daftar
Kemudian ubah beberapa nilai pada hover untuk memungkinkan item menu muncul.
- Daftar Warna Teks (Hover): #000000
- Ukuran Teks Daftar Tidak Terurut (Arahkan Arahkan kursor): 2vh
- Tinggi Teks Daftar Tidak Terurut (Hover): 2,1 em
Spasi Default (Desktop)
Lalu pergi ke pengaturan spasi (opsi Jarak) dan beri bentuk pada modul Text.
- Margin (Kiri dan Kanan): 45vw (Desktop), 39vw (Tablet), 33vw (Telepon)
- Padding (Atas dan Bawah): 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)
Jarak Arahkan
Ubah nilai yang sama ini saat mengarahkan kursor.
- Margin (Kiri dan Kanan): 14vw
- Padding (Atas dan Bawah): 8vw
Batas Default (Desktop)
Pergi ke pengaturan perbatasan dan pastikan setiap sudut membulat memiliki nilai '0px'.
Perbatasan pada hover
Aktifkan opsi hover di sudut membulat dan ubah nilainya ke kiri atas dan kanan atas.
- Kiri atas: 50vw
- Kanan atas: 50vw
Kotak bayangan
Lanjutkan dengan memberi kedalaman pada modul menggunakan bayangan kotak. Ini akan memastikan bahwa menu tidak luput dari perhatian pada halaman.
- Kekuatan Buram Bayangan Kotak: 1000px
- Warna Bayangan: rgba (0,0,0,0.68)
Kelas CSS
Kami juga menambahkan kelas CSS ke modul.
- Kelas CSS: dt-menu
Transisi
Terakhir, kurangi durasi transisi dalam pengaturan transisi.
- Durasi Transisi: 100ms
Contoh desain #2
Tambahkan modul Teks ke kolom
Tambahkan konten
Mari kita beralih ke contoh kedua! Disini kami akan menambahkan lagi '≡Menu' menggunakan gaya teks paragraf dan item menu menggunakan daftar tidak berurutan. Kami juga akan menambahkan tautan ke setiap item menu satu per satu.
Warna latar belakang default (Desktop)
Buka pengaturan latar belakang dan ubah warna latar belakang.
- Latar belakang: #ffffff
Warna latar belakang saat melayang
Ubah warna latar belakang saat melayang.
- Latar Belakang (Arahkan Arahkan kursor): #f71535
Pengaturan Teks Default (Desktop)
Lalu pergi ke tab Mendesain dan membuat beberapa perubahan pada tampilan teks.
- Font Teks: Khand
- Berat Huruf: Tebal
- Warna Teks: #021827
- Ukuran Teks: 3vh
Arahkan pengaturan teks
Ubah pengaturan ini saat mengarahkan kursor.
- Warna Teks (Hover): rgba(255,255,255,0)
- Ukuran Teks (Hover): 0vh
Pengaturan teks tautan
Buka pengaturan teks dan ubah warna teks tautan.
- Warna Teks Tautan: #ffffff
Pengaturan teks daftar default
Juga ubah pengaturan desain item daftar yang tidak diurutkan.
- Font Daftar Tidak Terurut: Khand
- Gaya Font Daftar Tidak Terurut: TT
- Daftar Perataan Teks: tengah
- Warna Teks Daftar Tidak Terurut: rgba(255,255,255,0)
- Daftar Ukuran Teks: 0px
- Tinggi Baris Daftar Tidak Terurut: 0em
- Posisi Gaya Daftar Tidak Terurut: Di dalam
Arahkan kursor ke pengaturan daftar
Dan ubah beberapa nilai ini saat mengarahkan kursor.
- Warna Teks Daftar Tidak Terurut: #ffffff
- Daftar Ukuran Teks: 2vh
- Tinggi Baris Daftar Tidak Terurut: 2,1 em
Spasi Default (Desktop)
Lalu pergi ke pengaturan spasi dan beri modul beberapa ruang.
- Margin (Kanan): 88 vw (Desktop dan Tablet), 71 vw (Telepon)
- Padding (Atas): 6 vw (Desktop)), 10 vw (Tablet), 18 vw (Telepon)
- Padding (Bawah): 4 vw (Desktop), 10 vw (Tablet), 12 vw (Telepon)
- Padding Kiri: 1vw
Jarak Arahkan
Ubah nilai saat melayang.
- Margin (Kanan): 59vw
- Padding: (Atas)13vw, (Bawah)8vw, (Kiri)1vw, (Kanan)13vw
Perbatasan
Dan untuk membuat desain seperempat lingkaran ini, kita akan mengubah batas kanan atas di pengaturan batas.
- Kanan atas: 50vw
Kotak bayangan
Kami juga akan menambahkan bayangan kotak untuk membuat kedalaman pada halaman.
- Kekuatan Buram Bayangan Kotak: 1000px
- Warna Bayangan: rgba (0,0,0,0.68)
Kelas CSS
Selanjutnya kita akan menambahkan kelas CSS di tab Advanced.
- Kelas CSS: dt-menu
Transisi
Dan kurangi durasi transisi di tab Advanced untuk membuat transisi cepat.
- Durasi Transisi: 100ms
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
Contoh #1
Biro
mobil
Unduh DIVI Sekarang!!!
Contoh #2
Komputer desktop
mobil
Unduh DIVI Sekarang!!!
Kesimpulan
Dalam artikel ini, kami menunjukkan cara membuat menu lengket yang dapat diperluas menggunakan dari Paket Tata Letak Mekanik Divi. Kami telah membahas dua contoh desain berbeda yang dapat Anda modifikasi dan gunakan pada semua jenis situs jaringan yang Anda buat!
Kami berharap tutorial ini akan menginspirasi Anda untuk proyek Anda berikutnya. Divi. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca 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.
...
