Metin modülünü benzersiz bir kişiye dönüştürmek Divi’ye yöneliktir
Görüntü açıklamaları eklemenin yaratıcı yollarını mı arıyorsunuz? Varsayılan Hover Divi seçeneği ile şimdi eskisinden daha kolay. Bu yaklaşımı, referanslardan ekip üyelerinin tanımına ve daha fazlasına kadar web sitenizde çeşitli amaçlar için kullanabilirsiniz. Bu öğreticide, muhteşem web tasarımı elde etmenize yardımcı olacak 4 farklı örneği tartışacağız. Yalnızca varsayılan Divi seçeneklerini kullanarak dört örnek yaparız. Haydi Yapalım şunu! Önizleme Öğreticiyi adım adım girmeden önce, farklı ekran boyutlarında sonucuna bakalım.
Masaüstü
Sütun Arka Planının Tekrarlanması Resim 1: Tekrar yok Yapıştırıcı çizgi boyutu ayarlarını değiştirerek devam edin.
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Mesafe ve bazı özel dolgu değerleri ekleyin.
Üst dolgu: 150px
Dolgu Alt: 150 piksel Metin modülünü Sütun 1’e ekleyin Açıklamayı görüntülemek için içeriği ekleyin İmleç yönlendirirken, dört örneğin her biri için metin modülünü kullanacağız. Devam edin ve bu metin modülünü arka plan resimleri eklediğiniz yerle aynı sütuna ekleyin. Varsayılan metin ayarları ardından metin ayarlarını açın ve bazı değişiklikler yapın. Metin Rengi: RGBA (255,255,255.0)
Metin Boyutu: 0.7VW (masaüstü), 12 piksel (tablet ve cep telefonu)
Metin Oryantasyonu: haklı çıkar
Metin ayarlarını imleci yönlendirirken metnin rengini değiştirmek için yönlendirin. Metin rengi: #000000
Varsayılan başlık metin ayarları da metin ayarlarını değiştirir H3. Başlık 3 Font Ağırlığı: Ultra Kalın
Başlık 3 yazı tipi stili: büyük harf
Başlık 3 Renk Metni: RGBA (255,255,255.0)
Başlık 3 Metin Boyutu: 2.5VW (masaüstü), 40 piksel (tablet), 30px (telefon)
POS 3 Sıra Yükseklik: 2.2em
Başlık metni ayarlarına gidin ve imleci yönlendirirken farklı H3 metin renkleri uygulayın. Başlık 3 Renk Metni: #000000
Klon satırı 3 kez tüm genel adımlardan geçtikten sonra, dört örnek için bir satıra sahip olmamıza izin veren üç kez yaptığımız çizgileri devam edip klonlayabiliriz. Her örneğin başında bir sonraki satıra devam ettiğinizden emin olun. örnek 1 Varsayılan Arka Plan Renk Metin Modülünü Değiştirin İlk örnekle başlayalım! İlk sütunda metin modülünü açın ve arka plan rengini ekleyin. Arka plan rengi: RGBA (255,255,255.0)
Yüzerken bu arka planın rengini değiştirmek için arka plan rengini yönlendirin. Arka plan rengi: RGBA (255,255,255.0.73)
Varsayılan alan bazı özel kenar boşlukları ve bir sonraki dolgu ekler. Üst kenar: -500 piksel
Alt kenar boşluğu: 500 piksel
Üst dolgu: 250 piksel
Dolgu Alt: 250 piksel
Sol dolgu: 70pxpadding sağ: 70px
İmleci yönlendirirken doğrudan değişim değerleri.
Üst kenar boşluğu: 0px Alt kenar boşluğu: 0px
Üst dolgu: 100 piksel
Dolgu Alt: 100 piksel
Son geçiş, Gelişmiş sekmesindeki geçiş süresini artırarak düzgün bir geçiş yapın.
Geçiş süresi: 1000ms Örnek #2
Varsayılan arka plan renk metin modülünü bir sonraki örneğe değiştirin! İlk sütunda metin modülünü açın ve arka plan rengini ekleyin. Arka plan rengi: RGBA (255,255,255.0) Yüzerken arka plan rengini değiştirmek için arka plan rengini yönlendirin.
Arka plan rengi: RGBA (226,246,255.0.85) Varsayılan alan bazı özel kenar boşlukları ve bir sonraki dolgu değeri ekler.
Üst kenar boşluğu: 100 piksel Alt kenar boşluğu: 100 piksel
Üst dolgu: 150px
Dolgu Alt: 150 piksel
Sol dolgu: 70px
Sağ dolgu: 70px
İmleci yönlendirirken bu değerleri değiştirmek için doğrudan aralık.
Üst kenar boşluğu: 200px Alt kenar boşluğu: -200 piksel
Sol kenar boşluğu: 50 piksel
Üst dolgu: 100 piksel
Dolgu Alt: 100 piksel
Varsayılan sınır, metin modülüne sınır ekleyerek devam eder.
Sol sınır genişliği: 0px
Sol sınır rengi: #ffffff
Sınırı yönlendirin ve yüzerken sınırın genişliğini değiştirin.
Sol sınır genişliği: 8px
Geçiş süresi: 500ms Örnek #3
Üçüncü örneğe klon metin modülü! Bu örnek için, daha küçük ekran boyutları için ayrı bir sürüm yapmamız gerekir. İlk sütunda metin modülünün klonlanması. Gradyan sütunu 1’in arka planını ekleyin, ardından satır ayarlarını açın ve aşağıdaki ayarları kullanarak gradyanın arka planını ilk sütuna ekleyin: Renk 1: RGBA (43,135,218.0) Renk 2: #ffffff
Sütun 1 Tip gradyanı: Radyal
Sütun 1 radyal yön: merkez
Sütun 1 Başlangıç Pozisyonu:% 59
Sütun 1:%59 Sütun 1’in son konumu, gradyanı arka plan görüntüsünün üzerine yerleştirin: Evet
Metin Modülünü Değiştir #1 Arka Plan Gradyan Sütun 1’deki ilk metin modülünü açın. Bu, masaüstünde görünen bir açıklama olacaktır. Gradyanın arka planını ekleyin.
Renk 1: RGBA (239,239,239.0.65)
Renk 2: RGBA (255,255,255.0) Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 70
Son pozisyon:% 71
Varsayılan alan daha sonra, bazı özel marj ve dolgu değerleri ekleyin.
Üst Marj: 6VW
Alt marj: 6VW Üst Dolgu: 9VW
Dolgu Alt: 9VW
Sol dolgu: 2VW
Doğru dolgu: 2VW
İmleci yönlendirirken aralık doğrudan değişim marj değeri.
Sol kenar boşluğu: 15vw
Sağ kenar boşluğu: -15vw Görünürlük ve tabletler ve cep telefonlarında modülleri devre dışı bırakın.
Geçiş, geçiş süresini de arttırır.
Geçiş süresi: 500ms Sütun 1’deki ikinci modül gradyanının metin modülü #2 arka planını değiştirin, daha küçük bir ekran boyutunda görünecek bir açıklamadır. Gradyanın arka planını ekleyerek başlayın. Renk 1: RGBA (239,239,239.0.65)
Renk 2: RGBA (255,255,255.0) Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 70
Son pozisyon:% 71
Varsayılan alan bazı özel kenar boşlukları ve bir sonraki dolgu değeri ekler.
Üst Marj: 95px
Alt kenar boşluğu: 95px Üst dolgu: 170px
Dolgu Alt: 170px
Sol dolgu: 20px
Doğru dolgu: 20 piksel
İmleci yönlendirirken aralık doğrudan değişim marj değeri.
Üst kenar boşluğu: 250 piksel
Alt kenar boşluğu: -200 piksel Görünürlük ve masaüstündeki modülü devre dışı bırakın.
Son fakat en az değil metin modülünün metin yönünü değiştirin, istenen sonuçları elde etmek için iki modülün metin yönünü değiştirdiğinizden emin olun.
Metin Oryantasyonu: Orta Örnek #4 Varsayılan arka plan renk metin modülünü dördüncü ve son örneğe değiştirin! Sütun 1’deki metin modülüne aşağıdaki arka plan rengini ekleyin: Arka Plan Rengi: RGBA (255,255,255.0)
Yüzerken bu arka planın rengini değiştirmek için arka plan rengini yönlendirin. Arka plan rengi: RGBA (255,255,255.0.72) Varsayılan alan bir sonraki alan ayarlarını açar ve oraya bazı özel marjlar ve dolgu değerleri ekler.
Sol kenar boşluğu: -200 piksel Sağ kenar boşluğu: 200px
Üst dolgu: 250 piksel Dolgu Alt: 250 piksel
Sol dolgu: 70px
Sağ dolgu: 70px
İmleci yönlendirirken bu değerleri değiştirmek için doğrudan aralık.
Sol kenar boşluğu: 0px
Sağ kenar boşluğu: 0px
Üst Dolgu: 300 piksel Dolgu Alt: 300 piksel
Son fakat en az değil geçiş, düzgün geçiş için geçiş süresini artırın.
Geçiş süresi: 1200ms
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Masaüstü
Hücresel Bu yazıdaki son zihin, Hover’daki insanların açıklamasını görüntülemek için Hover Divi seçeneğini nasıl yaratıcı bir şekilde kullanabileceğinizi gösterdik. Bu dört örnekle, herhangi bir ekip üyesinin referanslarını veya açıklamalarını sayfanızdaki etkileşimli tasarım öğelerine değiştirmeye hazırsınız. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
