Menggunakan opsi ukuran baru yang dapat diseret dari Divi tidak hanya membantu kami membuat situs web yang sangat responsif, tetapi juga membantu kami menciptakan interaksi yang unik. Dengan menggunakan opsi ini, Anda dapat menyesuaikan apa pun situs jaringan Anda membuat dan menyesuaikan struktur halaman Anda berdasarkan tren desain saat ini.
Dalam tutorial ini, khususnya, kami akan menunjukkan kepada Anda cara membuat bagian hover dengan Divi. Kami akan membuat halaman baru dan mengizinkan tampilan semua judul bagian, tetapi setiap bagian hanya akan terbuka di hover (desktop) atau di klik (seluler). Segera setelah Anda membuka bagian lain, yang sebelumnya Anda buka akan ditutup secara otomatis. Kami akan mulai dengan menjelaskan pendekatan umum dan melanjutkan dengan membuat ulang contoh yang dapat Anda lihat di bawah dari awal. Kami harap tutorial ini mendorong Anda untuk membuat desain bagian hover Anda sendiri!
Mari kita pergi!
penelitian
Sebelum terjun ke tutorial, mari kita lihat hasilnya.
Tahap desain
Sebelum kita masuk ke tutorial, kita akan membahas teknik yang digunakan untuk membuat bagian rollover. Anda dapat menerapkan teknik ini untuk semua jenis situs jaringan Anda membangun, dengan gaya apapun.
1. Tambahkan bagian pertama ke halaman Anda
Misalkan Anda memulai desain baru di halaman baru. Hal pertama yang harus dilakukan adalah menambahkan bagian reguler baru.
2. Tambahkan baris baru termasuk judul bagian
Kemudian Anda dapat melanjutkan dengan menambahkan baris baru dengan modul teks termasuk judul bagian Anda. Anda juga dapat menambahkan modul pembagi dan sesuatu yang menunjukkan garis melebar saat diarahkan atau disentuh. Penting untuk memisahkan judul bagian dari judul lainnya isi dari bagian tersebut. Jadi pastikan untuk memberikan ruang yang cukup antara judul bagian dan semua yang berikutnya.
3. Sesuaikan sisanya isi dari bagian tersebut
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 ketinggian default dan arahkan kursor ke bagian tersebut
Setelah Anda menyempurnakan bagian dan semua elemen desainnya, inilah saatnya membuat efek rollover. Tinggi default bagian Anda dirancang untuk hanya cocok dengan judul bagian. Saat mengarahkan kursor, bagian tersebut akan kembali ke ukuran awalnya.
5. Sembunyikan overflow vertikal
Bagian penting lainnya dari teknik ini menyembunyikan luapan vertikal. Setelah Anda menyetel tinggi maksimum default untuk bagian Anda yang kurang dari tinggi bagian awal, luapan akan dibuat. Untuk memastikan bahwa luapan tidak muncul, Anda perlu memastikan bahwa luapan tersembunyi di pengaturan visibilitas bagian.
5. Ulangi langkah-langkah untuk semua bagian halaman.
Ulangi langkah yang sama untuk semua bagian halaman Anda untuk menciptakan pengalaman pengguna yang jelas seperti milik Anda pengunjung akan menghargai.
Mulai dari desain!
Tambahkan bagian baru
Warna latar standar
Sekarang kita telah mengikuti pendekatan dalam postingan ini, sekarang saatnya untuk mulai menerapkannya! Tambahkan bagian pertama reguler ke halaman baru Anda situs jaringan WordPress dan buka pengaturan bagian. Ubah warna latar belakang default bagian Anda menjadi warna pilihan Anda.
- Warna latar: # 000000
Terbang di atas warna latar belakang
Ubah warna latar belakang ini melayang.
- Warna latar: #ffffff
Tambahkan baris 1
Struktur kolom
Lanjutkan 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 salinan H2 dengan simbol '▼' saat bagian tersebut dibuka.
Pengaturan teks H2
Buka tab Desain Modul dan ubah pengaturan teks H2.
- Tajuk 2 Font: Trebuchet
- Judul 2 Berat font: Ultra Bold
- Judul 2 Penyelarasan Teks: Kiri
- Judul 2 Warna teks: #ff0f3b
- Judul 2 Ukuran Teks: 100 piksel (desktop), 80 piksel (tablet), 60 piksel (ponsel)
- Judul 2 spasi Surat: -5px
Tambahkan modul divisi
jarak penglihatan
Modul kedua dan terakhir yang kita butuhkan pada baris ini adalah modul pembagian. Pastikan untuk mengaktifkan opsi "Tampilkan pemisah" di setelan visibilitas.
- Show Divider: Ya
Warna
Lalu pergi ke tab Desain dan ubah warna pemisah.
- Warna: #ff0f3b
perekat
Juga mengubah parameter ukuran modul.
- Berat pembagi: 2px
- Lebar: 14%
Tambahkan baris 2
Struktur kolom
Baris berikutnya! Di sinilah Anda perlu meletakkan semuanya isi yang ingin Anda tampilkan setelah melayang (desktop) atau mengklik (tablet dan seluler). Kami menggunakan struktur kolom berikut, namun perhatikan bahwa Anda dapat menambahkan baris dan modul sebanyak yang Anda inginkan dan menyesuaikannya dengan kebutuhan Anda:
Tambahkan modul teks ke kolom 1
Tambahkan konten
Tempatkan modul teks di kolom pertama dengan konten pilihan Anda.
Pengaturan teks
Buka tab Desain modul teks dan ubah orientasi teks.
- Orientasi teks: Membenarkan
Tambahkan modul teks ke kolom 2
Tambahkan konten
Juga tambahkan modul teks ke kolom kedua dengan konten pilihan Anda.
Pengaturan teks
Sekali lagi, ubah orientasi teks dalam pengaturan teks modul.
- Orientasi teks: Membenarkan
Tambahkan parameter ukuran ke bagian
Ukuran standar
Setelah Anda menyelesaikan bagian Anda, inilah saatnya membuat efek hover. Buka pengaturan bagian dan ubah tinggi maksimum untuk berbagai ukuran layar:
- Tinggi maksimum: 300px (desktop), 280px (tablet), 260px (telepon)
Arahkan
Juga aktifkan opsi hover pada ketinggian maksimum dan tambahkan nilai yang cukup tinggi untuk mencakup semua elemen terlepas dari ukuran layarnya. Nilai ini memastikan bahwa semua elemen Anda muncul tanpa melebihi ukuran awal penampung bagian.
- Tinggi maksimum: 5000px
Overflow vertikal
Lalu pergi ke tab Advanced dari bagian tersebut dan ubah luapan vertikal. Ini akan menyembunyikan semua konten yang melampaui wadah bagian.
- Overflow vertikal: disembunyikan
Transisi
Untuk membuat transisi yang mulus, kami juga mengubah pengaturan transisi di tab Advanced.
- Durasi transisi: 800ms
- Waktu transisi: 500 ms
Gandakan seluruh bagian sebanyak yang Anda inginkan
Setelah Anda membuat bagian flyover pertama, Anda dapat mengkloningnya sebanyak yang Anda inginkan.
Ubah judul bagian
Tentu saja, Anda ingin mengubah judul bagian duplikat.
Ubah warna teks H2
Untuk membuat variasi dalam desain, kami juga akan mengubah warna teks dari modul yang disorot pada layar cetak di bawah ini.
- Judul 2 Warna teks: #c4c4c4
Ubah warna pemisah
Dengan warna pemisahan yang menyertai modul teks.
- Warna: #c4c4c4
penelitian
Sekarang semua langkah telah selesai, mari kita lihat hasilnya.
final pikiran
Dalam artikel ini, kami telah menunjukkan kepada Anda cara menggunakan opsi ukuran baru yang dapat diseret secara kreatif dari Divi untuk membuat interaksi unik menggunakan bagian hover di situs web mana pun yang Anda buat. Kami mulai dengan menjelaskan pendekatan dan melanjutkan dengan membuat ulang contoh desain dari awal. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, pastikan untuk memberikan komentar di bagian komentar di bawah.
