Takım Sayfası Nasıl Yapılır Bir sonraki Divi projenizin yönü
Takım 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 fikirler almak için ekibe veya sayfalar hakkında gezinir. Takım sayfanız olumlu bir ilk izlenim bırakırsa, daha yüksek bir dönüşüm seviyesine yol açabilir. Şimdi, Divi ile güzel bir takım sayfası oluşturmanın birçok yolu var, ancak bir sonraki projeniz için biraz ilham arıyorsanız, bu gönderiyi beğeneceksiniz. İmleciyi yönlendirirken üyelerin BIOS’unu tetikleyen dinamik bir Hover ekibi sayfası oluşturacağız.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Yazı Tip Başlığı: Poppins
Ağır yazı tipi başlığı: ışık
Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: Siyah #000000
Başlık Metin Boyutu:
Masaüstü = 6VW
Tablet = 9VW
Telefon = 11vw
Uzay Mektubu Başlığı: -0.4VW 3. Bir sonraki modüle devam eden kuvvet bölücü modülüdür. Bölme rengini siyah olarak değiştirin ve boyut ayarlarını değiştirin.
Renk Renk: Siyah #OOOOOO
Bölücü ağırlığı: 12 piksel
Genişlik:% 14
Modül hizalaması: merkez 4. Normal bölümü kullanarak bir ekip biyografisi oluşturun + Üç sütun Şimdi başlık bölümünü tamamladık, ekibin BIOS’unu oluşturmaya başlamaya hazırız. Üç sütunlu yeni bir normal parça ekleyerek başlayın. Satır boyutu ayarlarını ayarlayın, satırın boyut ayarlarını değiştirerek kabın tüm genişliğini almasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
6. Satır boşluğu ayarlarını ayarlayın Bazı özel üst ve alt yatak ekleyin. Üst Dolgu: 2VW
Dolgu Alt: 2VW
7. Görüntü ve Blurb modülünü sütuna ekleyin Son efekt oluşturmak için kullanacağımız iki ana modül görüntü ve açıklama modülüdür. İlk olarak, görüntü modülünü ve ardından açıklamayı ekleyin. 8. Hover ekibi sayfanızın ekip üyelerini görüntülemekle ilgili olduğu resim ve stil yükleyin. Görüntü modülünü açın ve bunlardan biri olan bir fotoğraf ekleyin. Divi stok görüntülerimizden birini kullanacağız. Görüntünüzün boyutlarının 612px x 612px olduğundan emin olun. Hizalama tasarım sekmesine geçer ve görüntü seviyesini değiştirir. Görüntü Uygulama: Orta
Yapıştırıcı değişim de boyutu ayarlayın. Genişlik:% 30
Modül hizalaması: merkez
Mesafe ve bazı negatif marjlar ekleyin. Sınır:
Masaüstü = -3vw
Tablet ve telefon = -13vw
Görüntüleri dairelere dönüştürmek için sınır ayarlarını değiştireceğiz. Yuvarlak açı: 20VW dört açının hepsi
Sınır gücü: dört tarafın hepsi
Sınır Genişliği: 12 piksel
Sınır rengi: beyaz #ffffff
Sınır Gücü: Çift
Kutumuzun gölgesi ayrıca pürüzsüz bir kutu gölgesi uygulayarak resme birkaç derinlik ekledi. Kutu Gölgesi: İlk Seçenek
Bulanık Güç Gölgesi Kutusu: 50px
Dizin Z Önceki adımlardan birinde, negatif için birkaç marj ekledik. Görüntünün sütunun üstünde kalmasını sağlamak için, onu aşarken bile, görünürlük düzenlemesindeki z indexini artıracağız. Z: 3 dizin 9. Blurb & Style’a İçerik Ekle Sayfa ayarlarına Özel CSS ekleyin Başka bir şey yapmadan önce, açıklamadaki simgenin varsayılan kenar boşluğunu ortadan kaldırmak için bazı özel CSS ekleyeceğiz. Sayfa ayarlarına aşağıdaki CSS kod satırını ekleyin:
.blurt-icon .et_pb_main_blurb_image {
Marj-Alt: 0px;
}
CSS sınıfına bir sonraki açıklama modülünü açın ve uygun bir CSS sınıfı ekleyin.
CSS sınıfı: Açıklama simgesi İçeriği ekleyin Yer tutucu metnini kullanacağız, ancak ekip üyelerinin adını ve gerçek açıklamasını girebilirsiniz.
Simgeyi seçin Bir sonraki artı simgesini seçin. Simgeler kullanın: evet Ikon: artı bir daire içinde oturum açın
Arka plan stili arka plan ayarına geçer, varsayılan beyazın arka plan rengini ve yüzerken degradenin arka planını ekleyin.
Arka plan: beyaz #ffffff İmleci arka plana yönlendirin: gradyan
Gradyan Rengi Bir: #00Ffa1
Gradyan Renk İki: #29C4A9
Gradyan Türü: Doğrusal
Gradyan yönü: 154deg
Başlangıç pozisyonu: 0
Son pozisyon:% 46
Kuvvet simgesi aşağıdaki simge ayarlarını uygular:
Simge rengi:
Varsayılan: #29c4a9
Doğrudan: Şeffaf RGB (255,255,255.0)
Simge yazı tipi boyutu kullanın: evet
Simge yazı tipi boyutu:
Masaüstü = 2VW
Tablet = 4VW
Telefon = 6VW
Hizalama metin ayarlarına geçer ve metin seviyesini değiştirir.
Hizalama Metni: Orta
Başlık: H4 Yazı Tip Başlığı: Poppins
Yazı Tip Başlığı: Renkli Metin Başlık: Beyaz #ffffff
Başlık Metin Boyutu:
Masaüstü: 1.5vw
Tablet: 2.5vw
Telefon: 3.5vw
Vücut metin stili içerik metnini ayarlamak için aynı şeyi yapar.
Gövde metni rengi: beyaz #ffffff
Vücut Metin Boyutu: Masaüstü = 0.8vw
Tablet = 1.9vw
Telefon = 2.6vw
Vücut çizgisinin yüksekliği:
Masaüstü = 2VW
Tablet + Telefon = 3VW
Bir sonraki yapıştırıcı, modülümüzün boyutunun ayarını değiştireceğiz.
İçerik Genişliği:% 100
Genişlik:% 81 Modül hizalaması: merkez
Mesafemiz, çeşitli ekran boyutlarında da bazı özel marj ve dolgu değerleri uygulayacaktır.
Üst sınır:
Masaüstü = -4vw Tablet + telefon = -9vw
Alt marj:
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
Birkaç sınır ekleyerek açıklamayı bir daire olarak değiştirmek için modülle sınırlanır.
Yuvarlak açı: 50vw dört açının hepsi
Kutu gölgesinde ve havada görünen kutunun gölgesini ekleyerek bulanıklık modülünün tasarımını tamamlayın. Gölge Kutusu: Beşinci Stil
Yatay Konum Gölge Kutusu: 0VW Kutu gölgesinin dikey konumu:
Masaüstü + nokta imleci = -14vw
Tablet = -44vw
Telefon = -46vw
Kutunun gölgesinin dağılımının gücü:
Masaüstü + nokta imleci = -6vw
Tablet + telefon = -19vw
Kutu Gölgesi Renk:
İmleç = RGBA (0.0,0,0.05)
10. Sütun Stili Bir şimdi birinci sütun için ihtiyacımız olan tüm modülleri ekledik, sütunu düzenleme zamanı.
Arka Plan Birinci sütunun arka plan ayarını açın ve aşağıdaki gradyan arka planını uygulayın:
Arka plan stili: gradyan Gradyan Rengi Bir: #00Ffa1
Gradyan Renk İki: #29C4A9
Gradyan Türü: Astar
Gradien yönü: 282deg
Sınır Tasarım sekmesine geçin ve birkaç sınır yarıçapı ekleyerek sütunu bir daireye değiştirin. Yuvarlak Okul: 50VW
Sütunda görüntülerin görünmesini sağlamak için taşarak, görünürlük düzenlemesinde yatay ve dikey outbursu değiştireceğiz.
Yatay ve dikey taşma: görünür 11. Boş sütunu çıkarın ve ilk sütunu iki kez kopyalayın Birinci sütunu ve içindeki tüm modülleri tamamladık. Zamandan tasarruf etmek için boş sütunu siler ve ilk sütunu iki kez klonlayacağız. Ana satır ayarlarına iki ve üç sütun silin ve ikinci ve üçlü sütunlar için çöp kutusu simgesini tıklayın.
Yinelenen sütunlar İkinci ve Üçlü sütunları sildikten sonra bir veya iki kez, Birinci sütun bir an için garip görünecektir, ancak sütunu iki kez klonladıktan hemen sonra değişir. 12. İçerik ve Renk Sütunu Değiştir İki şimdi diğer iki ekip üyesi için yeni bir sütun ayarlama zamanı. İkinci Sütun İkinci sütun ayarlarını açın ve gradyanın arka planını değiştirin
Gradyan Renk Arka Planı Bir: #00EFF Gradyan renk arka planı iki: #309ce5 Farklı resimler de yükleyin. Blurb modülünü açarak ve gradyanın arka planını değiştirerek devam edin.
Arka plan rengini göster: #00eeff
Arka plan rengini iki kez göster: #309ce5 Simgenin rengini de değiştirin. Varsayılan simge rengi: #309ce5
Üçlü Sütun Üçüncü sütun ayarlarını açın ve gradyanın arka planını değiştirin.
Gradyan Renk Arka Plan Bir: #FF91EC Gradyan renk arka planı iki: #a500ff
Bir sonraki bulanıklık gradyanının arka planını değiştirin. Arka plan rengini göster: #ff91ec
Arka plan rengini iki kez göster: #a500ff
Simgenin rengi ile birlikte. Varsayılan simge rengi: #a500ff
Önizleme Şimdi farklı adımlardan geçtikten sonra, nihai sonuçlara çeşitli ekran boyutlarında bakalım.Masaüstü
Bu bir sargı!Bu yazıda, renkli bir Hover seçeneğine sahip dinamik bir Hover ekibi sayfasının nasıl oluşturulacağını gösteriyoruz.Bu tasarımı bir sonraki Divi projenizde kullanmaktan çekinmeyin.Takım sayfasını veya katkıda bulunan dizini deneyin.Yorumlarda düşünceleriniz olup olmadığını bize söyleyin.
