Divi’de deklanşörün etkisi ile içerik nasıl ifade edilir
İmleçi yönlendirirken modül içeriğini açığa çıkarmanın birkaç yararlı faydası olabilir. 1) Bu, ilk başta daha özlü veya zarif olan web sayfası tasarımınıza sahip olmanın iyi bir yolu olabilir. 2) Yerden tasarruf edin. 3) Bu, kullanıcıları sayfanızla etkileşim kurmaya çekebilir. 4) Havalı görünüyor :). Temel fikir, modül içeriğinin (alay gibi) yalnızca bir kısmını görüntülemektir, bu da ziyaretçilerin imleci daha fazla görmeye yönlendirmesini ilginç hale getirir. İmleci modüle işaret ettikten sonra, tüm içerik, bir deklanşör gibi açılan ve kapanan pürüzsüz vurgunun etkileriyle ortaya çıktı.
Bu öğreticide, DIVI Builder kullanarak modül içeriğini Hover Style Style Effect ile nasıl açığa çıkarabileceğinizi göstereceğim. Aşağıdaki gizlice göz atma, birlikte ne inşa edeceğimize bir bakış.
Dört açıklama ile “Lüks Spa Experience” başlıklı parçaya bulanık kaydırma sayfasının üstüne ve altına böcekleri ekleyin. Tasarımı başlatmak için dört açıklamalı satırları kullanacağız. İlk Bölücüyü Ekleyerek İlk adımımız, açıklamamızın içeriğini arkadaki içeriğini gizlemek için açıklamanın modülünün üstüne ve altına eklemektir. Bu bölücüyü yüzerken açılacak ve kapanacak bir servis olarak düşünebilirsiniz. Bölme modülünü ilk sütundaki açıklamanın üzerine ekleyin ve aşağıdakileri güncelleyin: arka plan rengi: #fffffff (bölücü): #ffffff ağırlık bölücü: 100px yüksek: 100 piksel Özel Marj: 0px alt beyaz arka arka arkada görmek istemiyorum BT. Bölücünün ağırlığının ve yüksekliğinin aynı olduğundan emin olun.
İkinci Divisor’u (turuncu) ekleyin, aşağıdakileri yeni oluşturduğunuz ve güncellediğiniz bölücünün altında başka bir bölücü yapın: Renk: #ff7a6b Bölme Ağırlığı: 2px Özellik: 2px Özel Marj: 0PX Bottom İçerik Sekmesine atlayın ve Yöneticiyi verin Bölücü “turuncu bölücü” etiket. Bu, bölücüyü diğer sütunlara kopyalamak ve takmak için çerçeve görüntü modunu kullandığımızda, bölücünün önceki bölücülerden (beyaz) ayırt edilmesine yardımcı olacaktır. Sayfanızı kaydedin. Bulanıklığın etrafındaki bölücüye geçip yapışarak şimdi her sütundaki her bir açıklamanın üstüne ve altına bölünmeye ve altına kopyalamaya ve eklemeye hazırız. Bu işlemi biraz daha kolay hale getirmek için, sayfanın altındaki Ayarlar menüsünü açıp tel kafes simgesine tıklayarak tel kafes modu uygulayın. (veya shft + w kullanın) Tel çerçeve modunda, az önce yaptığımız bir açıklama ve bölücü içeren çizgiler bulun. Daha sonra macun ve turuncu bariyeri her bir bulanıklık üstüne ve altına kopyalayın, böylece sonuç bu şekilde görünür. Ardından, tasarımı tamamlamak için masaüstü ekranına (SHFT + W) geri dönün. Sayfanız böyle görünecek. Blurb modülünü şimdi ayarlamak, tüm böcekleri yerinde bulunduktan sonra, bir dalgalanma tarzı kayan efekti oluşturmak için özel marjlar da dahil olmak üzere bazı stil ayarlarıyla açıklama modülümüzü düzenleme zamanı. İlk olarak, açıklamanın dört modülünü seçmek için çoklu seçici kullanın. Bunu yeterli CTRL (veya CMD) dirençli yapmak ve her modüle tıklayın. Ardından sermaye düzenleme sermayesini uygulamak için modüllerden birinin ayarını açın. İçerik sekmesinin altına, birkaç satır yapay içerik ekleyin. Sonra resim kutusunun gölgesini devre dışı bırakın. Bir deklanşör havalı efekti oluşturmak için, varsayılan olarak bölücünün arkasındaki içeriği gizlemek için üst ve alt negatif kenar boşlukları eklememiz gerekir. Ardından, kayanken içeriği ortaya çıkarmak için marjı 0px’e ayarladık. Bunu yapmak için aşağıdaki alanı ekleyin.
Özel Marj (Varsayılan): -100 piksel üst, -65px daha düşük özel kenar (nokta imleci): 0px üst, 0px daha düşük özel dolgu (nokta imleci): 10px üst, 10px aşağıda
Ne kadar içeriğe sahip olduğunuza bağlı olarak negatif marj değerini ayarlamanız gerekebilir.Örneğin, daha uzun metin içeriği için daha negatif marjlara sahip olmanız gerekebilir.Şimdi sonuçlara bakın.İmleci üste yönlendirene kadar bölücünün arkasına gizlenmiş her modülün üstüne ve altına dikkat edin. Deklanşörün etkisini temizleyin Modülü şu anda dikey olarak yoğunlaştırır, RANA imleçinin etkisi kalan içeriği altına iter. Her imleçle sayfa.Bu, sinir bozucu olabilecek bazı sayfa hareketlerine neden olur.Ayrıca, Hover’ın eylemi sadece gerçek bir deklanşör etkisi olmayan dibe yol açar.İçeriğin ortadan yukarı ve aşağı açılmasını istiyoruz.Bunu başarmak için aşağıdakileri yapmamız gerekir:Satır ayarlarını ve yüksek sütunu açın. Ardından devam eden sekmeyi açın ve ana öğenin altına aşağıdaki özel CSS girin: Hizalama: Merkez; Bu, modülün sütunda dikey olarak merkezlenmesini sağlayacak, bize deklanşörün yukarı ve aşağı etkilerini verecektir. Hover efektinin aşağıdaki sayfa içeriğine basmasını durdurmak için sabit bir yükseklik vererek, her bir vuruşla daha yükseğe çıkmamak için satırı durdurmamız gerekir. Bunu yapmak için kalıcı yüksekliği masaüstündeki satırımıza ayarlamalıyız. Yükseklik kalacağı için, satırın yüksekliğinin, açıklamanın içeriğinin yüksekliğini yüzer bir durumda karşılayacak kadar yüksek olduğundan emin olmanız gerekir. Ancak, çok yüksek yapmak istemezsiniz çünkü modülün üstünde ve altında çok fazla boş alan bırakacaksınız. Bu örnekte, hattın yüksekliğini 600 piksel olarak ayarlayacağım. Ancak, sadece masaüstünde kalan yüksekliği ayarlamak istediğimiz için, medya sorgularını kullanarak sayfa ayarlarımıza bazı CSS eklememiz gerekiyor. Yapmanız gereken bu. Her şeyden önce, satır ayarlarında, satırınıza CSS kimliği verin: ID CSS: Sabit Yükseklik
Ardından sayfa ayarlarını açın (devam eden sekmenin altında) ve aşağıdaki özel CSS’yi ekleyin: @media (min-width: 980px) { #Sabit yükseklik { Yükseklik: 600 piksel;
} }
Bu, masaüstünde 600 piksel sabit yükseklikte satırınızı verir ve geri kalan sayfa içeriğini aşağı itmesini durdurur.
İşte burada! Nihai Sonuçlar Son tasarıma bakın.
Ve bu deklanşör gelişim etkisidir.
Belki cep telefonu üzerindeki gelişim etkisini devre dışı bırakmak için iyi bir fikir. Bunu yapmak için tek yapmanız gereken, her modül için açıklamanın aşağıdaki gibi özel bir marj oluşturmaktır:
