Bir Sonraki Divi Projeniz için Canlı Hover Takım Sayfası Nasıl Oluşturulur

Ekip sayfaları genellikle hafife alınır. Bir ürün satın almadan veya bir hizmet kiralamadan önce, birçok kullanıcı şirket ve arkasındaki insanlar hakkında daha iyi bir fikir edinmek için ekibe veya sayfalara gider. Ekip sayfanız olumlu bir ilk izlenim bırakırsa, daha yüksek dönüşüm oranlarına yol açabilir. Şimdi, Divi ile güzel ekip sayfaları oluşturmanın birçok yolu var, ancak bir sonraki projeniz için biraz ilham arıyorsanız, bu gönderiyi seveceksiniz. Fareyle üzerine gelindiğinde üye biyografilerini tetikleyen canlı bir vurgulu ekip sayfasını yeniden oluşturacağız.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Youtube Kanalımıza Abone Olun

1. Başlık İçin Normal Bir Bölüm + Tek Sütunlu Bir Satırla Başlayın

Yeni bir sayfa açın ve sayfa özelliklerini 'boş sayfa' olarak ayarlayın. Bunu yaptıktan sonra Divi Builder'a girin ve tek sütunlu bir satır içeren bir bölüm ekleyin.

Bir metin ve ayırıcı modül ekleyin.

2. Metin Modülüne İçerik Ekleyin ve Biçimlendirin

Metin modülüne biraz H1 içeriği ekleyin.

Tasarım sekmesine gidin ve H1 metin ayarlarını buna göre biçimlendirin:

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Hafif
• Başlık Metni Hizalama: Orta
• Başlık Metni Rengi: Siyah #000000
• Başlık Metni Boyutu:
  • Masaüstü = 6vw
  • tablet = 9vw
  • Telefon = 11vw
• Başlık Harf Aralığı: -0.4vw

3. Bölücüye Stil Verin

Bölücü modül olan bir sonraki modüle geçin. Ayırıcı rengini siyah olarak değiştirin ve boyutlandırma ayarlarını değiştirin.

• Bölücü Rengi: Siyah #oooooo
• Bölücü Ağırlığı: 12px
• Genişlik: %14
• Modül Hizalaması: Merkez

4. Normal Bir Bölüm + Üç Sütunlu Satır Kullanarak Ekip Biyografileri Oluşturun

Artık başlık bölümünü tamamladığımıza göre, takım biyografilerini oluşturmaya başlamaya hazırız. Üç sütunlu bir satıra sahip yeni bir normal bölüm ekleyerek başlayın.

5. Satır Boyutlandırma Ayarlarını Ayarlayın

Boyutlandırma ayarlarını değiştirerek satırın bölüm kabının tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

6. Satır Aralığı Ayarlarını Ayarlayın

Bazı özel üst ve alt dolguları da ekleyin.

• Üst Dolgu: 2vw
• Alt Dolgu: 2vw

7. Birinci Sütun'a Görüntü ve Bulanıklık Modülü Ekleyin

Son efekti oluşturmak için kullanacağımız iki ana modül, bir görüntü ve bir tanıtım modülüdür. Önce görüntü modülünü ve ardından tanıtım metnini ekleyin.

8. Bir Resim Yükleyin ve Stillendirin

Vurgulu ekip sayfanız, ekip üyelerini sergilemekle ilgilidir. Görüntü modülünü açın ve bunlardan birinin fotoğrafını ekleyin. Divi stok görsellerimizden birini kullanacağız. Resim boyutlarınızın 612px X 612px olduğundan emin olun.

hizalama

Tasarım sekmesine gidin ve görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Merkez

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

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

aralık

Ve biraz negatif üst kenar boşluğu ekleyin.

• marj:
  • Masaüstü = -3vw
  • Tablet ve Telefon = -13vw

Sınır

Resmi bir daireye dönüştürmek için kenarlık ayarlarını değiştireceğiz.

• Yuvarlatılmış Köşeler: 20vw Dört Köşe Tümü
• Kenarlık Stilleri: Dört Tarafın Tümü
• Kenar Genişliği: 12px
• Kenar Rengi: Beyaz #ffffff
• Bordür Stili: Çift

