Cara Membuat Bagian Arahkan Arah dengan Pengaturan Ukuran & Luapan Baru Divi

Menggunakan opsi ukuran baru Divi yang dapat diseret tidak hanya membantu Anda membuat situs web yang sangat responsif, tetapi juga dapat sangat membantu menciptakan interaksi yang unik. Dengan bermain-main dengan opsi ini, Anda dapat menyesuaikan situs web apa pun yang Anda buat dan menyesuaikan struktur halaman Anda untuk memenuhi tren desain saat ini.

Dalam tutorial ini, secara khusus, kami akan menunjukkan cara membuat bagian hover dengan Divi. Kami akan membuat halaman baru dan mengizinkan semua judul bagian untuk ditampilkan, tetapi setiap bagian hanya akan terbuka saat mengarahkan kursor (desktop) atau saat diklik (seluler). Segera setelah Anda membuka bagian lain, bagian yang Anda buka sebelumnya akan ditutup secara otomatis. Kami akan memulai dengan menjelaskan pendekatan umum dan melanjutkan dengan membuat ulang contoh yang dapat Anda lihat di bawah ini dari awal. Kami harap tutorial ini mendorong Anda untuk membuat desain bagian hover Anda sendiri juga!

Mari kita lakukan!

Pratinjau

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

Desktop

Seluler

Unduh Tata Letak Bagian Arahkan secara GRATIS

Untuk meletakkan tangan Anda pada tata letak bagian hover gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

Mendekati

Sebelum kita masuk ke tutorial yang sebenarnya, kita akan membahas teknik yang digunakan untuk membuat bagian hover. Anda dapat menerapkan teknik ini ke semua jenis situs web yang Anda buat, dengan gaya desain apa pun.

1. Tambahkan bagian pertama ke halaman Anda

Mari kita asumsikan Anda memulai desain baru di halaman baru. Hal pertama yang harus Anda lakukan adalah menambahkan bagian reguler baru ke dalamnya.

2. Tambahkan baris baru yang menyertakan judul bagian

Kemudian, Anda dapat melanjutkan dengan menambahkan baris baru dengan Modul Teks yang menyertakan judul bagian Anda. Anda juga dapat menambahkan modul pembagi dan sesuatu yang menunjukkan bahwa baris meluas saat diarahkan atau disentuh (lihat contoh di pratinjau posting ini). Sangat penting untuk memisahkan judul bagian dari konten bagian lainnya, jadi pastikan Anda meninggalkan spasi yang cukup di antara judul bagian dan apa pun yang muncul berikutnya.

3. Sempurnakan sisa konten bagian (tambahkan sebanyak mungkin baris dan modul sesuai keinginan)

Elemen desain yang mengikuti judul bagian sepenuhnya terserah Anda. Anda dapat membuat bagian sepanjang atau sesingkat yang Anda inginkan dan menggunakan gaya desain apa pun.

4. Ubah default dan arahkan ketinggian maksimum bagian

Setelah Anda selesai menyempurnakan bagian dan semua elemen desain di dalamnya, saatnya untuk membuat efek hover. Tinggi default bagian Anda dimaksudkan agar sesuai dengan judul bagian saja. Saat mengarahkan kursor, bagian tersebut akan mengambil kembali ukuran awalnya.

5. Sembunyikan Overflow Vertikal

Bagian penting lainnya dari teknik ini adalah menyembunyikan luapan vertikal. Setelah Anda menetapkan tinggi maksimum default ke bagian Anda yang lebih kecil dari tinggi awal bagian, luapan akan dibuat. Untuk memastikan luapan tidak muncul, Anda harus memastikan luapan disembunyikan di pengaturan visibilitas bagian.

5. Ulangi langkah untuk semua bagian di halaman

Ulangi langkah yang sama untuk semua bagian di halaman Anda untuk menciptakan pengalaman pengguna yang jelas yang akan dihargai oleh pengunjung Anda.

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Warna Latar Default

Sekarang kita telah melalui pendekatan posting ini, saatnya untuk mulai menempatkan sesuatu ke dalam tindakan! Tambahkan bagian reguler pertama ke halaman baru di situs WordPress Anda dan buka pengaturan bagian. Ubah warna latar belakang default bagian Anda menjadi warna pilihan Anda.

• Warna Latar Belakang: #000000

Arahkan Warna Latar Belakang

Ubah warna latar belakang ini saat melayang.

