"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
Telefon
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
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.
Metin modülü ekle
H2 içeriği ekle
H2 seçim boyutuna sahip sütuna bir Metin Modülü başlığı ekleyin.
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
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
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
boyutlandırma
Sonra bölücünün boyutunu küçülüp ortalayacağız.
- Genişlik:% 26
- Modülün hizalanması: orta
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.
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
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
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)
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.
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
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.
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.
Varsayılan arka plan rengi
Ardından, tam şeffaf bir arka plan rengi seçeceğiz.
- Arka plan rengi: rgba (255,255,255,0)
Köprüde arka plan rengi
Ve biz bu rengin yerini değiştireceğiz.
- Arka plan rengi: rgba (255,255,255,0.88)
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
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)
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
Başlığın metin ayarlarının üzerine gelin
Gezinerek metnin boyutunu değiştirin.
- Metin Başlığı Boyutu: 30px
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
Vücuda aşırı akışta parametre
Ve yine, gezinip duran metnin gövde boyutunu değiştirin.
- Gövde metin boyutu: 14px
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)
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
İ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.
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!
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
Telefon
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!
Bonjour
Bu eğitim için teşekkür ederim, benim için çok faydalı oldu.
Ancak, 2 küçük sorunla karşılaşıyorum:
- fareyle üzerine gelindiğinde arka plan geçerli değil (Görüntünün arkasında olduğu izlenimine sahibim ...)
- üstgeçit örnekteki gibi açılmıyor (metnim simge ile aynı yükseklikte kalıyor ve yukarı doğru açılmıyor) bu da güzel bir görünüm veriyor.
Bir çözümün var mı? Teşekkürler.
Bonne soirée
Bonjour
Bir ekran görüntüsü paylaşabilir misin?
Bonjour
Bu eğitim için teşekkür ederiz, çok iyi açıklanmıştır.
Ancak, fareyi üzerine geldiğimde gezdirirken titriyor ve akmıyor. Bunun neye bağlı olduğunu biliyor musun?
sağol
Merhaba Sal,
Hiçbir fikrim üzgünüm.