Loncat ke Konten Utama

Bagaimana cara menambahkan efek rollover dengan detail untuk gambar Divi

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Bukan rahasia lagi bahwa halaman "Siapa Kami" bagus untuk menghasilkan klik di situs web Anda. Ini juga jenis halaman ini yang akan fokus pada bagian manusia dari bisnis di balik situs web. Mengetahui hal ini, kami menyadari bahwa penting untuk memperhatikan bagaimana kami menyusun halaman, jenis informasi yang kami bagikan, dan bagaimana kami membuat interaksi.

Salah satu hal yang dapat Anda lakukan untuk meningkatkan pengalaman laman adalah menyediakan bagian anggota tim yang menempatkan karyawan Anda di pusat perhatian. Selain itu, Anda dapat menambahkan efek hover biologis ke foto anggota tim menggunakan opsi bawaan Divi saja.

Ini akan menghemat ruang Anda pada halaman yang sedang Anda kerjakan dan membuat interaksi melayang antara Anda dan pengunjung Anda.

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

Mari kita pergi!

penelitian

Sebelum terjun ke tutorial, mari kita lihat hasilnya pada berbagai ukuran layar.

Biro

divi-bio-hover efek-desktop-gif.gif

mobil

divi-bio-hover efek-mobile-gif.gif

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
  • Padding bawah: 100px

efek bio melayang

Tambahkan baris 1

Struktur kolom

Setelah Anda selesai menambahkan isian khusus ke bagian Anda, Anda dapat menutup pengaturan bagian dan menambahkan baris baru menggunakan satu kolom.

efek bio melayang

Tambahkan modul teks

Tambahkan konten H2

Tambahkan judul Modul Teks ke kolom dengan ukuran pilihan H2.

efek bio melayang

Pengaturan teks H2

Kemudian akses pengaturan teks H2 dan buat beberapa perubahan pada penampilan salinan.

  • Tajuk 2 Font: Cinzel
  • Judul 2 Gaya Huruf: Huruf Kecil
  • Judul 2 Perataan teks: tengah
  • Judul 2 Ukuran Teks: 70px

efek bio melayang

Tambahkan modul divisi

jarak penglihatan

Lanjutkan dengan menambahkan modul pemisahan baru tepat di bawah judul Modul Teks.

  • Show Divider: Ya

efek bio melayang

Warna separator

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

  • Warna separator: # 333333

efek bio melayang

perekat

Kemudian kita akan mengurangi ukuran pembagi dan menempatkannya di tengah.

Divi: Tema WordPress terbaik sepanjang masa!

lebih 554.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

  • Lebar: 26%
  • Penyelarasan modul: pusat

efek bio melayang

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.

efek bio melayang

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
  • Selokan lebar: 1
  • Menyamakan ketinggian kolom: Ya

efek bio melayang

jarak

Lalu, akses pengaturan jarak dan tambahkan margin khusus dan isi nilai.

  • Margin atas: 50px
  • Margin bawah: 50px
  • Top Padding: 10px
  • Padding 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

efek bio melayang

Kotak bayangan

Kami juga memberikan garis kami sedikit lebih dalam dengan menambahkan bayangan kotak dengan parameter berikut:

  • Box Shadow Blur Force: 80px
  • Kekuatan penyebaran bayangan kotak: -14px
  • Warna warna: rgba (0,0,0,0,3)

efek bio melayang

Tambahkan modul gambar ke kolom 1

Muat gambar ke modul gambar

Saatnya untuk mulai menambahkan modul! Untuk mencapai efek luapan biologis, kita akan membutuhkan dua modul secara total. modul gambar dan modul uraian. Modul Gambar akan berisi gambar anggota tim yang ingin Anda sajikan.

Modul Blurb, sementara itu, akan digunakan untuk menambahkan ikon di sudut kiri bawah dan biografi flyby. Tambahkan modul gambar ke kolom pertama menggunakan gambar persegi.

efek bio melayang

filter

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

  • Saturasi: 0%

efek bio melayang

Tambahkan modul Blurb ke kolom 1

Tambahkan konten

Lanjutkan menambahkan modul Blurb baru tepat di bawah modul gambar di kolom 1. Tambahkan nama anggota tim ke bidang judul dan masukkan informasi tambahan tentang anggota tim di area konten.

efek bio melayang

Pilih satu ikon

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

efek bio melayang

Warna latar standar

Kemudian kita akan memilih warna latar belakang transparan penuh.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

  • Warna latar belakang: rgba (255,255,255,0)

efek bio melayang

Warna latar pada flyover

Dan kami akan mengubah warna ini melayang.

  • Warna latar belakang: rgba (255,255,255,0.88)

efek bio melayang

Pengaturan ikon default

Kami ingin ikon yang terlihat yang akan membantu pengunjung memahami bahwa mereka dapat melewatinya. 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

efek bio melayang

Parameter ikon overflight

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

  • Warna ikon: rgba (255,255,255,0)
  • Warna lingkaran: rgba (255,255,255,0)

efek bio melayang

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

efek bio melayang

Arahkan kursor ke pengaturan teks judul

Ubah ukuran teks dengan mengarahkan kursor.

  • Ukuran Judul Teks: 30px

efek bio melayang

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

efek bio melayang

Parameter overflight tubuh

Dan, sekali lagi, ubah ukuran tubuh teks yang melayang.

  • Ukuran teks isi: 14px

efek bio melayang

Jarak standar

Terakhir, kita perlu membuat tumpang tindih antara modul Blurb dan modul gambar menggunakan margin atas negatif.

  • Margin teratas: -3.7vw (desktop), -9vw (tablet dan telepon)
  • Margin bawah: 1.5vw (tablet), 2vw (telepon)

efek bio melayang

Jarak stasioner

Ubah margin khusus dan isi nilai dalam rollover.

  • Margin atas: -11,38vw
  • Top Padding: 20px
  • Padding bawah: 20px
  • Jok Kanan: 50px

efek bio melayang

Kloning dua modul dua kali dan letakkan duplikat di kolom yang tersisa.

Kami telah selesai membuat efek hover biologis pertama kami. Untuk menghemat waktu, kita cukup mengkloning dua modul di kolom 1 dua kali dan menempatkan duplikat di dua kolom lainnya.

efek bio melayang

Ubah gambar dan konten modul Blurb

Jangan lupa untuk mengubah gambar di modul Gambar dan salinan di modul Blurb untuk menyelesaikan bagian anggota tim!

efek bio melayang

penelitian

Sekarang kita telah melalui semua langkah, mari kita lihat hasilnya pada ukuran layar yang berbeda untuk terakhir kalinya.

Biro

efek bio melayang

mobil

efek bio melayang

Pikiran terakhir

Pada artikel ini, kami menunjukkan kepada Anda cara membuat efek hover biologis untuk foto anggota tim hanya menggunakan opsi Divi bawaan. Kami menekankan betapa pentingnya membuat halaman yang bagus karena mereka adalah salah satu situs web yang paling banyak dikunjungi.

Menggunakan efek flyover organik untuk foto anggota tim tidak hanya akan meningkatkan kualitas halaman Anda, tetapi juga membuat interaksi dengan pengunjung Anda. Jika Anda memiliki pertanyaan atau saran, pastikan untuk meninggalkan komentar di bagian komentar di bawah ini!

Artikel ini berisi komentar 2
  1. Halo,
    Terima kasih untuk tutorial ini, ini dijelaskan dengan sangat baik.
    Namun, saya memiliki masalah dengan melayang di atas mouse, melayang-layang saya tidak cair. Apakah kamu tahu apa ini?

    merci

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
4 saham
saham4
menciak
Register
Ada apa