Cara Membuat Menu Blurb di Arahkan/Klik untuk Halaman Anda dengan Divi

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang sedang berlangsung, kami akan menunjukkan kepada Anda cara membuat menu uraian menakjubkan yang mengembang setelah Anda mengarahkan atau mengkliknya. Pertama-tama kita akan memulai dengan melalui beberapa langkah umum. Kami akan melanjutkan dengan menambahkan item menu menggunakan Modul Blurb dan kami akan menyelesaikan dengan memungkinkan Anda untuk memilih antara efek hover atau klik.

Mari kita lakukan!

Pratinjau

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

Arahkan Modus

Desktop

Seluler

Klik Modus

Desktop

Seluler

1. Buat Halaman Kosong & Unggah Halaman Arahan Tamasya

Tambahkan Halaman Kosong Baru & Aktifkan Divi Builder

Hal pertama yang perlu Anda lakukan adalah membuat halaman kosong baru. Beri judul halaman Anda dan alihkan ke Divi Builder.

Unggah Halaman Arahan Tamasya

Setelah Anda mengaktifkan Divi Builder, unggah tata letak halaman arahan Paket Tata Letak Tamasya.

2. Tambahkan Bagian Reguler Baru ke Bawah Halaman

Setelah bilah menu utama disembunyikan, kita dapat mulai menambahkan menu uraian. Untuk melakukan itu, kita akan menambahkan bagian reguler baru ke bagian bawah halaman kita.

Warna latar belakang

Buka pengaturan bagian dan tambahkan warna latar belakang putih yang sedikit transparan.

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

Jarak

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

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

Bayangan Kotak Default

Tambahkan bayangan kotak ke bagian berikutnya.

• Kekuatan Buram Bayangan Kotak: 18px
• Warna Bayangan: #383838

Arahkan Bayangan Kotak

Dan ubah kekuatan bayangan kotak buram saat melayang.

• Kekuatan Buram Bayangan Kotak: 1000px

Sembunyikan Bagian Luapan & Tingkatkan Indeks Z

Kami akan menggunakan pengaturan ukuran bagian untuk membuat teknik ini berfungsi, tetapi untuk memastikan tidak ada yang melebihi wadah bagian, kami harus menyembunyikan luapan. Kami juga meningkatkan Indeks Z untuk memastikan bagian tetap berada di atas sisa halaman.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi
• Indeks Z: 9999

3. Pastikan Semua Konten Menu Bagian Dibuat Menggunakan Vw & Sesuai dengan Tinggi 100 Viewport Di Semua Ukuran Layar

Tambahkan Baris #1

Struktur Kolom

Setelah Anda menyelesaikan pengaturan bagian dasar, saatnya untuk menambahkan semua konten yang ingin Anda tampilkan di menu. Anda dapat membuat desain apa pun yang Anda inginkan menggunakan elemen desain dan opsi bawaan Divi, tetapi Anda harus memastikan semuanya sesuai dengan ketinggian '100vh' di semua ukuran layar. Untuk mencapai itu, kita akan menggunakan unit lebar area pandang selama proses pembuatan dan mengubah nilai di berbagai ukuran layar. Mulailah dengan menambahkan baris baru ke bagian Anda menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan pastikan itu memenuhi seluruh lebar bagian.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Pindah ke pengaturan spasi dan hapus semua padding atas dan bawah default.

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

Tambahkan Modul Teks ke Kolom

Tambahkan Simbol

Lanjutkan dengan menambahkan Modul Teks ke kolom baris. Tambahkan simbol '=' ke kotak konten atau gunakan simbol lain pilihan Anda.

Warna latar belakang

Ubah warna latar belakang modul selanjutnya.

• Warna Latar Belakang: #000000

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks juga.

• Font Teks: Buka Sans
• Perataan Teks: Tengah
• Warna Teks: #ffffff
• Ukuran Teks: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)
• Tinggi Baris Teks: 1em

Jarak

Kami juga menambahkan beberapa ruang ke bagian atas dan bawah modul menggunakan nilai padding khusus berikut:

• Padding Atas: 2.5vw (Desktop), 3.5vw (Tablet), 5vw (Telepon)
• Padding Bawah: 2.5vw (Desktop), 3.5vw (Tablet), 5vw (Telepon)

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris kedua menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Pindah ke pengaturan spasi dan tambahkan beberapa padding atas dan bawah kustom berikutnya.

• Padding Atas: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)
• Padding Bawah: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)

Menampilkan

Untuk memastikan kedua kolom tetap bersebelahan pada ukuran layar yang lebih kecil, kita akan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Saatnya mulai menambahkan item menu! Tambahkan Modul Blurb baru ke kolom pertama baris dan masukkan beberapa konten pilihan Anda.

Pilih Ikon

Pilih ikon berikutnya.

Tambahkan Tautan

Dan masukkan tautan halaman yang cocok dengan item menu.

• URL Tautan Judul: #

Pengaturan Ikon

Pindah ke tab desain dan ubah pengaturan ikon yang sesuai:

• Warna Ikon: #ff3314
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ikon Ukuran Font: 2vw (Desktop), 3vw (Tablet), 4vw (Telepon)

Pengaturan Teks Judul

