Bir arka plan tasarlamak ister misiniz? Divi maskeler ve desenler sayesinde sayfada gezinirken canlanıyor mu? Bu eğitim sizin için...
Kaydırma animasyonu ekleme Divi ve arka plan maskeleri ve desenleri, arka plan tasarımlarınıza yeni bir soluk getirebilecek kullanışlı bir tasarım ipucudur. Site Web.
Bu eğitimde, kaydırma seçeneklerini kullanarak maskeleri ve arka plan desenlerini nasıl oluşturacağınızı ve canlandıracağınızı göstereceğiz. Divi (özel kod gerekmez).
Bunu yapmak için bir çizgi kullanarak kayan bir arka plan katmanı oluşturacağız. Divi Kullanıcı bir bölümü kaydırdığında maskeleri ve arka plan desenlerini canlandırmak için kullanacağız. içindekiler.
Sonucu beğeneceğinizi düşünüyoruz.
Başlayalım!
anket
İşte bu eğitim için arka plan kaydırma animasyonunun nasıl görüneceğine dair hızlı bir örnek.
Kavram
Bu tasarımın konseptini kavramak çok zor olmamalı. Degrade arka planı olan bir bölümle başlıyoruz.
Ardından, bölümü tamamen kaplayacak şekilde (bir bindirme gibi) konumlanmış (mutlak) bir çizgi oluşturuyoruz. Satıra bir arka plan deseni ekleyebiliriz.
Ardından, sütuna bir arka plan maskesi ekleyebiliriz.
Sonra ekliyoruz kaydırma efektleri bölümün arka planında deseni ve maskeyi ayrı ayrı canlandıracak satır ve sütuna (ölçekleme ve döndürme gibi).
Bölüm taşmasını gizlediğimizde, tüm gördüğümüz bölümün içerdiği animasyondur.
Divi Builder ile bir sayfa oluşturarak başlayalım
Başlamak için aşağıdakileri yapmanız gerekir:
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın kullanım Divi inşaatçı
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Ayrıca Oku: Divi: Resimlerinizi güzelleştirmek için "Gradient Builder" nasıl kullanılır?
Divi ile Kayan Animasyonlu Arka Plan Maskeleri ve Desenleri Nasıl Oluşturulur
Bölüm arka plan tasarımı
İlk olarak, bir satır oluşturmayı atlayacağız ve doğrudan tema oluşturucudaki mevcut varsayılan bölümü düzenlemeye geçeceğiz.
Arka plan tasarımımızın tarayıcıyı doldurması için bölüme dikey bir yükseklik eklememiz gerekiyor. Bunu yapmanın basit bir yolu, bölüme minimum bir yükseklik eklemektir.
Bölüm ayarlarını açın. sekmenin altında Dizayn, minimum yüksekliği güncelleyin ve dolguyu aşağıdaki gibi kaldırın:
- Marj: 80 vh (Üst ve Alt)
- Dolgu: 0 piksel (Üst ve Alt)
Bölüm için bir arka plan gradyanı tasarlama
Artık bölüme özel bir arka plan gradyanı ekleyebiliriz.
İlk degrade duraklarını eklemek için sekmenin altında bölüm ayarlarının açık olduğundan emin olun. içerik. Ardından sekmeyi seçin Arka Plan Gradyanı ve yeni bir degrade eklemek için tıklayın. Bu, iki varsayılan gradyan rengi ekleyecektir. Aşağıdaki Degrade Duraklarını aşağıdaki gibi renk ve konumla ekleyin:
- Gradyan Durakları:
- %0: #4158d0
- %50: #c850c0
- %100: #ffcc70
Ardından doğrusal degradenin yönünü değiştirin:
- Gradyan Yönü: 270 derece
Bölüme satır ekle
Artık bölümümüz yerinde olduğuna göre, bölüme tek sütunlu bir satır ekleyin. Bu satır, arka plan maskemiz ve desen kaydırma animasyonumuz için kullanılacaktır.
Daha sonra yeni oluşturduğunuz satırı çoğaltın. Bu ikinci (çoğaltılmış) satır bizim için kullanılacaktır. içindekiler normalde yapacağın gibi.
Artık arka plan kaydırma animasyonu için bir üst satırınız ve kaydırma animasyonu için bir satırınız olmalıdır. içindekiler Normal.
Satırı özelleştir
Artık bölüm arka plan gradyanımızı hazırladığımıza göre, kaydırmada arka plan animasyonumuz için kullanacağımız çizgiye dikkatimizi verebiliriz.
Hat ayarlarını açın. sekmenin altında gelişmiş, aşağıdakileri güncelleyin:
- Pozisyon: Mutlak
Bu, satırın belgede herhangi bir gerçek alan kaplamadan bölümün üzerine binmesine izin verecektir.
Şimdi tek yapmamız gereken, bölümün tüm genişliğini ve yüksekliğini kaplayacak şekilde yüksekliği ve genişliği güncellemek. Bu, ihtiyacımız olan kaplamayı ve ikinci arka plan tasarım katmanımızı oluşturacaktır.
Sekmenin altında Dizayn, boyutlandırma seçeneklerini aşağıdaki gibi güncelleyin:
- Aquasize Kolon Yükseklikleri: VAR
- Genişlik: %100
- Maksimum Genişlik: %100
- Yükseklik: %100
- Dolgu: 0 piksel (Üst ve Alt)
Şimdi çizgiyi göremeyebilirsiniz, ancak artık tüm bölümün arka planını mükemmel bir şekilde kaplıyor.
Çizgi için bir arka plan deseni oluşturun
Bu örnekte deseni ekleyeceğiz Konfeti satır arka planı olarak.
Hat ayarlarını açın. seçeneğin altında Olayın Arka Planısekmeyi seçin Arka Plan Deseni ve aşağıdakileri güncelleyin:
- Arka Plan Deseni: Konfeti
- Desen:
- Renk: #f6bef7
- Boyut: Özel Boyut
- Genişlik: 35 vw
- Menşei Tekrarla: Merkez
NOT : VW uzunluk biriminin kullanılması, desenin tarayıcıyla ölçeklenmesini sağlayarak tasarımın tutarlı ve duyarlı olmasını sağlar.
Satıra Kaydırma Efektleri Ekleyin
Artık arka plan desenimiz yerinde olduğuna göre, satıra kaydırma efektleri ekleyebiliriz.
Sekmeye git gelişmiş. seçeneğin altında Kaydırma Efektleri, aşağıdakileri güncelleyin:
Sekmeyi seçin Yatay Hareket ve aşağıdakileri güncelleyin:
- Yatay Hareketi Etkinleştir: EVET
- Başlangıç Ofseti: 0,5 (%0'da)
- Orta Ofset: 0 (%40'tan %60'a)
- Bitiş Ofseti: -0,5 (%100'de)
Bu, çizgi arka plan desenini 50 piksel sola ve 50 piksel sağa doğru hareket ettirir.
"Yukarı ve Aşağı Ölçek" sekmesini seçin ve aşağıdakileri güncelleyin:
- Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
- Başlangıç Ölçeği: %150 (%0'da)
- Orta Ölçek: %100 (%40'tan %60'a)
- Bitiş Skalası: %150 (%100'de)
Bu, kaydırma sırasında satırın arka plan desenini ölçeklendirir.
Sekmeyi seçin « dönen » ve aşağıdakileri güncelleyin:
- Döndürmeyi Etkinleştir: EVET
- Başlangıç Dönüşü: 10 derece (%0'da)
- Orta Dönüş: 0 derece (%40'tan %60'a)
- Bitiş Dönüşü: -10 derece (%100'de)
ANAHTAR İPUCU: Döndürmeyi minimumda tutmanız gerekir, aksi takdirde çizginin bölümü geçmediği yerlerde boşluklar gösterme riskiyle karşı karşıya kalırsınız. İyi bir kural, dönüşü artırmak istiyorsanız ölçeği artırmaktır. Bu, çizginin kenarları açığa çıkarmadan bölüm üzerinde dönmesine izin verecektir.
Sütuna kaydırma efektleriyle arka plan maskesi ekleyin
Satırımız tamamlandığında, aynı satırın sütununa kaydırma efektli bir arka plan maskesi eklemeye hazırız. Başlamak için bir arka plan maskesi ekleyelim.
Bunu yapmak için sütun ayarını açın. sekmenin altında Arka Plan Maskesi, aşağıdakileri güncelleyin:
- Maske: Katman Damlası
- Renk: #ffffff
- Maske Dönüşümü: Yatay Çevirme, Ters Çevirme
Sütuna kaydırma efektleri ekleyin
Artık arka plan maskemiz yerinde olduğuna göre, sütuna kaydırma efektleri ekleyebiliriz. Sütunun zaten üst satırdan devralınan kaydırma efektlerine sahip olduğunu unutmayın.
Tek yapacağımız, kaydırma süresi boyunca maske ve desenin daha fazla ayrılmasını sağlamak için sütunu satırın ters yönünde döndürmek.
Sekmeye git gelişmiş. Seçenekler altında Kaydırma Efektlerisekmeyi seçin rotative aşağıdakileri güncelleyin:
- Döndürmeyi Etkinleştir: EVET
- Başlangıç Dönüşü: -15 derece (%0'da)
- Orta Dönüş: 0 derece (%40'tan %60'a)
- Bitiş Dönüşü: 15 derece (%100'de)
Bölüm taşmasını gizle
Şu anda, kaydırma, bölümün ötesine geçmesine neden olduğunda satır görünür durumda kalır.
Bunu temizlemek için bölüm taşmasını gizlememiz gerekiyor. Bunu yapmak için bölüm ayarlarını açın. sekmenin altında gelişmiş, görünürlük seçeneklerini aşağıdaki gibi güncelleyin:
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Şimdi daha iyi görünüyor.
Ayrıca bakınız: Divi: 12 maske ve arka plan deseni kombinasyonu
Bu amaçla oluşturulan satıra içerik eklenmesi
Bu noktada, arka plan maskesi ve desen kaydırma animasyonu tamamlanmıştır. Tek yapmamız gereken daha önce içerik için oluşturduğumuz satıra istediğimiz içeriği eklemek.
Bu örnek için, arka plan animasyonunun statik metinle nasıl görüneceğini görebilmemiz için sahte bir başlık ekledik.
Nihai sonuç
Tasarımımızın nihai sonucuna bir göz atalım.
DIVI'yı şimdi indirin!!!
Sonuç
Divi'nin arka plan seçenekleriyle bu kadar güzel arka planlar yaratmanın bu kadar kolay olması inanılmaz. Ayrıca, Divi'nin kaydırma efektleriyle animasyon eklemek bu tasarımlara yeni bir soluk getiriyor.
Farklı bir görünüm için her katmanda farklı maskeler ve desenler deneyebilirsiniz. nasıl kullanılacağı hakkında daha fazla ilham almak istiyorsanız maskeler ve desenler arka plan, bunlara göz atın 12 arka plan maskesi ve desen kombinasyonu
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.
Rehberimize de danışmaktan çekinmeyin. 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ş.
...
