Cara Menambahkan Efek Arahkan ke Bios Anggota Tim Di Divi

Bukan rahasia lagi bahwa tentang halaman sangat bagus untuk membuat klik-tayang di situs web Anda. Itu juga satu jenis halaman yang akan menekankan bagian manusia dari perusahaan di balik situs web. Mengetahui hal ini membuat kami sadar bahwa penting bagi kami untuk memperhatikan cara 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 tentang adalah menyediakan bagian anggota tim yang menempatkan karyawan Anda dalam sorotan. Selain itu, Anda dapat menambahkan efek bio hover ke foto anggota tim menggunakan opsi bawaan Divi saja. Ini akan memungkinkan Anda untuk menghemat ruang pada halaman yang sedang Anda kerjakan dan membuat interaksi hover antara Anda dan pengunjung Anda.

Dalam tutorial ini, kami akan menunjukkan kepada Anda langkah demi langkah bagaimana menuju ke sana. Setelah Anda mendapatkan pendekatan, Anda akan dapat menyesuaikan gaya desain dengan kebutuhan Anda sendiri.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat hasilnya pada ukuran layar yang berbeda.

Desktop

Seluler

Mari Mulai Berkreasi

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Jarak

Buat halaman baru atau buka yang sudah ada dan tambahkan bagian baru menggunakan nilai padding kustom berikut:

• Padding Atas: 100px
• Padding Bawah: 100px

Tambahkan Baris #1

Struktur Kolom

Setelah Anda selesai menambahkan padding kustom ke bagian Anda, Anda dapat menutup pengaturan bagian dan menambahkan baris baru menggunakan satu kolom saja.

Tambahkan Modul Teks

Tambahkan Konten H2

Tambahkan judul Modul Teks ke kolom dengan beberapa salinan pilihan H2.

Pengaturan Teks H2

Kemudian, buka pengaturan teks H2 dan buat beberapa perubahan pada tampilan salinan.

• Judul 2 Font: Cinzel
• Judul 2 Gaya Font: Huruf Kecil
• Judul 2 Perataan Teks: Tengah
• Judul 2 Ukuran Teks: 70px

Tambahkan Modul Pembagi

Visibilitas

Lanjutkan dengan menambahkan Modul Pembagi baru tepat di bawah judul Modul Teks.

• Tampilkan Pembagi: Ya

Warna Pembagi

Buka tab desain, buka pengaturan warna dan ubah warna pembagi Anda sesuai:

• Warna Pembagi: #333333

Perekat

Selanjutnya, kita akan memperkecil ukuran pembagi dan memusatkannya.

• Lebar: 26%
• Penyelarasan Modul: Pusat

Tambahkan Baris #2

Struktur Kolom

Tepat di bawah baris sebelumnya yang telah Anda tambahkan, lanjutkan dan tambahkan baris baru menggunakan tiga kolom berukuran sama.

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan buat beberapa penyesuaian pada pengaturan ukuran.

• Gunakan Lebar Kustom: Ya
• Satuan: PX
• Lebar Kustom: 2000px
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Kemudian, buka pengaturan spasi dan tambahkan margin kustom dan nilai padding.

• Margin Atas: 50px
• Margin Bawah: 50px
• Padding Atas: 10px
• Padding Bawah: 10px
• Padding Kiri: 5px
• Padding Kanan: 5px
• Kolom 1, 2 & 3 Padding Kiri: 5px
• Kolom 1, 2 & 3 Padding Kanan: 5px

Bayangan Kotak

Kami juga memberi baris kami sedikit kedalaman dengan menambahkan bayangan kotak ke dalamnya dengan pengaturan berikut:

• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: -14px
• Warna Bayangan: rgba(0,0,0,0.3)

Tambahkan Modul Gambar ke Kolom 1

Unggah Gambar ke Modul Gambar

Saatnya mulai menambahkan modul! Untuk mencapai efek bio hover, kita membutuhkan total dua modul; Modul Gambar dan Modul Blurb. Modul Gambar akan menyimpan gambar anggota tim yang ingin Anda tampilkan. Modul Blurb, di sisi lain, akan digunakan untuk menambahkan ikon ke sudut kiri bawah dan bio saat melayang. Tambahkan Modul Gambar ke kolom pertama menggunakan gambar berukuran persegi.

