"Hakkımızda" sayfalarının, sitenize tıklamaları artırmada çok iyi olduğu bir sır değil. web sitesi. Aynı zamanda işin arkasındaki insan yönünü vurgulayacak olan bu tür bir sayfadır. Site Web. Bunu bilerek, sayfaları nasıl yapılandırdığımıza, ne tür bilgileri paylaştığımıza ve etkileşimleri nasıl oluşturduğumuza dikkat etmenin önemli olduğunun farkındayız.

Sayfa deneyimini iyileştirmek için yapabileceğiniz şeylerden biri, çalışanlarınızı ön plana çıkaran bir ekip üyeleri bölümü sağlamaktır. Bunun da ötesinde, yalnızca Divi'nin yerleşik seçeneklerini kullanarak ekip üyelerinin fotoğraflarına biyolojik bir gezinme efekti ekleyebilirsiniz.

Bu, üzerinde çalıştığınız sayfada yer kazanmanıza ve sizinle aranızda bir fareyle üzerine gelme etkileşimi oluşturmanıza olanak tanır. ziyaretçi.

Bu eğitimde size adım adım oraya nasıl gidileceğini göstereceğiz. Yaklaşımı edindiğinizde, tasarım stilini kendi ihtiyaçlarınıza göre özelleştirebileceksiniz.

Gidelim!

anket

Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.

ofis

divi-biyo-hover efektli-masaüstü-gif.gif

Telefon

divi-biyo-hover efektli-mobil-gif.gif

Rekreasyona başlayalım

Yeni bölüm ekle

aralık

Aşağıdaki özel dolgu değerlerini kullanarak yeni bir sayfa oluşturun veya mevcut bir sayfayı açın ve yeni bir bölüm ekleyin:

  • En iyi dolgu malzemesi: 100px
  • Alt doldurma: 100px

biyo hover etkisi

Satır ekle 1

Sütun yapısı

Özel dolguyu bölümünüze eklemeyi tamamladığınızda, bölüm ayarlarını kapatabilir ve tek bir sütun kullanarak yeni bir satır ekleyebilirsiniz.

biyo hover etkisi

Metin modülü ekle

H2 içeriği ekle

H2 seçim boyutuna sahip sütuna bir Metin Modülü başlığı ekleyin.

biyo hover etkisi

H2 metin ayarları

Ardından H2 metin ayarlarına gidin ve kopyanın görünümünde bazı değişiklikler yapın.

  • Başlık 2 Yazı Tipi: Cinzel
  • Başlık 2 Yazı Tipi Stili: Küçük Büyük Harfler
  • Başlık 2 Metin hizalaması: orta
  • Başlık 2 Metin Boyutu: 70px

biyo hover etkisi

Bölme modülü ekle

görünürlük

Metin Modülü başlığının hemen altına yeni bir ayırma modülü eklemeye devam edin.

  • Bölücüyü Göster: Evet

biyo hover etkisi

Ayırıcının rengi

Tasarım sekmesine gidin, renk ayarlarını açın ve bölücü renginizi buna göre değiştirin:

  • Ayırıcının rengi: # 333333

biyo hover etkisi

boyutlandırma

Sonra bölücünün boyutunu küçülüp ortalayacağız.

  • Genişlik:% 26
  • Modülün hizalanması: orta

biyo hover etkisi

2 satırını ekle

Sütun yapısı

Eklediğiniz önceki satırın hemen altında, devam edin ve eşit boyutta üç sütun kullanarak yeni bir satır ekleyin.

biyo hover etkisi

boyutlandırma

Daha fazla modül eklemeden satır parametrelerini açın ve boyutlandırma parametrelerinde bazı değişiklikler yapın.

  • Özel bir genişlik kullanın: Evet
  • Birim: PX
  • Özel genişlik: 2000px
  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 1
  • Sütun yüksekliklerini eşitle: Evet

biyo hover etkisi

aralık

Ardından aralık ayarlarına gidin ve özel kenar boşluğu ve dolgu değerleri ekleyin.

  • Üst kenar boşluğu: 50px
  • Alt kenar boşluğu: 50px
  • Üst Dolgu: 10px
  • Alt doldurma: 10px
  • Sol Dolgu: 5px
  • Döşeme Sağ: 5px
  • Sütun 1, 2 ve 3 Soldaki dolgu: 5px
  • Sütun 1, 2 ve 3 Sağdaki dolgu: 5px

biyo hover etkisi

Gölge kutusu

Ayrıca aşağıdaki parametrelere sahip bir kutu gölge ekleyerek çizgimize biraz derinlik katıyoruz:

  • Kutu Gölge Bulanıklığı Gücü: 80px
  • Kutu gölge yayılma kuvveti: -14px
  • Gölge rengi: rgba (0,0,0,0,3)

biyo hover etkisi

1. sütuna bir görüntü modülü ekleyin

Bir görüntü modülüne bir görüntü yükleyin

Modül eklemeye başlama zamanı! Biyolojik gezinme etkisini elde etmek için toplamda iki modüle ihtiyacımız olacak. bir görüntü modülü ve bir tanıtım modülü. Resim modülü, sunmak istediğiniz ekip üyesinin resmini içerecektir.

Bu arada Blurb modu, simgeyi sol alt köşeye ve vurgulu biyografiyi eklemek için kullanılacaktır. Kare boyutlu bir görüntü kullanarak ilk sütuna bir görüntü modülü ekleyin.

