Bukan rahasia lagi bahwa halaman "Tentang Kami" sangat bagus dalam mengarahkan klik ke halaman Anda situs web. Jenis halaman ini juga akan menekankan bagian manusiawi dari bisnis di baliknya situs jaringan. Mengetahui hal ini, kami menyadari bahwa penting untuk memperhatikan bagaimana kami menyusun halaman, jenis informasi apa yang kami bagikan, dan bagaimana kami menciptakan interaksi.
Salah satu hal yang dapat Anda lakukan untuk meningkatkan pengalaman halaman adalah menyediakan bagian anggota tim yang menempatkan karyawan Anda dalam sorotan. Selain itu, Anda dapat menambahkan efek hover biologis ke foto anggota tim hanya menggunakan opsi bawaan Divi.
Ini akan memungkinkan Anda untuk menghemat ruang pada halaman yang sedang Anda kerjakan dan membuat interaksi hover antara Anda dan Anda pengunjung.
Dalam tutorial ini, kami akan menunjukkan kepada Anda langkah demi langkah cara menuju ke sana. Setelah Anda mendapatkan pendekatannya, Anda akan dapat menyesuaikan gaya desain agar sesuai dengan kebutuhan Anda.
Mari kita pergi!
penelitian
Sebelum kita menyelami tutorial, mari kita lihat hasilnya pada ukuran layar yang berbeda.
Biro
mobil
Mari kita mulai menciptakan kembali
Tambahkan bagian baru
jarak
Buat halaman baru atau buka yang sudah ada dan tambahkan bagian baru menggunakan nilai isian kustom berikut:
- Padding terbaik: 100px
- Lapisan bawah: 100px
Tambahkan baris 1
Struktur kolom
Setelah Anda selesai menambahkan isian kustom ke bagian Anda, Anda dapat menutup pengaturan bagian dan menambahkan baris baru menggunakan satu kolom.
Tambahkan modul teks
Tambahkan konten H2
Tambahkan judul Modul Teks ke kolom dengan ukuran pilihan H2.
Pengaturan teks H2
Lalu pergi ke pengaturan teks H2 dan buat beberapa perubahan pada tampilan salinan.
- Tajuk 2 Font: Cinzel
- Judul 2 Gaya Huruf: Huruf Kecil
- Judul 2 Perataan teks: tengah
- Judul 2 Ukuran Teks: 70px
Tambahkan modul divisi
jarak penglihatan
Lanjutkan menambahkan modul pemisahan baru tepat di bawah judul Modul Teks.
- Show Divider: Ya
Warna separator
Buka tab Desain, buka pengaturan warna dan ubah warna pembatas Anda sesuai:
- Warna separator: # 333333
perekat
Kemudian kita akan mengurangi ukuran pembagi dan pusatnya.
- Lebar: 26%
- Penyelarasan modul: pusat
Tambahkan baris 2
Struktur kolom
Tepat di bawah baris sebelumnya yang Anda tambahkan, lanjutkan dan tambahkan baris baru menggunakan tiga kolom dengan ukuran yang sama.
perekat
Tanpa menambahkan lebih banyak modul, buka parameter garis dan buat beberapa perubahan pada parameter ukuran.
- Gunakan lebar khusus: Ya
- Unit: PX
- Lebar khusus: 2000px
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Menyamakan ketinggian kolom: Ya
jarak
Lalu pergi ke pengaturan jarak dan tambahkan margin kustom dan nilai padding.
- Margin atas: 50px
- Margin bawah: 50px
- Top Padding: 10px
- Lapisan bawah: 10px
- Padding Kiri: 5px
- Jok Kanan: 5px
- Kolom 1, 2 dan 3 Padding di sebelah kiri: 5px
- Kolom 1, 2 dan 3 Padding di sebelah kanan: 5px
Kotak bayangan
Kami juga memberikan garis kami sedikit lebih dalam dengan menambahkan bayangan kotak dengan parameter berikut:
- Box Shadow Blur Force: 80px
- Kekuatan propagasi bayangan kotak: -14px
- Warna bayangan: rgba (0,0,0,0,3)
Tambahkan modul gambar ke kolom 1
Muat gambar ke dalam modul gambar
Saatnya mulai menambahkan modul! Untuk mencapai efek hover biologis, kita membutuhkan dua modul secara total. modul gambar dan modul uraian. Modul Gambar akan berisi gambar anggota tim yang ingin Anda presentasikan.
Mod Blurb, sementara itu, akan digunakan untuk menambahkan ikon di pojok kiri bawah dan biografi hover. Tambahkan modul gambar ke kolom pertama menggunakan gambar berukuran persegi.
filter
Desain yang kami buat seluruhnya dalam skala abu-abu. Untuk menambahkan bayangan abu-abu ini ke gambar kita, buka pengaturan filter dan hapus semua saturasi.
- Saturasi: 0%
Tambahkan modul Blurb ke kolom 1
Tambahkan konten
Lanjutkan dengan menambahkan modul Blurb baru tepat di bawah modul gambar di kolom 1. Tambahkan nama anggota tim ke kolom judul dan masukkan informasi tambahan tentang anggota tim di kotak. isi.
Pilih satu ikon
Hal berikutnya yang akan kita lakukan adalah memilih ikon pilihan yang akan ditampilkan pengunjung bahwa ada lebih dari sekedar foto.
Warna latar standar
Selanjutnya, kami akan memilih warna latar belakang transparan penuh.
- Warna latar belakang: rgba (255,255,255,0)
Warna latar pada flyover
Dan kami akan mengubah warna ini melayang.
- Warna latar belakang: rgba (255,255,255,0.88)
Pengaturan ikon default
Kami ingin ikon yang terlihat yang akan membantu pengunjung untuk memahami bahwa mereka dapat terbang di atasnya. Ubah pengaturan ikon untuk mendapatkan ikon seperti itu.
- Warna Ikon: #ffffff
- Ikon lingkaran: ya
- Warna lingkaran: # 000000
- Lokasi ikon: kiri
- Gunakan Ukuran Font Ikon: Ya
- Ukuran Font Ikon: 50px
Arahkan pengaturan ikon
Namun, kami tidak ingin ikon tersebut muncul saat mengarahkan kursor. Itulah mengapa kami menggunakan warna yang sepenuhnya transparan.
- Warna ikon: rgba (255,255,255,0)
- Warna lingkaran: rgba (255,255,255,0)
Pengaturan judul default
Lalu pergi ke pengaturan teks judul dan buat beberapa perubahan.
- Judul Polisi: Cinzel
- Font Judul: Tebal
- Judul Font Style: Small Caps
- Judul teks berwarna: # 000000
- Ukuran Judul Teks: 0px
Arahkan kursor ke pengaturan teks judul
Ubah ukuran teks dengan mengarahkan kursor.
- Ukuran Judul Teks: 30px
Pengaturan teks isi default
Juga ubah pengaturan teks isi.
- Polisi Tubuh: Buka Sans
- Teks berwarna badan: # 000000
- Ukuran teks isi: 0px
- Tinggi badan: 1.8em
Parameter tubuh pada overflight
Dan, sekali lagi, ubah ukuran tubuh teks yang melayang.
- Ukuran teks isi: 14px
Jarak standar
Terakhir, kita perlu membuat tumpang tindih antara modul Blurb dan modul gambar menggunakan margin atas negatif.
- Margin atas: -3.7vw (desktop), -9vw (tablet dan telepon)
- Margin bawah: 1.5vw (tablet), 2vw (telepon)
Jarak stasioner
Ubah margin khusus dan isi nilai dalam rollover.
- Margin atas: -11,38vw
- Top Padding: 20px
- Lapisan bawah: 20px
- Jok Kanan: 50px
Kloning dua modul dua kali dan letakkan duplikat di kolom yang tersisa.
Kita telah selesai membuat efek hover biologis pertama kita. Untuk menghemat waktu, kita cukup menggandakan dua modul di kolom 1 dua kali dan menempatkan duplikat di dua kolom yang tersisa.
Edit gambar dan konten modul Blurb
Jangan lupa untuk mengubah gambar di modul Gambar dan menyalinnya di modul Blurb untuk menyelesaikan bagian anggota tim!
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana kita melihat ukuran layar yang berbeda.
Biro
mobil
final pikiran
Di artikel ini, kami telah menunjukkan kepada Anda cara membuat efek hover biologis untuk foto anggota tim hanya menggunakan opsi bawaan Divi. Kami telah menekankan betapa pentingnya membuat halaman yang bagus karena itu adalah salah satu situs web yang paling banyak dikunjungi.
Menggunakan efek bio hover untuk foto anggota tim tidak hanya akan meningkatkan kualitas halaman Anda, tetapi juga menciptakan interaksi dengan pengunjung Anda. Jika Anda memiliki pertanyaan atau saran, pastikan untuk memberikan komentar di bagian komentar di bawah!
Halo,
Terima kasih untuk tutorial ini, sangat berguna bagi saya.
Namun, saya menghadapi 2 masalah kecil:
- latar belakang hover tidak berlaku (saya mendapat kesan bahwa itu ada di belakang gambar ...)
- flyover tidak terbuka dengan cara yang sama seperti pada contoh (teks saya tetap setinggi ikon dan tidak terbuka ke atas) yang memberikan tampilan yang bagus.
Apakah Anda punya solusi? Terima kasih
Bonne soirée
Halo,
Bisakah Anda membagikan tangkapan layar?
Halo,
Terima kasih untuk tutorial ini, ini dijelaskan dengan sangat baik.
Namun saya memiliki masalah saat mengarahkan mouse ke atas kursor saya bergetar dan tidak mengalir. Tahukah Anda apa ini karena?
merci
Halo Sal,
Tidak tahu maaf