Cara Membuat Menu Slide-In Responsif dengan Pembuat Tema Divi

Saat menyiapkan situs web untuk klien Anda sendiri, Anda akan mempertimbangkan jenis tajuk apa yang akan dibuat. Yang paling sering digunakan di web adalah bilah menu horizontal di bagian atas, tetapi ada juga opsi lain, seperti menu slide-in. Menu slide-in membantu Anda membatasi ruang yang digunakan oleh header global. Daripada menampilkan semua item menu Anda langsung, Anda dapat membiarkan menu slide-in muncul ketika pengunjung Anda mengklik ikon hamburger di sudut kanan atas. Menggunakan menu slide-in membantu Anda menambahkan interaksi tambahan ke situs web Anda.

Dalam tutorial Divi kasus penggunaan hari ini, kami akan menunjukkan kepada Anda cara membuatnya menggunakan Pembuat Tema Divi, elemen Divi bawaan dan beberapa kode tambahan. Desain menu slide-in ini sangat cocok dengan Paket Tata Letak Instruktur Yoga, tetapi Anda bebas memodifikasinya agar sesuai dengan situs web apa pun yang Anda buat. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Header Global Menu Slide-In Responsif GRATIS

Untuk mendapatkan template header global menu slide-in gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Buka Divi Theme Builder & Mulai Buat Header Global

Pergi ke Divi Theme Builder

Mulailah dengan membuka Divi Theme Builder di bagian belakang situs WordPress Anda dan klik 'Tambahkan Header Global'.

Mulai Membangun Header Global

Lanjutkan dengan memilih 'Build Global Header'.

2. Buat Desain Tajuk

Pengaturan Bagian

Warna latar belakang

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan buat warna latar belakang transparan.

• Warna Latar Belakang: rgba(255,255,255,0)

Jarak

Pindah ke tab desain dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Posisi

Kemudian, kita akan memperbaiki bagian tersebut dengan membuka tab lanjutan dan mengubah pengaturan posisi.

• Posisi: Tetap
• Lokasi: Pusat Atas

Tambahkan Baris #1

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: 97%
• Lebar Maks: 100%

Jarak

Ubah pengaturan spasi berikutnya.

• Padding Atas: 1%
• Padding Bawah: 0px

Elemen Utama

Lalu, buka tab lanjutan dan tambahkan dua baris kode CSS ke elemen utama baris. Ini akan membantu kita menyelaraskan konten kolom secara vertikal di baris kita.

display: flex;
align-items: center;

Tambahkan Modul Gambar ke Kolom 1

Unggah Logo

Saatnya menambahkan modul, dimulai dengan Modul Gambar di kolom 1. Unggah logo Anda.

Tambahkan Modul Teks ke Kolom 3

Tambahkan 3 Rentang ke Kotak Konten

Kemudian, lanjutkan ke kolom ketiga dan tambahkan Modul Teks. Kami akan menggunakan tab teks Modul Teks untuk menambahkan tiga rentang HTML dengan kelas khusus yang ditetapkan untuknya. Nanti di tutorial, kita akan menggunakan rentang ini untuk membuat ikon hamburger interaktif kita.

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Warna latar belakang

Ubah warna latar belakang modul selanjutnya.

• Warna Latar Belakang: rgba(0,0,0,0.04)

Pengaturan Teks

Kemudian, pindah ke tab desain dan hapus tinggi baris teks. Ini akan membantu kami memiliki kontrol penuh atas rentang yang telah kami tambahkan.

• Tinggi Baris Teks: 0em

Perekat

Selanjutnya, kita akan mengubah pengaturan ukuran modul.

• Lebar: 120px
• Penyelarasan Modul: Kanan

Jarak

Dan kita akan menyelesaikan pengaturan modul dengan mengubah modul menjadi persegi menggunakan nilai padding khusus dalam pengaturan spasi.

• Padding Atas: 40px
• Padding Bawah: 60px
• Padding Kiri: 40px
• Padding kanan: 40px

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya! Kami akan menggunakan baris ini untuk mendesain seluruh menu slide-in kami. Gunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah warna latar belakang sebagai berikut:

• Warna Latar Belakang: #e7e0e2

Gambar latar belakang

Kami juga menggunakan gambar latar belakang pola. Anda dapat menemukan gambar yang telah kami gunakan di folder unduhan yang dapat Anda unduh di awal tutorial ini, tetapi jangan ragu untuk menggunakan pola latar belakang lain pilihan Anda.

• Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Ulangi

Perekat

Kemudian, lanjutkan ke tab desain dan ubah pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 20% (Desktop), 40% (Tablet), 60% (Ponsel)
• Tinggi: 100vh

Jarak

Ubah pengaturan spasi di berbagai ukuran layar juga.

• Padding Atas: 10vw (Desktop), 30vw (Tablet), 40vw (Telepon)

Berbatasan

Dan selesaikan pengaturan baris dengan menambahkan batas kiri.

• Lebar Batas Kiri: 10px
• Warna Batas Kiri: #24394a
• Gaya Batas Kiri: Ganda

Tambahkan Modul Teks ke Kolom

Tambah isi

Saatnya menambahkan item menu pertama Modul Teks! Tambahkan salinan ke kotak konten.

Tambahkan Tautan

Lanjutkan dengan menambahkan tautan yang relevan ke item menu.

• URL Tautan Modul: #

Warna latar belakang

Ubah warna latar belakang berikutnya.

• Warna Latar Belakang: rgba (216.210.212.0.35)

Pengaturan Teks

Kemudian, pindah ke tab desain dan ubah pengaturan teks sebagai berikut:

• Font Teks: Domine
• Berat Font Teks: Tebal
• Warna Teks: #000000
• Ukuran Teks: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Perataan Teks: Tengah

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa nilai spasi khusus di berbagai ukuran layar.

• Margin Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Atas: 1vw
• Padding Bawah: 1vw

Modul Teks Klon (1 Modul per Item Menu)

Setelah Anda menyelesaikan item menu pertama Modul Teks, Anda dapat mengkloningnya sebanyak yang diperlukan. Pastikan modul Anda tidak melebihi ketinggian viewport.

Ubah Konten & Tautan Modul Teks Duplikat

Ubah konten dan tautan dari setiap Modul Teks duplikat.

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Modul terakhir yang kita butuhkan di baris ini adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Tambahkan Tautan

Tambahkan tautan juga.

• URL Tautan Tombol: #

Penyelarasan

Pindah ke tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Lanjutkan dengan menata modul tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.7vw (Desktop), 1.5vw (Tablet), 2.5vw (Ponsel)
• Warna Teks Tombol: #000000
• Warna Latar Tombol: rgba(0,0,0,0)
• Warna Batas Tombol: #24394a
• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 4px

• Font Tombol: Buka Sans
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Dan selesaikan pengaturan modul dengan menambahkan nilai spasi khusus di berbagai ukuran layar.

• Margin Atas: 5vw
• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 1.8vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• Padding Kanan: 1,8vw (Desktop), 3vw (Tablet), 4vw (Telepon)

3. Tambahkan Fungsionalitas Slide-In

Tambahkan ID CSS ke Modul Teks Ikon Menu

Sekarang setelah kita memiliki semua elemen, saatnya untuk membuat efek menu slide-in yang responsif! Pertama, buka Modul Teks (berisi bentang) 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, kami akan mengizinkan baris untuk masuk.

• Kelas CSS: slide-in-menu-container

Ubah Posisi Baris #2

Kami akan memposisikan ulang baris ini juga. Perhatikan bagaimana offset horizontal cocok dengan lebar baris di berbagai ukuran layar 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 Baris Pertama

Masukkan Kode CSS

Untuk membuat efek fungsi klik dan menata bentang 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 di 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: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

Masukkan Kode JQuery

Kita perlu menambahkan beberapa JQuery untuk fungsi klik juga. Pastikan Anda menempatkan kode di antara tag skrip seperti yang Anda lihat di layar cetak di bawah ini:

jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

4. Simpan Perubahan Pembuat Tema & Lihat Hasil di Situs Web

Setelah Anda menyelesaikan semua elemen di header global Anda, satu-satunya yang tersisa untuk dilakukan adalah menyimpan semua perubahan dan melihat hasilnya di situs web Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menggunakan Pembuat Tema Divi untuk membuat menu slide-in yang responsif untuk proyek Divi Anda berikutnya. Kami telah menggabungkan yang terbaik dari elemen dan opsi bawaan Divi dengan beberapa kode fungsi klik khusus. Ini memungkinkan Anda untuk fokus merancang menu slide-in dan membiarkan kode mengambil alih bagian fungsional dari header global! Anda juga dapat mengunduh file JSON secara gratis. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.