Sekmede özellikler nasıl görüntülenir İmleci ile divi ile gezin
Web sayfanızda özellikleri ve/veya ürünleri görüntülemenin yeni ve yaratıcı yollarını mı arıyorsunuz? Öyleyse, okumaya devam edin, çünkü bu yazıda, yalnızca Divi Varsayılan seçeneğini kullanarak Hover sekmesindeki özellikleri nasıl görüntüleyeceğinizi göstereceğiz. Bu yaklaşımla ilgili olasılığınız sınırsızdır ve kesinlikle Divi’yi daha derin bir düzeyde anlamanıza izin verecektir. Hover Sekmesi efekti yalnızca Hover -Friends Masaüstü ortamında gerçekleşir. Hover sekmesi daha küçük ekran boyutundan görüldüğünde, özellik orijinal formuna dahil edilecektir.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce, sonuçlara farklı ekran boyutlarındaki bakalım. Masaüstü
Renk 1: #F2F2F2
Renk 2: #ffffff
Gradyan yönü: 87deg
Başlangıç Pozisyonu:% 20
Son pozisyon:% 20 Mesafe Ardından, her iki seçeneğe ‘0px’ ekleyerek özel parçaların üst ve alt dolgusunu silin.
Üst dolgu: 0px
Aşağıda dolgu: 0px Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden arka plan rengi, satır ayarlarını açın ve arka plan rengini değiştirin.
Arka plan rengi: #ffffff Çizginin hizalanması hat seviyesini de değiştirir.
Satır Hizalama: Sol Varsayılan boyut ve ayrıca boyut ayarlarını değiştirin.
Özel genişliği kullanın: Yasitan: PX
Özel genişlik: 400 piksel
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
İmleçi yönlendirirken boyut ayarlarında özel genişlik seçeneğini değiştirmenin boyutunu yönlendirin. Bu, satırın gönderildiğinde uzatılmasına izin verecektir. Özel genişlik: 2000px
Mesafe Ardından, boşluk ayarlarını açın ve üst ve alt varsayılan dolgu değerlerini silin. Üst dolgu: 0px
Aşağıda dolgu: 0px
Varsayılan sınır, satırın sağ üst köşesine ’20px’ ekler ve sol limiti de satıra ekler. Sol sınır genişliği: 20px
Sol sınır rengi: #6d44ff
Bunun yerine ‘0px’ ekleyerek imleci yönlendirirken sınır sağ üst açı -sağ üst açıyı ’20px’ yönlendirin. Varsayılanın gölgesi son fakat en az değil, pürüzsüz bir kutu gölgesi ekleyin. Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -10px
Gölge Rengi: RGBA (0.0,0,0.11)
Kutunun gölgesini yönlendirin ve gönderildiğinde gölgenin rengini gerçekten şeffaf bir renge dönüştürün. Gölge Renk: RGBA (255,255,255.0)
Blurb modülünü hatta ekleyin ve tüm satır ayarlarını değiştirmeyi bitirdikten sonra içeriğe ekleyin, devam edebilir ve bulanıklık modülünü sütuna ekleyebiliriz. Seçtiğiniz başka bir modülü kullanmaktan çekinmeyin. Bir modül ekledikten sonra biraz seçim içeriği ekleyin. Simgeyi seçin Bir sonraki seçim simgesini seçin. Simge ayarları ve simge ayarlarında görüntüleme simgesini değiştirin. Ikon Color: #5323ff
Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
Simge Yazı Tipi Boyutu: 54px
Varsayılan başlık metin ayarları Sonraki başlık metin ayarlarını değiştirin. Yazı Tip Başlığı: Poppins
Hizalama Metin Başlığı: Orta
Başlık Metin Rengi: #5323FF
Başlık Metin Boyutu: 25px
Başlık mektubu aralığı: -1px
Hat yüksekliği başlığı: 1 başlık metin ayarlarına akış ve yüzerken başlık satır yüksekliğini değiştirin.
Yüksek çizgi başlığı: 1.5em Varsayılan gövde metni ayarları Daha sonra, içerik metin ayarlarını açın ve bazı değişiklikler yapın. Bu, metnin boyutunu ‘0px’ olarak değiştirmeyi içerir. Bu, içerik metninin yalnızca gelincikte görünmesini sağlamamıza yardımcı olacaktır.
Gövde yazı tipi: Poppins
Vücut ağırlığı: ışık
Vücut metninin hizalanması: orta
Gövde metni rengi: #000000
İçindekiler Metin Boyutu: 0px (masaüstü), 15px (tablet ve cep telefonu)
Vücut Hattı Yüksekliği: 2.2em
İçerik metninin havada göründüğünden emin olmak için gövdenin metin ayarlarına gidin, havada zammedeki metnin boyutunu değiştirin.
Vücut Metin Boyutu: 15px
Üst dolgu: 80px Dolgu Alt: 80 piksel
Alanımız, imleci yönlendirirken alan ayarlarını değiştirecektir. Visual Builder’dan ayrılmadan önce sonucu göremeyeceksiniz çünkü imleci satır ve bulanık modülüne yönlendirmek için seçeneği uyguluyoruz.
Üst dolgu: 80px Dolgu Alt: 80 piksel
Sol dolgu: 20VW
Doğru dolgu: 20VW
Klon satırı ilk satırı ve bulanıklık modülünü değiştirmeyi bitirdikten sonra 3 kez, satıra istediğiniz kadar devam edebilir ve klonlayabilirsiniz.
Bluhb Row & Modülünü Değiştir #2 Satır alanını değiştirin Birinci kopyayı açın ve bazı özel sol kenar boşlukları ekleyin. Bu, bu yazının önizlemesinde dikkat edebileceğiniz bir merdiven efekti oluşturmamızı sağlayacaktır. Sol kenar boşluğu: 6VW Sıra kenarlığı rengini değiştirin Sırının sol sınır rengini de değiştirin.
Sol sınır rengi: #00ffcc İçerik ve Blurb simgesini daha sonra değiştirin, bulanıklık modülünü açın ve simgeyi değiştirin.
Bulanık modül simgesinin rengini simgenin rengi ile değiştirin. Ikon Renk: #00eda6 Başlık metninin rengini ve başlık metninin rengini değiştirin. Başlık Metin Rengi: #00A6
Satır ve Blurb Modülünü Değiştir #3 Satır alanını değiştirin Sıra alanını değiştirin, ikinci kopyaya da bazı özel sol kenar boşlukları ekleyin. Sol kenar boşluğu: 12vw
Sırının sınır rengini değiştirin Sol çizginin rengini değiştirin. Sol sınır rengi: #afebff
Açıklamanın simgesi ve içeriği ile birlikte bulanıklığın içeriğini ve simgesini değiştirin. Blurb Modül Iconunun Rengini Değiştirin Simgenin rengini de değiştirin.
Renk simgesi: #68d9ff Başlık metninin başlığının ve renginin renk metnini de değiştirin. Başlık Metin Rengi: #68D9FF
Satır Modülünü Değiştir ve Blurb #4 Sıra alanını bir sonrakine değiştirin ve son olarak çoğaltın! Hatta bazı özel sol kenar boşlukları ekleyin. Sol kenar boşluğu: 18VW
Sıra kenarlığı rengini değiştirin Sırının sol sınır rengini de değiştirin. Sol sınır rengi: #dd87cf
Bulanıklığın içeriği ve simgesini değiştirin ve bulanıklık modülünü satırdaki açın ve simge ve modül içeriğini değiştirin. Bulanık modül simgesinin rengini simgenin rengi ile değiştirin.
Ikon Color: #DD6ACA Başlık metninin rengini ve başlık metninin rengini değiştirin. Başlık Metin Rengi: #DD6ACA
Önizleme Şimdi bir öğreticiden geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Masaüstü Hücresel
Bu yazıdaki son zihin, sadece bir Hover sekmesi oluşturmak için varsayılan divi seçeneğini nasıl kullanacağınızı gösterdik. Bu yaklaşım, özellikler veya ürünler hakkındaki içeriği etkileşimli olarak paylaşmanıza yardımcı olacaktır. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
