Ingin membuat menu samping geser dan responsif di Divi?
Saat membuat situs jaringan, Anda sering bertanya-tanya jenis header apa yang harus dibuat. Yang paling sering digunakan di web adalah bilah menu horizontal di bagian atas, tetapi ada juga opsi lain, seperti menu geser.
Menu geser paling sering membantu Anda membatasi ruang yang digunakan oleh header global. Sehingga Anda dapat membiarkan menu slide-out muncul saat Anda pengunjung klik ikon hamburger di sudut kanan atas.
Oleh karena itu, menggunakan menu geser membantu Anda menambahkan interaksi ekstra ke situs jaringan.
Dalam tutorial ini, karena itu kami akan menunjukkan kepada Anda cara membuatnya menggunakan Pembuat Tema Divi.
Ayo mulai!
penelitian
Sebelum kita masuk ke dalam tutorial ini, pertama-tama mari kita lihat hasil yang akan kita dapatkan.
Buka Pembuat Tema dan buat tajuk global
Buka Pembuat Tema
Untuk memulai, buka Theme Builder dari menu Divi di dashboard WordPress Anda dan klik “Add Global Header”.
Buat tajuk global
Lanjutkan dengan memilih 'Buat tajuk global'.
Buat gaya tajuk
Pengaturan bagian
Warna latar belakang
Setelah berada di editor template, Anda akan melihat sebuah bagian. Buka bagian ini dan buat warna latar belakang transparan.
- Latar belakang: rgba (255,255,255,0)
jarak
Beralih ke tab Gaya dan hapus semua margin bawah dan atas.
- Inner Margin Vertex: 0px
- Margin Internal Bawah: 0px
Pos
Selanjutnya, kita akan mengubah posisi bagian dengan masuk ke tab lanjutan dan mengubah pengaturan posisi.
- Posisi: Tetap
- Lokasi: Pusat atas
Tambahkan baris pertama
Struktur kolom
Setelah Anda menyelesaikan pengaturan bagian, tambahkan baris baru menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:
- Lebar maksimum: 97%
- Lebar maksimum: 100%
jarak
Ubah pengaturan spasi.
- Margin Internal Puncak: 1%
- Margin Internal Bawah: 0px
elemen utama
Selanjutnya, buka tab lanjutan dan tambahkan dua baris kode CSS ke elemen utama baris tersebut. Ini akan membantu kita menyelaraskan secara vertikal isi kolom di baris kita.
display: flex;
align-items: center;
Tambahkan modul Gambar ke kolom 1
Unduh logo
Saatnya menambahkan modul, dimulai dengan modul Gambar di kolom 1. Unggah logo Anda.
Tambahkan modul Teks ke kolom 3
Tambahkan 3 spasi ke area konten
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Warna latar belakang
Ubah warna latar belakang modul.
- Latar belakang: rgba (0,0,0,0.04)
Pengaturan teks
Selanjutnya, alihkan ke tab Style dan hapus tinggi baris teks. Ini akan membantu kami memiliki kontrol penuh atas cakupan yang telah kami tambahkan.
- Tinggi baris teks: 0em
perekat
Kita akan memodifikasi parameter ukuran modul.
- Lebar maksimum: 120 piksel
- Perataan teks: kanan
jarak
Dan kita akan melengkapi parameter modul dengan mengubah modul menjadi persegi. Untuk ini kami akan menggunakan nilai padding khusus dalam pengaturan spasi.
- Inner Margin Vertex: 40px
- Margin Internal Bawah: 60px
- Margin Dalam Kiri: 40px
- Margin Dalam Kanan: 40px
Tambahkan baris kedua
Struktur kolom
Baris berikutnya! Kami akan menggunakan baris ini untuk mendesain seluruh menu geser kami. Gunakan struktur kolom berikut:
Warna latar belakang
Tanpa menambahkan modul, buka pengaturan baris dan ubah warna latar belakang sebagai berikut:
- Latar belakang: #e7e0e2
Gambar latar belakang
Kami juga menggunakan gambar latar belakang berpola. Anda dapat menggunakan pola latar belakang pilihan Anda.
- Ukuran gambar latar belakang: ukuran sebenarnya
- Posisi gambar latar belakang: tengah
- Ulangi Gambar Latar Belakang: Ulangi
perekat
Selanjutnya, alihkan ke tab Style dan ubah pengaturan ukuran yang sesuai:
- Gunakan Lebar Talang Kustom: Ya
- Jarak kolom: 1
- Lebar maksimum: 20% (desktop), 40% (tablet), 60% (ponsel)
- Tinggi: 100vh
jarak
Ubah juga pengaturan spasi pada ukuran layar yang berbeda.
- Margin internal puncak: 10 vw (desktop), 30 vw (tablet), 40 vw (telepon)
Perbatasan
Dan lengkapi parameter garis dengan menambahkan batas kiri.
- Lebar batas kiri: 10px
- Warna batas kiri: #24394a
- Gaya Batas Kiri: Ganda
Tambahkan modul Teks ke kolom
Tambahkan konten
Saatnya menambahkan item menu Modul Teks pertama! Tambahkan salinannya ke dalam kotak isi.
Menambahkan link
Lanjutkan dengan menambahkan tautan yang relevan ke item menu.
- URL Tautan Modul: #
Warna latar belakang
Kemudian ubah warna latar belakang.
- Latar belakang: rgba (216,210,212,0.35)
Pengaturan teks
Selanjutnya, alihkan ke tab Style'3 dan ubah pengaturan teks sebagai berikut:
- Font Teks: Domine
- Teks Ringan Lembut: Teks Tebal
- Teks Warna Teks: #000000
- Teks Ukuran teks: 1vw (desktop), 2vw (tablet), 3vw (ponsel)
- Perataan Teks: Terpusat
jarak
Selesaikan pengaturan modul dengan menambahkan nilai spasi khusus pada ukuran layar yang berbeda.
- Margin Bawah: 1vw (desktop), 2vw (tablet), 3vw (ponsel)
- Margin internal puncak: 1vw
- Margin internal bawah: 1vw
Modul teks klon (1 modul per item menu)
Setelah Anda menyelesaikan modul teks item menu pertama, Anda dapat mengkloningnya sebanyak yang diperlukan. Pastikan modul Anda tidak melebihi ketinggian jendela.
Edit konten dan tautan modul Teks Duplikat
Ubah isi dan link dari setiap modul Duplikat Teks.
Tambahkan Modul Tombol ke Kolom
Tambahkan salinan
Modul terakhir yang kita butuhkan di baris ini adalah modul Button. Tambahkan salinan pilihan Anda.
Menambahkan link
Tambahkan juga tautan.
- URL Tautan Tombol: #
penjajaran
Beralih ke tab Gaya dan ubah perataan tombol.
- Penjajaran tombol: terpusat
Pengaturan Tombol
Lanjutkan dengan menyesuaikan modul Button sebagai berikut:
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran Teks Tombol: 0,7 vw (desktop), 1,5 vw (tablet), 2,5 vw (ponsel)
- Warna teks tombol: #000000
- Tombol latar belakang: rgba (0,0,0,0)
- Warna Batas Tombol: #24394a
- Tombol Radius Perbatasan: 0 piksel
- Jarak Huruf Tombol: 4px
- Tombol Font: Buka Tidak Ada
- Tombol Soft Light: Teks tebal
- Tombol gaya salin: TT
jarak
Dan selesaikan pengaturan modul dengan menambahkan nilai spasi khusus pada ukuran layar yang berbeda.
- Margin Atas: 5vw
- Margin internal puncak: 1vw (desktop), 2vw (tablet), 3vw (ponsel)
- Margin Dalam Bawah: 1vw (desktop), 2vw (tablet), 3vw (ponsel)
- Margin Internal Kiri: 1,8 vw (desktop), 3 vw (tablet), 4 vw (ponsel)
- Margin kanan dalam: 1,8 vw (desktop), 3 vw (tablet), 4 vw (ponsel)
Tambahkan fungsionalitas geser
Tambahkan ID CSS ke modul teks ikon menu
Sekarang setelah kita memiliki semua elemen, saatnya untuk membuat efek menu geser yang responsif! Pertama, buka modul Teks (berisi cakupan) di kolom ketiga dari baris pertama Anda dan gunakan ID CSS khusus di tab lanjutan. Kami akan menggunakan ID CSS ini untuk membuat fungsi klik dalam kode kami.
- ID CSS: slide-in-open
Tambahkan kelas CSS ke baris #2
Kemudian buka baris kedua, buka tab lanjutan dan tambahkan kelas CSS khusus. Saat diklik, garis akan meluncur.
- Kelas CSS: slide-in-menu-container
Ubah posisi baris #2
Kami juga akan memposisikan ulang baris ini. Perhatikan bagaimana offset horizontal cocok dengan lebar garis pada ukuran layar yang berbeda dalam pengaturan ukuran.
- Posisi: Absolut
- Lokasi: Kanan atas
- Offset horizontal: -20% (desktop), -40% (tablet), -60% (ponsel)
Ubah opacity baris 2
Dan bawa opacity ke 0 dalam keadaan default.
opacity: 0;
Tambahkan modul Kode ke kolom kedua dari baris pertama
Masukkan kode CSS
Untuk membuat efek fungsi klik dan memberi gaya pada tongkat ikon hamburger kita, kita memerlukan beberapa kode CSS. Tambahkan modul kode ke kolom kedua dari baris pertama Anda dan tempatkan baris kode CSS berikut di antara tag gaya, seperti yang Anda lihat pada layar cetak di bawah ini:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2{
top: 10px;
}
.line-3{
top: 20px;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
Masukkan kode JQuery
Kita juga perlu menambahkan beberapa JQuery untuk fungsi klik. Pastikan Anda tempatkan kode di antara tag skrip , seperti yang Anda lihat pada layar cetak di bawah ini:
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });
Simpan perubahan pembuat tema dan tampilkan hasil di situs web
Setelah Anda menyelesaikan semua elemen header global Anda, yang harus Anda lakukan adalah menyimpan semua perubahan dan menampilkan hasilnya di situs Anda!
penelitian
Sekarang kita telah melalui semua langkah, mari kita lihat hasilnya.
Kesimpulan
Sebagai kesimpulan, dalam artikel ini, kami menunjukkan kepada Anda cara menggunakan pembuat tema Divi untuk membuat menu geser yang responsif. Untuk ini, kami telah menggabungkan elemen dan opsi bawaan Divi terbaik dengan kode fungsi klik khusus. Jadi, ini memungkinkan Anda fokus merancang menu slide-out dan membiarkan kode menangani bagian fungsional dari header global!
Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.