Ubah juga pengaturan teks judul.

• Judul Font: PT Serif
• Judul Font Style: Underline
• Warna Garis Bawah Judul: #ff3314
• Perataan Teks Judul: Tengah
• Judul Teks Ukuran: 1.8vw (Desktop), 2.3vw (Tablet), 3.3vw (Telepon)

Pengaturan Teks Tubuh

Kemudian, ubah pengaturan teks isi.

• Font Tubuh: Lato
• Perataan Teks Tubuh: Tengah
• Warna Teks Tubuh: #c6c6c6
• Ukuran Teks Tubuh: 0.9vw (Desktop), 1.7vw (Tablet), 2.1vw (Telepon)
• Tinggi Garis Tubuh: 1.8em

Perekat

Dan ubah lebar modul di berbagai ukuran layar menggunakan nilai berikut:

• Lebar: 60% (Desktop), 65% (Tablet), 80% (Ponsel)

Animasi

Kami juga menghapus animasi ikon di pengaturan animasi.

• Ikon Animasi: Tanpa Animasi

Clone Blurb Module & Tempatkan Duplikat di Kolom 2

Setelah Anda menyelesaikan Modul Blurb, Anda dapat mengkloningnya dan menempatkan duplikatnya di kolom kedua dari baris.

Ubah Salin

Pastikan Anda mengubah salinannya.

Ubah Ikon

Bersama dengan ikon.

Ubah Tautan

Dan tautan halaman yang cocok dengan item menu baru.

Baris Klon Dua Kali

Setelah Anda menyelesaikan kedua Modul Blurb di baris, Anda dapat mengkloning seluruh baris dua kali.

Ubah Salin, Ikon & Tautan untuk Setiap Duplikat Blurb Secara Individual

Pastikan Anda mengubah salinan, ikon, dan tautan untuk setiap item menu uraian satu per satu.

4. Jadikan Bagian Lengket

Bawaan

Setelah Anda menambahkan semua elemen yang ingin Anda tampilkan ke bagian Anda, Anda dapat membuat bagian menempel di kiri atas halaman Anda dengan menambahkan dua baris kode CSS berikut ke elemen utama bagian:

position: fixed;
top: 0;

Arahkan kursor (Penting!)

Aktifkan opsi arahkan kursor pada elemen utama bagian dan pastikan bagian tetap lengket dalam status ini juga.

position: fixed;

5. Pilih Metode: A) Menu Saat Melayang atau B) Menu Saat Klik

A) Menu di Arahkan ke atas

Ukuran Bagian Default

Di bagian selanjutnya dari tutorial, Anda harus memilih metode yang disukai; menu di hover atau klik. Menu hover akan berperilaku seperti menu klik pada perangkat yang lebih kecil. Jika Anda memutuskan untuk memilih opsi hover, buka pengaturan bagian lagi, buka pengaturan ukuran dan ubah lebar dan tinggi menu Anda sesuai dengan itu:

• Lebar: 8vw (Desktop), 12vw (Tablet), 20vw (Telepon)
• Tinggi: 7.4vw (Desktop), 12vw (Tablet), 16vw (Telepon)

Arahkan Ukuran Bagian

Ubah nilai saat mengarahkan kursor untuk membuat menu yang diperluas.

• Lebar: 80%
• Tinggi: 100vh

B) Menu di Klik

Tambahkan Kelas CSS ke Modul Teks

Jika Anda ingin menu yang terbuka hanya dengan klik, Anda harus membuka Modul Teks yang berisi simbol menu. Buka tab lanjutan dan tambahkan kelas CSS khusus.

• Kelas CSS: buka lebar penuh

Tambahkan Kelas CSS ke Bagian

Buka pengaturan bagian berikutnya dan tambahkan kelas CSS yang berbeda.

• Kelas CSS: transformasi halus

Ukuran Bagian

Kami memodifikasi lebar dan tinggi bagian kami selanjutnya.

• Lebar: 8vw (Desktop), 12vw (Tablet), 20vw (Telepon)
• Tinggi: 7.4vw (Desktop), 12vw (Tablet), 16vw (Telepon)

Tambahkan Kode ke Halaman

Tambahkan Baris Baru ke Bawah Bagian

Sekarang, untuk membuat efek toggling, kita membutuhkan sedikit kode JQuery dan CSS. Mulailah dengan menambahkan Modul Kode ke baris baru di bagian bawah bagian Anda.

Tambahkan Modul Kode ke Bagian & Sisipkan Kode Toggle JQuery

Salin baris kode JQuery berikut dan tempel ke kotak kode:

<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});

});
</script>

Tambahkan Kode CSS Kustom ke Pengaturan Halaman

Last but not least, buka pengaturan halaman berikutnya dan tambahkan baris kode CSS berikut:

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Pratinjau

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

Arahkan Modus

Desktop

Seluler

Klik Modus

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat modul uraian indah yang mengembang saat klik/arahkan (tergantung pada preferensi Anda). Ini adalah cara yang bagus untuk menambahkan interaktivitas ekstra ke menu Anda sambil mempertahankan hasil yang responsif di semua ukuran layar. Jika Anda memiliki pertanyaan atau saran, pastikan Anda 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.