Filter

Desain yang kami buat sepenuhnya skala abu-abu. Untuk menambahkan skala abu-abu ini ke gambar kita, buka pengaturan filter dan hapus semua saturasi.

• Saturasi: 0%

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Lanjutkan dengan menambahkan Modul Blurb baru tepat di bawah Modul Gambar di kolom 1. Tambahkan nama anggota tim ke bidang judul dan masukkan beberapa info lebih lanjut tentang anggota tim di kotak konten.

Pilih Ikon

Hal berikutnya yang akan kita lakukan adalah memilih ikon pilihan yang akan menunjukkan kepada pengunjung bahwa ada lebih dari sekadar gambar.

Warna Latar Default

Kemudian, kita akan memilih seluruh warna latar belakang transparan.

• Warna Latar Belakang: rgba(255,255,255,0)

Arahkan Warna Latar Belakang

Dan kami akan mengubah warna itu saat melayang.

• Warna Latar Belakang: rgba(255,255,255,0.88)

Pengaturan Ikon Default

Kami menginginkan ikon mencolok yang akan membantu pengunjung memahami bahwa mereka dapat mengarahkan kursornya. Ubah pengaturan ikon untuk mencapai ikon seperti itu.

• Warna Ikon: #ffffff
• Ikon Lingkaran: Ya
• Warna Lingkaran: #000000
• Penempatan Ikon: Kiri
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 50px

Arahkan ke Pengaturan Ikon

Namun, kami tidak ingin ikon muncul di hover. Itu sebabnya kami akan menggunakan warna yang benar-benar transparan sebagai gantinya.

• Warna Ikon: rgba(255,255,255,0)
• Warna Lingkaran: rgba (255,255,255,0)

Pengaturan Teks Judul Default

Selanjutnya, buka pengaturan teks judul dan buat beberapa perubahan.

• Judul Font: Cinzel
• Judul Font Berat: Tebal
• Judul Font Style: Small Caps
• Warna Teks Judul: #000000
• Ukuran Teks Judul: 0px

Arahkan ke Pengaturan Teks Judul

Ubah ukuran teks saat mengarahkan kursor.

• Ukuran Teks Judul: 30px

Pengaturan Teks Tubuh Default

Ubah juga pengaturan teks isi.

• Font Tubuh: Buka Sans
• Warna Teks Tubuh: #000000
• Ukuran Teks Tubuh: 0px
• Tinggi Garis Tubuh: 1.8em

Arahkan Arahkan ke Pengaturan Teks Tubuh

Dan, sekali lagi, ubah ukuran teks isi saat mengarahkan kursor.

• Ukuran Teks Tubuh: 14px

Spasi Default

Last but not least, kita harus membuat tumpang tindih antara Modul Blurb dan Modul Gambar menggunakan margin atas negatif.

• Margin Atas: -3.7vw (Desktop), -9vw (Tablet & Ponsel)
• Margin Bawah: 1.5vw (Tablet), 2vw (Telepon)

Spasi Arahkan

Ubah margin kustom dan nilai padding saat mengarahkan kursor.

• Margin Atas: -11.38vw
• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kanan: 50px

Klon Kedua Modul Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Kami selesai membuat efek bio hover pertama kami. Untuk menghemat waktu, kita cukup mengkloning kedua modul di kolom 1 dua kali dan menempatkan duplikat di dua kolom yang tersisa.

Ubah Gambar & Isi Modul Blurb

Ingatlah untuk mengubah gambar di Modul Gambar dan salinan di Modul Blurb untuk menyelesaikan bagian anggota tim!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat efek bio hover pada hover untuk foto anggota tim menggunakan opsi bawaan Divi saja. Kami telah menyebutkan betapa pentingnya membuat halaman yang bagus, karena halaman tersebut adalah salah satu situs web halaman yang paling banyak dikunjungi. Menggunakan efek bio hover untuk foto anggota tim tidak hanya akan memungkinkan Anda membawa halaman tentang Anda ke tingkat berikutnya, tetapi juga menciptakan interaksi dengan pengunjung Anda. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!