Mengetahui cara memodifikasi gambar saat mengarahkan kursor dapat berguna untuk semua jenis situs jaringan sedang Anda kerjakan. Juga, ini membantu Anda menambahkan interaksi halus ke halaman. Anda dapat, misalnya, menggunakannya untuk memberikan perspektif tambahan pada testimonial, halaman, dan halaman tim.
Dengan opsi arahkan kursor baru dari Divi, Anda dapat mengedit gambar saat mengarahkan kursor hanya menggunakan opsi bawaan. Dengan menggabungkan latar belakang kolom dan filter opacity, Anda akan sampai di sana dalam waktu singkat.
Mari kita pergi!
penelitian
Sebelum mempelajari tutorial, mari kita lihat empat contoh yang akan kita buat ulang dari awal.
Langkah umum
Tambahkan bagian baru
Di bagian pertama tutorial ini, kami akan mengambil beberapa langkah umum. Langkah-langkah umum ini akan membantu kita menghemat waktu ketika kita berfokus pada tiga contoh pertama. Buka halaman baru atau yang sudah ada dan tambahkan bagian biasa padanya.
Tambahkan baris baru
Struktur kolom
Kemudian tambahkan baris baru menggunakan struktur kolom berikut:
Kolom 1 Gambar latar belakang
Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan gambar latar belakang ke kolom pertama. Pilih gambar yang ingin Anda terbangi.
- Kolom 1 Gambar latar Ulangi: Tanpa pengulangan
Tambahkan gambar ke kolom 1
Unggah gambar
Lanjutkan dengan menambahkan modul gambar ke kolom pertama dan muat gambar yang ingin Anda munculkan sebelum melayang.
Tambahkan modul teks judul ke kolom 2
Tambahkan konten
Di kolom kedua, pertama-tama kita memerlukan judul Modul Teks. Silakan tambahkan beberapa isi H3.
Pengaturan Teks Header
Lalu pergi ke pengaturan teks judul dan buat beberapa perubahan.
- Judul 3 Font: Baloo Tamma
- Judul 3 Warna teks: # eda96a
- Judul 3 Ukuran Teks: 100 piksel (desktop), 70 piksel (tablet), 50 piksel (ponsel)
- Judul Spasi 3 Surat: -4px
- Judul 3 Text Shadow Horizontal Length: 0.04em
- Judul 3 Text Shadow Vertical Length: 0.04em
- Judul 3 Warna Bayangan teks: rgba (0,0,0,0,6)
jarak
Terakhir, tambahkan margin atas dalam pengaturan spasi.
- Margin teratas: 50 (desktop), 50px (tablet dan telepon)
Tambahkan modul divisi ke kolom 2
Tampilkan pembagi
Tambahkan modul pemisahan tepat di bawah judul Modul Teks di kolom 2.
- Show Divider: Ya
Warna separator
Ubah warna pembagi itu.
- Warna separator: # e25300
mode
Dan pilih gaya pemisahan lain dalam pengaturan gaya.
- Gaya pemisahan: bertitik
perekat
Juga menambah berat pembagi dalam parameter ukuran.
- Berat pemisah: 3px
Tambahkan modul teks isi ke kolom 2
Tambahkan konten
Mari beralih ke modul terakhir! Tambahkan isi modul teks ke kolom kedua dengan a isi pilihan.
Pengaturan teks
Ubah pengaturan teks nanti.
- Ukuran teks: 16px
- Tinggi baris teks: 2.3em
- Orientasi teks: Membenarkan
Klon bagian dua kali
Setelah Anda menyelesaikan semua langkah umum, gandakan bagian yang telah Anda buat. Sekarang kita akan memiliki bagian terpisah untuk masing-masing dari tiga contoh pertama.
Buat contoh # 1
Terapkan pengaturan tambahan ke modul gambar
Keburaman bawaan
Mari mulai membuat contoh pertama! Satu-satunya hal yang akan kita lakukan di sini adalah membuat transisi hover, tanpa efek tambahan. Untuk melakukan ini, buka modul Gambar dan buka pengaturan filter. Pastikan nilai opacity default adalah 100%.
- Opacity: 100%
Arahkan kursor ke atas opasitas
Ubah opasitas saat melayang.
- Opacity: 0%
Transisi
Akhirnya, buat transisi yang mulus dengan meningkatkan durasi transisi.
- Durasi transisi: 1200ms
Buat contoh # 2
Terapkan pengaturan tambahan ke modul gambar
Jarak standar
Mari beralih ke contoh kedua! Buka modul gambar di kolom 1 dan pastikan tidak ada isian kustom default.
Jarak stasioner
Lanjutkan dengan menambahkan sedikit margin hover bawah untuk memungkinkan gambar hover bertambah besar.
- Lapisan bawah: 100px
Kotak bayangan
Kami juga menambahkan bayangan kotak default yang akan hilang pada rollover.
- Bayangan kotak, posisi horizontal: -55px
- Posisi Vertikal Box Shadow: -50px
- Kekuatan propagasi bayangan kotak: -10px
- Warna Bayangan: # eda96a
Keburaman bawaan
Lalu pergi ke pengaturan filter dan pastikan opacity default adalah 100%.
- Opacity: 100%
Arahkan kursor ke atas opasitas
Hapus opasitas mod hover. Ini akan memungkinkan latar belakang kolom untuk ditampilkan dan menciptakan efek "hover image".
- Opacity: 0%
Transisi
Akhirnya, tambah durasi transisi dalam parameter transisi modul Gambar.
- Durasi transisi: 1200ms
Buat contoh 3
Tambahkan latar belakang gradien ke kolom 1
Untuk contoh ketiga, kita mulai dengan membuka pengaturan baris dan menambahkan latar belakang gradien radial ke kolom pertama. Ini akan memberi gambar yang melayang bentuk melingkar.
- Warna 1: rgba (43,135,218,0)
- Warna 2: #ffffff
- Kolom 1 Jenis gradien: Radial
- Kolom 1 Arah Radial: Tengah
- Kolom 1 Posisi Awal: 60%
- Kolom 1 Posisi Akhir: 60%
Terapkan pengaturan tambahan ke modul gambar
Keburaman bawaan
Lanjutkan dengan membuka modul gambar kolom 1 dan memastikan opacity default adalah 100%.
- Opacity: 100%
Arahkan kursor ke atas opasitas
Hapus opacity flyover untuk mengungkapkan latar belakang kolom.
- Opacity: 0%
Buat contoh # 4
Tambahkan baris baru
Struktur kolom
Pada contoh terakhir! Di sini kita membutuhkan baris baru dengan 6 kolom.
Kolom 1 Gambar latar belakang
Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan gambar latar belakang yang ingin Anda arahkan sebagai gambar latar belakang untuk kolom 1.
- Kolom 1 Gambar latar Ulangi: Tanpa pengulangan
Ulangi untuk semua kolom online
Ulangi langkah sebelumnya untuk setiap kolom di baris Anda.
perekat
Kemudian, akses parameter ukuran untuk baris dan hapus celah di antara kolom.
- Jadikan garis ini lebar penuh: Ya
- Gunakan lebar selokan khusus: 1
Tambahkan modul gambar ke kolom 1
Unggah gambar
Lanjutkan dengan menambahkan modul gambar ke kolom pertama dan mengunggah gambar yang ingin Anda tampilkan secara default.
Keburaman bawaan
Pastikan opacity default modul ini adalah 100%.
- Opacity: 100%
Arahkan kursor ke atas opasitas
Dan hapus opasitas saat mengarahkan kursor untuk memungkinkan latar belakang kolom ditampilkan.
- Opacity: 0%
Transisi
Tambah durasi transisi untuk transisi yang mulus.
- Durasi transisi: 800ms
Clone Image 3 module sekali dan letakkan duplikat di kolom yang tersisa
Setelah Anda selesai mengedit modul gambar di kolom 1, Anda dapat mengkloningnya dan menempatkan duplikatnya di kolom yang tersisa. Pastikan untuk mengubah gambarnya juga.
final pikiran
Mengubah gambar hover dapat membantu membawa interaksi ekstra itu ke bagian testimonial, tentang halaman, dan halaman tim.
Dalam tutorial ini, kami menunjukkan kepada Anda cara mudah untuk mendapatkan berbagai jenis gambar saat mengarahkan kursor hanya menggunakan opsi bawaan dari Divi ! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah!