Kutu Gölge

Ayrıca ince bir kutu gölgesi uygulayarak görüntüye biraz derinlik katıyoruz.

• Kutu Gölgesi: İlk Seçenek
• Kutu Gölge Bulanıklığı Gücü: 50px

Z İndeksi

Önceki adımlardan birinde, bir miktar negatif üst marj ekledik. Resmin sütunun üstünde kalmasını sağlamak için, onu aşsa bile, görünürlük ayarlarında z indeksini artıracağız.

• Z İndeksi: 3

9. Bulanıklaştırmaya İçerik Ekleyin ve Biçimlendirin

Sayfa Ayarlarına Özel CSS Ekleyin

Başka bir şey yapmadan önce, tanıtım yazısı içindeki simgenin varsayılan alt kenar boşluğundan kurtulmak için bazı özel CSS ekleyeceğiz. Sayfa ayarlarına aşağıdaki CSS kod satırlarını ekleyin:

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

Blurb'a bir CSS Sınıfı verin

Daha sonra tanıtıcı modülünü açın ve eşleşen CSS sınıfını ekleyin.

• CSS Sınıfı: tanıtıcı simge

İçerik Ekle

Yer tutucu metni kullanacağız, ancak bir ekip üyesinin gerçek adını ve açıklamasını ekleyebilirsiniz.

Simge Seç

Sonraki bir artı simgesi seçin.

• Simgeyi Kullan: Evet
• Simge: Bir Daire İçinde Artı İşareti

stil arka plan

Arka plan ayarlarına geçin, beyaz bir varsayılan arka plan rengi ve üzerine gelindiğinde degrade bir arka plan ekleyin.

• Arkaplan: Beyaz #ffffff
• Vurgulu Arka Plan: Gradyan
• Degrade Renk Bir: #00ffa1
• Degrade Renk İki: #29c4a9
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 154deg
• Başlangıç ​​Konumu: 0
• Bitiş Konumu: %46

Stil Simgesi

Daha sonra aşağıdaki simge ayarlarını uygulayın:

• Simge Rengi:
  • Varsayılan: #29c4a9
  • Fareyle üzerine gelin: Şeffaf rgba(255,255,255,0)
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu:
  • Masaüstü = 2vw
  • tablet = 4vw
  • Telefon = 6vw

hizalama

Metin ayarlarına gidin ve metin hizalamasını değiştirin.

• Metin Hizalama: Merkez

Stil Başlık Metni

Ardından, başlık metni ayarlarını açın ve farklı ekran boyutlarında bazı değişiklikler yapın.

• Başlık: H4
• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi: Kalın
• Başlık Metin Rengi: Beyaz #ffffff
• Başlık Metin Boyutu:
  • Masaüstü: 1.5vw
  • Tablet: 2.5vw
  • Telefon: 3.5vw

Stil Gövde Metni

Gövde metni ayarları için de aynısını yapın.

• Gövde Metni Rengi: Beyaz #ffffff
• Gövde Metni Boyutu:
  • Masaüstü = 0.8vw
  • Tablet = 1.9vw
  • Telefon = 2.6vw
• Gövde Çizgisi Yüksekliği:
  • Masaüstü = 2vw
  • Tablet + Telefon = 3vw

boyutlandırma

Ardından, tanıtıcı modülümüzün boyutlandırma ayarlarını değiştireceğiz.

• İçerik Genişliği: %100
• Genişlik: %81
• Modül Hizalaması: Merkez

aralık

Farklı ekran boyutlarına da bazı özel kenar boşluğu ve dolgu değerleri uygulayacağız.

• Üst boşluk:
  • Masaüstü = -4vw
  • Tablet + Telefon = -9vw
• Alt Kenar Boşluğu:
  • Masaüstü = 3.5vw
  • Tablet + Telefon = 10vw
• Üst ve Alt Dolgu:
  • Masaüstü = 7.1vw
  • tablet = 30vw
  • Telefon = 28vw
• Sol ve Sağ Dolgu
  • Masaüstü = 2vw
  • Tablet + Telefon = 8vw

Sınır

Kenarlık yarıçapı ekleyerek tanıtım modülünü bir daireye çevirin.