• Warna Latar Belakang: #ffffff

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama ke bagian Anda menggunakan struktur kolom berikut:

Tambahkan Modul Teks

Tambahkan Konten H2

Tambahkan Modul Teks ke baris baru Anda berikutnya. Tambahkan beberapa salinan H2 bersama dengan simbol '▼' yang menunjukkan sesuatu akan datang berikutnya.

Pengaturan Teks H2

Pindah ke tab desain modul dan ubah pengaturan teks H2.

• Judul 2 Font: Trebuchet
• Judul 2 Berat Font: Ultra Tebal
• Judul 2 Perataan Teks: Kiri
• Judul 2 Warna Teks: #ff0f3b
• Judul 2 Ukuran Teks: 100px (Desktop), 80px (Tablet), 60px (Telepon)
• Spasi Judul 2 Huruf: -5px

Tambahkan Modul Pembagi

Visibilitas

Modul kedua dan terakhir yang kita butuhkan di baris ini adalah Modul Pembagi. Pastikan Anda mengaktifkan opsi 'Tampilkan Pembagi' di pengaturan visibilitas.

• Tampilkan Pembagi: Ya

Warna

Kemudian, lanjutkan ke tab desain dan ubah warna pembagi.

• Warna: #ff0f3b

Perekat

Ubah juga pengaturan ukuran modul.

• Berat Pembagi: 2px
• Lebar: 14%

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya! Di sinilah Anda harus menempatkan semua konten yang ingin Anda tampilkan setelah mengarahkan kursor (desktop) atau mengklik (tablet dan seluler). Kami menggunakan struktur kolom berikut, tetapi perhatikan bahwa Anda dapat menambahkan baris dan modul sebanyak yang Anda inginkan dan menatanya sesuai kebutuhan Anda:

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Tempatkan Modul Teks di kolom pertama dengan beberapa konten pilihan Anda.

Pengaturan Teks

Buka tab desain Modul Teks dan ubah orientasi teks.

• Orientasi Teks: Justify

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Tambahkan Modul Teks ke kolom kedua juga dengan beberapa konten pilihan Anda.

Pengaturan Teks

Sekali lagi, ubah orientasi teks dalam pengaturan teks modul.

• Orientasi Teks: Justify

Tambahkan Pengaturan Ukuran ke Bagian

Ukuran Default

Setelah Anda menyelesaikan bagian Anda, saatnya untuk membuat efek hover terjadi. Buka pengaturan bagian dan ubah tinggi maksimum di berbagai ukuran layar:

• Tinggi Maks: 300px (Desktop), 280px (Tablet), 260px (Ponsel)

Arahkan Ukuran

Aktifkan opsi hover pada ketinggian maksimal juga dan tambahkan nilai yang cukup tinggi untuk mencakup semua elemen di berbagai ukuran layar. Nilai ini memastikan semua elemen Anda muncul tanpa melebihi ukuran awal wadah bagian.

• Tinggi Maks: 5000px

Luapan Vertikal

Kemudian, buka tab lanjutan dari bagian tersebut dan ubah luapan vertikal. Ini akan menyembunyikan semua konten yang melebihi wadah bagian.

• Overflow Vertikal: Tersembunyi

Transisi

Untuk membuat transisi yang mulus, kami juga mengubah pengaturan transisi di tab lanjutan.

• Durasi Transisi: 800ms
• Penundaan Transisi: 500ms

Klon Seluruh Bagian sebanyak yang Diinginkan

Setelah Anda selesai membuat bagian hover pertama, Anda dapat mengkloningnya sebanyak yang Anda mau.

Ubah Judul Bagian

Tentu saja, Anda ingin mengubah judul bagian duplikat.

Ubah Warna Teks H2

Untuk membuat beberapa variasi dalam desain, kami juga akan mengubah warna teks dari modul yang disorot di layar cetak di bawah ini.

• Judul 2 Warna Teks: #c4c4c4

Ubah Warna Pembagi

Bersama dengan warna pembagi yang menyertai Modul Teks.

• Warna: #c4c4c4

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 kreatif menggunakan opsi ukuran draggable baru Divi untuk membuat interaksi unik, menggunakan bagian hover, di situs web apa pun yang Anda buat. Kami memulai dengan menjelaskan pendekatannya dan dilanjutkan dengan membuat ulang contoh desain dari awal. Anda juga dapat mengunduh file JSON secara gratis! 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.