Divi'de Ekip Üyesi Bios'a Vurgulu Efekt Nasıl Eklenir

Web sitenizde tıklamalar oluşturmak için sayfaların harika olduğu bir sır değil. Aynı zamanda, web sitesinin arkasındaki şirketin insani yönünü vurgulayacak bir tür sayfadır. Bunu bilmek, 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 etmemizin önemli olduğunun farkında olmamızı sağlar. Hakkında sayfası deneyimini yükseltmek 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 bir biyo vurgulu efekti ekleyebilirsiniz. Bu, üzerinde çalıştığınız sayfada yer kazanmanıza ve siz ve ziyaretçileriniz arasında bir fareyle üzerine gelme etkileşimi oluşturmanıza olanak tanır.

Bu eğitimde, oraya nasıl gideceğinizi adım adım göstereceğiz. Yaklaşımı öğrendikten sonra, tasarım stilini kendi ihtiyaçlarınıza göre özelleştirebileceksiniz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca bir göz atalım.

masaüstü

Mobil

Yeniden Oluşturmaya Başlayalım

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

aralık

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

• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px

1. Satır Ekle

Sütun Yapısı

Bölümünüze özel dolgu eklemeyi tamamladığınızda, bölüm ayarlarını kapatabilir ve yalnızca bir sütun kullanarak yeni bir satır ekleyebilirsiniz.

Metin Modülü Ekle

H2 İçeriği Ekle

Seçtiğiniz bazı H2 kopyalarıyla 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 Hizalama: Orta
• Başlık 2 Metin Boyutu: 70px

Bölücü Modülü Ekle

görünürlük

Metin Modülü başlığının hemen altına yeni bir Bölücü Modül ekleyerek devam edin.

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

Bölücü Renk

Tasarım sekmesine gidin, renk ayarlarını açın ve ayırıcınızın rengini buna göre değiştirin:

• Bölücü Rengi: #333333

boyutlandırma

Ardından, ayırıcının boyutunu küçültüp ortalayacağız.

• Genişlik: %26
• Modül Hizalaması: Merkez

2. Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarında bazı ayarlamalar yapın.

• Özel Genişlik Kullan: Evet
• Birim: PX
• Özel Genişlik: 2000 piksel
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Ardından, boşluk 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 Dolgu: 10px
• Sol Dolgu: 5px
• Sağ Dolgu: 5px
• Sütun 1, 2 ve 3 Sol Dolgu: 5px
• Sütun 1, 2 ve 3 Sağ Dolgu: 5px

Kutu Gölge

Ayrıca, aşağıdaki ayarlarla bir kutu gölgesi ekleyerek satırımıza biraz derinlik kazandırıyoruz:

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -14px
• Gölge Rengi: rgba(0,0,0,0.3)

Sütun 1'e Görüntü Modülü Ekle

Resim Modülüne Resim Yükle

Modül eklemeye başlama zamanı! Biyo vurgulu efekti elde etmek için toplamda iki modüle ihtiyacımız olacak; bir Görüntü Modülü ve bir Blurb Modülü. Görüntü Modülü, sergilemek istediğiniz ekip üyesinin görüntüsünü tutacaktır. Blurb Modülü ise sol alt köşeye simgeyi ve üzerine gelindiğinde 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

Yarattığımız tasarım tamamen gri tonlamalı. Bu gri tonlamayı resmimize eklemek için filtre ayarlarına gidin ve tüm doygunluğu kaldırın.

• Doygunluk: %0

Sütun 1'e Blurb Modülü Ekle

İçerik Ekle

Sütun 1'deki Görüntü Modülünün hemen altına yeni bir Bulanıklık Modülü ekleyerek devam edin. Başlık alanına ekip üyesinin adını ekleyin ve içerik kutusuna ekip üyesi hakkında biraz daha bilgi girin.

Simge Seç

Bir sonraki yapacağımız şey, ziyaretçilere sadece bir resimden daha fazlası olduğunu gösterecek bir simge seçmek.

Varsayılan Arka Plan Rengi

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

• Arka Plan Rengi: rgba(255,255,255,0)

Vurgulu Arka Plan Rengi

Ve fareyle üzerine gelindiğinde bu rengi değiştireceğiz.

• Arka Plan Rengi: rgba(255,255,255,0.88)

Varsayılan Simge Ayarları

Ziyaretçilerin üzerine gelebileceğini anlamalarına yardımcı olacak dikkat çekici bir simge istiyoruz. Böyle bir simge elde etmek için simge ayarlarını değiştirin.

• Simge Rengi: #ffffff
• Daire Simgesi: Evet
• Daire Rengi: #000000
• Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 50px

Fareyle Üzerine Gelme Simgesi Ayarları

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

• Simge Rengi: rgba(255,255,255,0)
• Daire Rengi: rgba(255,255,255,0)

Varsayılan Başlık Metni Ayarları

Ardından, başlık metni ayarlarına gidin ve bazı değişiklikler yapın.

• Başlık Yazı Tipi: Cinzel
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: Küçük Büyük Harfler
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 0px

Fareyle Üzerine Gelme Başlık Metni Ayarları

Fareyle üzerine gelindiğinde metin boyutunu değiştirin.

• Başlık Metin Boyutu: 30px

Varsayılan Gövde Metni Ayarları

Gövde metni ayarlarını da değiştirin.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Rengi: #000000
• Gövde Metni Boyutu: 0px
• Gövde Çizgisi Yüksekliği: 1.8em

Vurgulu Gövde Metni Ayarları

Ve yine, fareyle üzerine gelindiğinde gövde metni boyutunu değiştirin.

• Gövde Metin Boyutu: 14px

Varsayılan Aralık

Son olarak, negatif üst kenar boşluğu kullanarak Blurb Module ve Image Module arasında bir örtüşme oluşturmamız gerekecek.

• Üst Marj: -3.7vw (Masaüstü), -9vw (Tablet ve Telefon)
• Alt Marj: 1.5vw (Tablet), 2vw (Telefon)

Vurgu Aralığı

Fareyle üzerine gelindiğinde özel kenar boşluğu ve dolgu değerlerini değiştirin.

• Üst Marj: -11.38vw
• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sağ Dolgu: 50px

Her İki Modülü İki Kez Klonlayın ve Kopyaları Kalan Sütunlara Yerleştirin

İlk bio hover efektimizi yaratmayı bitirdik. Zaman kazanmak için, sütun 1'deki her iki modülü de iki kez klonlayabilir ve kopyaları kalan iki sütuna yerleştirebiliriz.

Blurb Modülünün Görüntü ve İçeriğini Değiştirin

Ekip üyesi bölümünü bitirmek için Görüntü Modülündeki resmi ve Blurb Modülündeki kopyayı değiştirmeyi unutmayın!

Ön izleme

Artık tüm adımlardan geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak ekip üyelerinin fotoğrafları için üzerine gelindiğinde nasıl biyo vurgulu efekti oluşturabileceğinizi gösterdik. En çok ziyaret edilen sayfa web sitelerinden biri oldukları için sayfalar hakkında iyi şeyler oluşturmanın ne kadar önemli olduğundan bahsetmiştik. Ekip üyesi fotoğrafları için bio hover efektlerini kullanmak, sadece sayfanızı bir sonraki seviyeye taşımanıza izin vermeyecek, aynı zamanda ziyaretçilerinizle bir etkileşim yaratmanıza da izin verecektir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!