DIVI ile aşağı kaydırırken tam olarak ortaya çıkan yapışkan bir altbilgi oluşturmak ister misiniz?
Dosyanıza yapışkan bir altbilgi ekleme Site Web aradığınız o küçük ekstra dokunuşu Site Web. Aşağı kaydırırken altbilginin ortaya çıkmasını sağlayan "Reveal" efekti, web sayfalarınıza oldukça çekici bir tasarım kazandıracaktır.
Genellikle bu efekt, sınırlayıcı ve kullanımı zor olan özel CSS gerektirir. Ancak DIVI sayesinde bunu kolayca başarabilirsiniz.
Bu öğreticide, yapışkan altbilginize nasıl Göster efekti oluşturacağınızı göstereceğiz. Tek gereken birkaç kolay adım.
Başlayalım!
anket
Bu eğitimde oluşturacağımız Reveal efektli yapışkan altbilgiye kısa bir genel bakış.
Yeni bir altbilgi şablonu oluşturun
Ziyaret Divi >> Tema Oluşturucu WordPress kontrol panelinden.
Orada, tıklayın "Genel bir altbilgi ekle"
sonra seç "Küresel bir Altbilgi Oluşturma"
Bu öğreticide, oluşturma sürecini hızlandırmak için önceden hazırlanmış bir düzen kullanacağız, ancak bunu sıfırdan da yapabilirsiniz. Bunu yapmak için tıklayın "Kütüphaneden Yükle".
Açılır pencerenin altında Kitaplıktan Yükle, düzeni bulun ve kullanın " Marina Hakkında Sayfası » Marina yerleşim paketinden.
Düzen yüklendikten sonra altbilgi bölümü dışındaki tüm bölümleri silin. Reveal efektini eklemek için bu altbilgi bölümünü kullanacağız.
Göster efekti ekleyin ve alt bilgiyi yapışkan hale getirin
Altbilgiyi yapışkan yap
Ayrıca bakınız: DIVI'da kayan ve itmeli menü nasıl oluşturulur?
Öncelikle altbilgiyi yapışkan hale getirmemiz gerekiyor. Bunu yapmak için bölüm ayarlarını açın ve sekmeye tıklayın gelişmiş. Altında "Kaydırma Efektleri", ayarları aşağıdaki gibi değiştirin:
- Yapışkan Konum: Aşağıya Yapış
Yapışkan durum için Z indeksini güncelleyin
Ardından, bölüm yapışkan durumdayken altbilgi bölümümüze 0 z-endeksi vermemiz gerekiyor. Bu, bölümün kaydırılırken sayfanın gövdesindeki diğer bölümlerin veya öğelerin gerisinde kalmasını sağlar.
Bunu yapmak için Z İndeksi seçeneğinin yanındaki yapışkan simgeye tıklayarak Z İndeksi konumunu güncelleyin. Ardından Z indeksini 0 olarak güncelleyin.
- Z indeksi (yapışkan): 0
Yapışkan alt bilgi yer tutucusu Z dizinini güncelle
Divi'de bir öğeye yapışkan bir konum atandığında, otomatik olarak yinelenen bir yer tutucu öğe de oluşturulur. Bu, Divi Builder'ı kullanarak yapışkan öğeleri konumlandırmak ve tasarlamak için gereken işlevselliği sağlar.
Ayrıca bakınız: Divi's Theme Builder ile Global Başlık Nasıl Oluşturulur
Bu durumda, varsayılan z-endeksi 1 olan bir altbilgi bölümü yer tutucusu oluşturulur. Asıl yapışkan altbilgi bölümümüzü (şimdi Z-endeksi 0 olan) yer tutucu bölümünün arkasında istemiyoruz, bu yüzden Yer tutucunun Z indeksi -1'e.
Bunu yapmak için önce altbilgi bölümüne aşağıdaki gibi özel bir CSS sınıfı ekleyin:
- CSS sınıfı: yapışkan-altbilgi-göster
Ardından, ekranın ayarlar menüsünü kullanarak sayfa ayarlarını açın. Tema Oluşturucu.
Sekmeye git " Gelişmiş " ve kutuya aşağıdaki CSS'yi girin CSS'yi özelleştir :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Bu, yer tutucu bölümü yapışkan altbilginin arkasında kalmaya zorlar.
Değişiklikleri Kaydet
Tamamlandığında, altbilgi şablonunda yapılan değişiklikleri kaydedin.
Ayrıca Divi Tema Oluşturucu değişikliklerini kaydedin.
Nihai sonuç
Nihai sonucu görmek için bir sayfayı görüntüleyin ve kaydırın.
DIVI'yı şimdi indirin!!!
Sonuç
Divi'de, içeriğinize yapışkan bir altbilgi ekleme Site Web bir eklenti veya karmaşık özel CSS gerektirmez. Yapıcıyı kullanma temalarile kolayca bir alt bilgi şablonu oluşturabilirsiniz. Etkiyi Göster birkaç dakika içinde
Umarız bu, altbilgi tasarımınıza çekici bir etkileşimle ince bir destek sağlar. ziyaretçi takdir edecek. Herhangi bir endişeniz veya öneriniz varsa, bizi burada bulun yorumlar bölümü bunu tartışmak için.
Ayrıca bakınız kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
