Divi’deki ekip üyelerinin BIOS’una işaret etmek için etki nasıl eklenir
Sayfanın web sitenizde tıklamalar yapmak için çok iyi olduğu bir sır değil. Ayrıca, web sitesinin arkasındaki şirketin insan kısmını vurgulayacak bir sayfa türüdür. Bunu bilmek, sayfaları nasıl derlediğimize, ne tür bilgileri paylaştığımıza ve nasıl etkileşimler yarattığımıza dikkat etmenin önemli olduğunu bilmemizi sağlıyor. Sayfa deneyimini geliştirmek için yapabileceğiniz şeylerden biri, çalışanlarınızı gündeme getiren bir ekip üyeleri sağlamaktır. Ayrıca, yalnızca varsayılan Divi seçeneğini kullanarak Bio Hover efektini fotoğraf ekibi üyelerine ekleyebilirsiniz. Bu, üzerinde çalıştığınız sayfada yerden tasarruf etmenizi ve sizin ve ziyaretçileriniz arasında etkileşimler yapmanızı sağlayacaktır.
Bu öğreticide, oraya nasıl gideceğinizi adım adım göstereceğiz. Bir yaklaşım elde ettikten sonra, tasarım stilini kendi ihtiyaçlarınıza göre ayarlayabileceksiniz. Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce, sonuçlara farklı ekran boyutlarındaki bakalım. Masaüstü
Üst dolgu: 100 piksel
Dolgu Alt: 100 piksel Satır #1 sütun yapısı ekle Kısmısına özel dolgu eklemeyi bitirdikten sonra, bölümün ayarlarını kapatabilir ve yalnızca bir sütun kullanarak yeni bir satır ekleyebilirsiniz. Metin Modülü Ekle H2 İçeriği Ekle Metin modülünün başlığını H2 seçeneğinin birkaç kopyasıyla sütuna ekleyin. H2 Metin Ayarları Ardından, H2 metin ayarlarını açın ve kopyanın kopyasında bazı değişiklikler yapın. Başlık 2 yazı tipi: Cinzel
Başlık 2 yazı tipi stili: küçük harf
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Metin Boyutu: 70px
Görünürlük Bölme Modülünü ekleyin. Metin modülünün hemen altına yeni bir bölücü modülü ekleyerek devam edin. Divisor göster: evet
Renk Tasarım sekmesini açın, renk ayarlarını açın ve bölücünüzün rengini buna göre değiştirin: Renk Renk: #333333
Bir sonraki yapıştırıcı, bölücünün boyutunu azaltacağız ve odaklayacağız. Genişlik:% 26
Modül hizalaması: merkez
Eklediğiniz, devam ettiğiniz, devam edin ve aynı boyutta üç sütun kullanarak yeni bir satır eklediğiniz satır #2 sütun yapısı ekleyin. Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarında bazı ayarlamalar yapın. Özel genişlik kullanın: evet
Birim: PX
Özel genişlik: 2000px
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Mesafe sonra, boşluk ayarlarını açık ve özel kenar boşlukları ve dolgu değerleri ekleyin. Üst kenar boşluğu: 50 piksel
Alt kenar boşluğu: 50 piksel
Üst dolgu: 10 piksel
Dolgu Alt: 10 piksel
Sol dolgu: 5 piksel
Doğru dolgu: 5 piksel
Sütun 1, 2 ve 3 Sol dolgu: 5 piksel
Sütun 1, 2 ve 3 Sağ dolgu: 5px
Kutumuzun gölgesi ayrıca aşağıdaki ayarlarla kutunun gölgesini ekleyerek satırımıza biraz derinlik verir: Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -14px
Gölge Rengi: RGBA (0.0,0,0,3)
Resim Modülünü Sütun 1’e Ekleyin Görüntüyü Görüntü Modülüne Yükle Modül eklemeye başlama zamanı! Biyografi etkisini elde etmek için toplam iki modüle ihtiyacımız var; Bulanık görüntü ve modül modülü. Görüntü modülü, görüntülemek istediğiniz ekip üyelerinin görüntüsünü kaydeder. Öte yandan, bulanıklık modülü, sol alt köşeye ve yüzerken biyografi ilave etmek için kullanılacaktır. Görüntü modülünü kare boyutlu bir görüntü kullanarak ilk sütuna ekleyin. Yaptığımız tasarımın tasarımı tamamen gri ölçektir. Bu gri ölçeği resmimize eklemek için filtre ayarlarını açın ve tüm doygunluğu silin. Doygunluk:% 0 Blurb modülünü sütun 1’e ekleyin, içeriği ekleyin, Sütun 1’deki görüntü modülünün hemen altına yeni bir bulanıklık modülü ekleyerek devam edin. İçerik kutusunda.
Yapacağımız bir sonraki simgeyi, ziyaretçilere sadece bir görüntüden daha fazlası olduğunu gösterecek isteğe bağlı simgeyi seçmektir.
Varsayılanın arka plan rengi daha sonra, şeffaf arka plan rengini seçeceğiz. Arka plan rengi: RGBA (255,255,255.0) Arka plan rengini yönlendirin ve yüzerken rengi değiştireceğiz.Arka plan rengi: RGBA (255,255,255.0.88) Varsayılan simge ayarlarımız, ziyaretçilerin imleci yönlendirebileceklerini anlamalarına yardımcı olacak çarpıcı bir simge istiyor. Böyle bir simgeye ulaşmak için simge ayarlarını değiştirin.
Ikon Color: #ffffff Çember simgesi: evet
Çember rengi: #000000
Simge Yerleştirme: Sol
Simge yazı tipi boyutu kullanın: evet
Ikon yazı tipi boyutu: 50px
Simge ayarlarına gidin, ancak ikonların gelincikte görünmesini istemiyoruz. Bu yüzden gerçekten şeffaf bir renk kullanacağız. Ikon Color: RGBA (255,255,255.0)
Çember rengi: RGBA (255,255,255.0) Bir sonraki varsayılan başlık metin ayarları, başlık metni ayarlarını açın ve bazı değişiklikler yapın.
Yazı Tip Başlığı: Cinzel
Ağır yazı tipi başlığı: kalın Yazı tipi stili başlığı: küçük kapaklar
Başlık Metin Rengi: #000000
Başlık Metin Boyutu: 0px
İmleci yönlendirirken başlık metin ayarlarına gidin.
Başlık Metin Boyutu: 30px
Varsayılan gövde metni ayarları ayrıca içerik terimlerini de değiştirir. Gövde yazı tipi: açık sans
Gövde metni rengi: #000000 Vücut Metin Boyutu: 0px
Vücut Hattı Yüksekliği: 1.8EM
Gövde metin ayarlarına gidin ve imleci yönlendirirken içeriğin boyutunu bir kez daha değiştirin.
Vücut Metin Boyutu: 14 piksel
Boşluk Varsayılan Son fakat en az değil, negatif bir üst kenar boşluğu kullanarak bulanıklık modülü ile görüntü modülü arasında örtüşmemiz gerekir. Üst kenar: -3.7vw (masaüstü), -9vw (tablet ve cep telefonu)
Alt kenar boşluğu: 1.5vw (tablet), 2vw (telefon) Aralık Direkt DEĞİŞTİRİMİ İmleç yönlendirirken özel kenar boşluğu ve dolgu değeri.
Üst Marj: -11.38VW
Üst dolgu: 20px Dolgu Alt: 20 piksel
Sağ dolgu: 50px
İkinci klon modülü iki kez ve geri kalan sütuna yinelenen ilk biyografi etkimizi yaptık. Zamandan tasarruf etmek için, her iki modülü de Sütun 1’deki iki kez klonladık ve kalan iki sütuna kopya yerleştirdik.
Blurb Modülünün Görüntü ve İçeriğini Değiştirin Görüntü modülündeki görüntüyü değiştirmeyi unutmayın ve ekip üyesi bölümünü tamamlamak için bulanıklık modülündeki kopyalayın!
Önizleme Şimdi tüm adımlardan geçtikten sonra, farklı ekran boyutlarında nihai sonuçlara bakalım.Masaüstü Bu yazıdaki son zihin, yalnızca varsayılan Divi seçeneklerini kullanarak ekip üyelerinin fotoğrafları için Hakem üzerinde nasıl bir biyografi etkisi oluşturacağınızı gösterdik.İyi bir sayfa yapmanın ne kadar önemli olduğundan bahsettik, çünkü sayfa en çok ziyaret edilen sayfa web sitelerinden biri.Fotoğraf ekibi üyeleri için Bio Hover efektini kullanmak, sadece sizinle ilgili bir sayfa bir sonraki seviyeye getirmenize izin vermekle kalmaz, aynı zamanda ziyaretçilerinizle etkileşimler de yaratır.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
