Yüzerken kutunun gölgesini sürtünme arka planı olarak nasıl kullanılır
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, imleçleri yönlendirirken kutunun gölgesini sürtünme arka planı olarak nasıl kullanacağınızı göstereceğiz. Kişisel stilist düzen paketinin ana sayfasında çarpıcı görünen üç farklı örneği ele alacağız, ancak sahip olduğunuz olasılık gerçekten sınırsız. Yalnızca Divi varsayılan seçeneğini kullanarak her bir arka planı adım adım yeniden oluşturacağız.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce ve farklı örnekler, sonuçlara bakalım. örnek 1
Arka plan imlecini değiştirmek için arka plan rengini yönlendirin. Arka plan rengi: #ffffff
Varsayılan kutunun gölgesi, o bölüme varsayılan kutu gölgesini ekleyerek devam edin. Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 0px
Gölge Renk: RGBA (255,137,159.0.82)
Gölge Kutusunun Konumu: İçerideki Gölge
Kutunun gölgesini yönlendirin Kutunun gölgesinin yatay konumunu değiştirin. Herhangi bir seçim değeri ekleyin. Yatay Konum Gölge Kutusu: 800 piksel
Sürtünme efektinin yukarıdan aşağıya görünmesini istiyorsanız, kutunun gölgesinin dikey konumunda değişebilirsiniz. Dikey Konum Gölge Kutusu: 650px
Son fakat en az değil, kutunun gölgesinin arka plan rengi ve arka planı arasında hızlı bir geçiş yapmak için gelişmiş sekmedeki geçiş süresini azaltın. Geçiş süresi: 200ms
Geçiş hızı eğrisi: kolaylık
Yeni bir örnek #2 yap İlk metin modülünü değiştirin, metin ayarlarını bir sonraki örneğe daha da işaret edin! İlk sütunda bulabileceğiniz metin modülünü açın ve imleci yönlendirirken metnin rengini değiştirin. Metin Rengi: Işık
Yönetmen, imleci tasarım sekmesine yönlendirirken sınırın rengini değiştirerek devam edin. Sınır rengi: RGBA (255,137,159.0.82)
Varsayılan kutunun gölgesi sonra, kutunun gölge ayarını açın ve varsayılan kutu gölgesini ekleyin. Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 0px
Gölge Renk: RGBA (255,137,159.0.82)
Gölge Kutusunun Konumu: İçerideki Gölge
Kutunun gölgesini yönlendirin Yüzerken yatay konumu değiştirin. Yatay Konum Gölge Kutusu: 520px
Son fakat en az değil geçiş, düzgün bir geçiş yapmak için Gelişmiş sekmesindeki geçiş süresini artırın. Geçiş süreleri: 700ms Geçiş hızı eğrisi: kolaylık
Üçüncü metin modülüne üçüncü metin modülü için aynı modül stilini kullanıyoruz. Zamandan tasarruf etmek için yalnızca ilk metin modülünün modül stilini kopyalayacağız ve üçüncü metin modülüne takacağız.
İkinci metin modülü metin ayarları metin modülünü ikinci olarak, biraz farklı olarak değiştirin. Modülü açın ve metin ayarlarına gidin. Orada yapmanız gereken tek şey, imleci yönlendirirken metnin rengini değiştirmektir. Metin Rengi: Işık Sınırı yönlendirirken sınır ayarlarını girerek ve sınır rengini değiştirerek sınırın devam edin.
Sınır rengi: RGBA (255,137,159.0.82) Varsayılan kutunun gölgesi sürtünme arka planı ekleme zamanıdır! Aşağıdaki ayarları kullanarak varsayılan kutunun gölgesini ekleyerek başlayın:
Yatay konum gölge kutusu: 0px Dikey Konum Gölge Kutusu: 0px
Gölge Renk: RGBA (255,137,159.0.82)
Gölge Kutusunun Konumu: İçerideki Gölge
Kutunun gölgesini yönlendirin Yüzerken kutunun gölgesinin dikey konumunu değiştirin.
Dikey Konum Gölge Kutusu: 500 piksel Son fakat en az değil, bu metin modülünün geçiş süresini de artırın.
Geçiş süresi: 700ms Geçiş hızı eğrisi: kolaylık
Bir örnek #3 yap
Yapışkan satır ayarlarını bir sonraki ve son örneğe değiştirin! Satır ayarlarını açarak ve boyut ayarlarında bazı değişiklikler yaparak başlayın. Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 2
Sıraya da özel dolgu ekleyerek daha fazla mesafe.
Sol dolgu: 10vw Sağ dolgu: 10vwkolom 2 dolgu dolgu: 15VW (masaüstü), 0vw (tablet ve cep telefonu)
Varsayılan kutunun gölgesi daha sonra, varsayılan kutunun gölgesini satıra ekleyin.
Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 0px Gölge Renk: #FF899F
Gölge Kutusunun Konumu: İçerideki Gölge
Kutunun gölgesini yönlendirin Yüzerken yatay konumu değiştirin.
Yatay konum gölge kutusu: 50px
Geçişimiz ayrıca gelişmiş sekmedeki geçişlerin geçiş ve gecikmesi süresini değiştirdi. Geçiş süresi: 1000ms
Geçiş gecikmesi: 700ms Geçiş hızı eğrisi: kolaylık
Satır ayarlarını değiştirmeyi bitirdikten sonra boyutu silme ayarlarını değiştirin, devam edin ve bölüm ayarlarını açın. Tasarım sekmesine geçin ve sağ tıklayarak ve Sıfırla’yı tıklayarak genişliği yeniden ayarlayın.
Sınırı kaldırın, sınırın genişliği için de aynısını yapın.
Varsayılan kutunun gölgesi varsayılan kutunun gölgesini ekleyerek devam eder. Yatay konum gölge kutusu: 0px Dikey Konum Gölge Kutusu: 0px Gölge Renk: #2A2A2A
Gölge Kutusunun Konumu: İçerideki Gölge
Kutunun gölgesini yönlendirin Yüzerken kutunun gölgesinin yatay konumunu değiştirin.
Yatay konum gölge kutusu: 60px
Geçiş ve tasarımı tamamlamak için Gelişmiş sekmesindeki geçiş süresini artırın. Geçiş süresi: 1000ms
Önizleme Şimdi tüm adımlardan geçtikten sonra, adım adım yeniden yaptığımız son üç farklı örneğe bakalım. örnek 1 Örnek #2
Örnek #3