biyo hover etkisi

filtreler

Oluşturduğumuz tasarım tamamen gri tonlamalı. Bu gri tonunu resmimize eklemek için filtre ayarlarına gidin ve tüm doygunluğu kaldırın.

  • Doygunluk:% 0

biyo hover etkisi

Blurb modülünü 1 sütununa ekleyin

İçerik ekle

1. sütundaki görüntü modülünün hemen altına yeni bir Blurb modülü ekleyerek devam edin. Başlık alanına ekip üyesinin adını ekleyin ve kutuya ekip üyesiyle ilgili ek bilgileri girin. içindekiler.

biyo hover etkisi

Bir simge seçin

Yapacağımız bir sonraki şey, gösterilecek bir seçim simgesi seçmek. ziyaretçi bir fotoğraftan daha fazlası olduğunu.

biyo hover etkisi

Varsayılan arka plan rengi

Ardından, tam şeffaf bir arka plan rengi seçeceğiz.

  • Arka plan rengi: rgba (255,255,255,0)

biyo hover etkisi

Köprüde arka plan rengi

Ve biz bu rengin yerini değiştireceğiz.

  • Arka plan rengi: rgba (255,255,255,0.88)

biyo hover etkisi

Varsayılan simge ayarları

Yardımcı olacak görünür bir simge istiyoruz ziyaretçi üzerinden uçabileceklerini anlamak için. Böyle bir simge elde etmek için simge ayarlarını değiştirin.

  • Simge Rengi: #ffffff
  • Daire simgesi: evet
  • Daire rengi: # 000000
  • Simge yeri: sol
  • Simge Yazı Tipi Boyutunu Kullan: Evet
  • Simge Yazı Tipi Boyutu: 50px

biyo hover etkisi

Fareyle üzerine gelme simgesi ayarı

Ancak, simgenin üzerine gelindiğinde görünmesini istemiyoruz. Bu yüzden bunun yerine tamamen şeffaf bir renk kullanıyoruz.

  • Simge rengi: rgba (255,255,255,0)
  • Dairenin rengi: rgba (255,255,255,0)

biyo hover etkisi

Varsayılan başlık ayarları

Sonra başlığın metin ayarlarına gidin ve bazı değişiklikler yapın.

  • Başlık Polisi: Cinzel
  • Başlık Yazı Tipi: Kalın
  • Başlık Yazı Tipi Stili: Küçük Kapaklar
  • Renk metni: # 000000
  • Metin Başlığı Boyutu: 0px

biyo hover etkisi

Başlığın metin ayarlarının üzerine gelin

Gezinerek metnin boyutunu değiştirin.

  • Metin Başlığı Boyutu: 30px

biyo hover etkisi

Varsayılan gövde metni ayarları

Ayrıca gövde metni ayarlarını da değiştirin.

  • Vücut Polisi: Açık Sans
  • Gövde renkli metin: # 000000
  • Gövde metin boyutu: 0px
  • Gövde yüksekliği: 1.8em

biyo hover etkisi

Vücuda aşırı akışta parametre

Ve yine, gezinip duran metnin gövde boyutunu değiştirin.

  • Gövde metin boyutu: 14px

biyo hover etkisi

Varsayılan aralık

Son fakat en az değil, Blurb modülü ile görüntü modülü arasında negatif bir üst kenar boşluğu kullanarak bir örtüşme oluşturmamız gerekecek.

  • Üst kenar boşluğu: -3.7vw (masaüstü), -9vw (tablet ve telefon)
  • Alt kenar boşluğu: 1.5vw (tablet), 2vw (telefon)

biyo hover etkisi

Sabit aralık

Özel marjı değiştirin ve değerleri rollover'da doldurun.

  • Üst kenar boşluğu: -11,38vw
  • Üst Dolgu: 20px
  • Alt doldurma: 20px
  • Döşeme Sağ: 50px

biyo hover etkisi

İki modülü iki kez klonlayın ve kopyaları kalan sütunlara yerleştirin.

İlk biyolojik gezinme etkimizi oluşturmayı bitirdik. Zaman kazanmak için, 1. sütundaki iki modülü iki kez kopyalayabilir ve kopyaları kalan iki sütuna yerleştirebiliriz.

biyo hover etkisi

Blurb modülünün görüntüsünü ve içeriğini düzenleyin

Ekip üyeleri bölümünü tamamlamak için Resim modülündeki resmi değiştirmeyi ve Blurb modülünü kopyalamayı unutmayın!

biyo hover etkisi

anket

Artık tüm adımları attığımıza göre, farklı ekran boyutlarına nasıl baktığımıza son bir göz atalım.

ofis

biyo hover etkisi

Telefon

biyo hover etkisi

Son düşünceler

Bu makalede, yalnızca Divi'nin yerleşik seçeneklerini kullanarak ekip üyelerinin fotoğrafları için biyolojik bir gezinme efektinin nasıl oluşturulacağını gösterdik. En çok ziyaret edilen web sitelerinden biri oldukları için iyi sayfalar oluşturmanın ne kadar önemli olduğunu vurguladık.

Ekip üyelerinin fotoğrafları için biyolojik vurgulu efektler kullanmak, yalnızca sayfanızın kalitesini artırmakla kalmaz, aynı zamanda ziyaretçilerinizle etkileşim de yaratır. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum bıraktığınızdan emin olun!