• Yuvarlatılmış Köşeler: 50vw Dört Köşe

Kutu Gölge

Ve üzerine gelindiğinde görünen bir kutu gölgesi ekleyerek tanıtıcı modül tasarımını tamamlayın.

• Kutu Gölgesi: Beşinci Stil
• Kutu Gölge Yatay Konumu: 0vw
• Kutu Gölge Dikey Konumu:
  • Masaüstü + Fareyle Üzerine Gelme = -14vw
  • Tablet = -44vw
  • Telefon = -46vw
• Kutu Gölge Yayılma Gücü:
  • Masaüstü + Fareyle Üzerine Gelme = -6vw
  • Tablet + Telefon = -19vw
• Kutu Gölge Rengi:
  • Fareyle üzerine gelin = rgba(0,0,0,0.05)

10. Stil Sütun Bir

Bir sütuna ihtiyacımız olan tüm modülleri eklediğimize göre, şimdi sütuna stil verme zamanı.

Arka plan

Sütun bir arka plan ayarlarını açın ve aşağıdaki gradyan arka planını uygulayın:

• Arka Plan Stili: Gradyan
• Degrade Renk Bir: #00ffa1
• Degrade Renk İki: #29c4a9
• Gradyan Türü: Astar
• Gradyan Yönü: 282deg

Sınır

Tasarım sekmesine gidin ve bir miktar kenarlık yarıçapı ekleyerek sütunu bir daireye çevirin.

• Yuvarlatılmış Köşeler: 50vw

taşma

Resmin sütunun üstünde göründüğünden emin olmak için görünürlük ayarlarında yatay ve dikey taşmaları değiştireceğiz.

• Yatay ve Dikey Taşma: Görünür

11. Boş Sütunları Sil ve İlk Sütunu İki Kez Çoğalt

İlk sütunu ve içindeki tüm modülleri tamamladık. Kendimize biraz zaman kazandırmak için boş sütunları kaldıracağız ve ilk sütunu iki kez klonlayacağız.

İkinci ve Üçüncü Sütunları Sil

Ana satır ayarlarına geri dönün ve ikinci ve üçüncü sütunlar için çöp kutusu simgesine tıklayın.

Sütun Birini İki Kez Çoğalt

İkinci ve üçüncü sütunları sildikten sonra, birinci sütun bir an için tuhaf görünecek, ancak sütunu iki kez klonladığınız anda tüm bunlar değişecektir.

12. İkinci Sütunun İçeriğini ve Renklerini Değiştirin

Şimdi diğer iki ekip üyeniz için yeni sütunların stilini belirleme zamanı.

Sütun İki

İkinci sütunun ayarlarını açın ve degrade arka planını değiştirin

• Arka Plan Degrade Rengi Bir: #00eeff
• Arka Plan Degrade Rengi İki: #309ce5

Farklı bir resim de yükleyin.

Tanıtım modülünü açarak ve degrade arka planını değiştirerek devam edin.

• Arka Plan Rengi Bir: #00eeff
• Vurgulu Arka Plan Rengi İki: #309ce5

Simge rengini de değiştirin.

• Varsayılan Simge Rengi: #309ce5

Sütun Üç

Üçüncü sütunun ayarlarını açın ve degrade arka planını değiştirin.

• Arka Plan Degrade Rengi Bir: #ff91ec
• Arka Plan Degrade Rengi İki: #a500ff

Daha sonra bulanıklık gradyan arka planını değiştirin.

• Arka Plan Rengi Bir: #ff91ec üzerine gelin
• Arka Plan Rengi İki: #a500ff üzerine gelin

Simge rengiyle birlikte.

• Varsayılan Simge Rengi: #a500ff

Ön izleme

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

masaüstü

Mobil

Bu bir Sargı!

Bu gönderide, renkli vurgulu seçenekleriyle canlı bir vurgulu ekip sayfasını nasıl oluşturacağınızı gösterdik. Bu tasarımı bir sonraki Divi projenizde kullanmaktan çekinmeyin. Bir ekip sayfası veya katkıda bulunanlar dizini için deneyin. Yorumlarda herhangi bir fikriniz varsa bize bildirin.