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!