Gradyan arka plan animasyonu, arka plan renklerine hayat vermek için harika bir tasarım tekniği olabilir. Site Web. Yavaş yüklenen bir video arka planına başvurmak zorunda kalmadan statik bir arka plan renginden daha gerçekçi bir şey isteyenler için mükemmel bir çözüm. Degrade arka plan animasyonunun arkasındaki temel fikir, büyütme oluşturmak için CSS kullanmak ve düzgün hareket eden renk geçişleri oluşturmak için bir degrade arka planı canlandırmaktır.
Bu eğitimde, Divi'de gradyan arka plan animasyonlarının nasıl oluşturulacağını göstereceğiz. Bu yöntem, entegre Divi ayarlarında seçilen degrade renklerini canlandıran özel bir CSS parçacığını birleştirir. Yapılandırma aslında böylesine güzel bir sonuç için oldukça basit.
Başlayalım!
Uygun sonuç
Divi'de degrade arka plan animasyonu oluşturmanın iki yoluna genel bakış.
Tabii ki, bu eğitimin ön koşulu, bir Divi teması yüklü ve güncel.
CSS özü ve Divi'nin arka plan seçeneği ile bir gradyan arka plan animasyonu oluşturma
Başlamak için Divi Builder'daki varsayılan bölüme tek sütunlu bir satır ekleyin.
Bölüm ayarları
Ardından bölüm ayarlarını bir arka plan resmiyle güncelleyin. Gradyan arka planımız, bu görüntüyle örtüşecek şekilde çizgimize eklenecektir.
Ardından dolguyu aşağıdaki gibi güncelleyin:
- Dolgu: 0 piksel yüksek, 0 piksel düşük
Satır ve sütun ayarları
Sütun parametreleri
Satır ayarlarını açın, ardından sütun dolgusunu aşağıdaki gibi güncelleyin:
- Dolgu: 12vw'nin üzerinde
Ardından, ana sütun öğesine aşağıdaki özel CSS'yi ekleyin:
height: 40vw;
Satır Parametreleri
Gradyan arka planı
Şimdi degrade arka planını çizgiye ekleyebiliriz. Kesitin arka plan resmini görmek istiyorsanız gradyan renklerini yarı saydam yaptığınızdan emin olun.
Çizgi parametrelerini aşağıdaki gibi güncelleyin:
- Sol gradyan arka planı rengi: rgba (12,113,195,0.8)
- Sağdaki gradyan arka planı rengi: rgba (131,0,233,0.8)
- Gradyan türü: doğrusal
- Gradyan yönü: 45 derece
boyut
Ardından satır boyutunu aşağıdaki gibi güncelleyin:
- Genişlik:% 100
- Maksimum genişlik:% 100
Özel CSS sınıfı
Artık gradyan arka planımız yerinde olduğuna göre, animasyonu özel CSS aracılığıyla eklememiz gerekiyor. CSS kodunu eklemeden önce, o belirli satırı hedeflemek için özel bir CSS sınıfı eklememiz gerekir.
Gelişmiş sekmesine gidin ve aşağıdaki CSS sınıfını ekleyin:
- CSS sınıfı: animasyon-gradyan
Kod modülü ekle
CSS sınıfı satıra eklendikten sonra, satıra bir kod modülü ekleyin.
Kod modülüne CSS yapıştırma
Sonra aşağıdaki CSS kodunu Kod Kodu Ayarları Modülü alanına yapıştırın:
.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
Kodu içeri sardığınızdan emin olun. <style></style>etiketleri çünkü sayfanın HTML koduna ekliyoruz.
Sonuç
İşte şimdiye kadarki sonuç. Gradyan arka planı orijinal boyutunun% 400'ü kadar büyütüldü ve sola ve sağa hareket ettirilerek canlandırıldı.
Harekete geçirici mesaj ekleyin
Tasarımı bitirmek için, projenin bir parçası olacak bir harekete geçirici mesaj modülü ekleyelim. içindekiler.
Harekete geçirici mesaj ayarları
içindekiler
Güncelleme içindekiler aşağıdaki gibi
- Başlık ekleyin
- Düğme metni ekle
- Gövde metni ekle
- Düğmenin bağlantısının URL’si: #
- Arka plan rengini kullan: HAYIR
Gebe kalma
Tasarım sekmesine gidin ve aşağıdakileri güncelleyin:
- Başlık yazı tipi: Kaushan Script
- Başlık metni boyutu: 4vw (masaüstü), 30 piksel (telefon)
- Başlık satırı yüksekliği: 1,4 em
- Vücut Polisi: Roboto
- Düğme metni boyutu: 16px
- Düğme metni rengi: # 555555
- Düğme arka planı: #ffffff
- Düğme kenarlığı genişliği: 0 piksel
- Düğme kenarlığı yarıçapı: 30 piksel
- Düğme harf aralığı: 3 piksel
- Düğme yazı tipi: Roboto sıkıştırılmış
- Düğme yazı tipi ağırlığı: kalın
Sonuç
Şimdi canlı sayfadaki sonucu şu şekilde kontrol edin: içindekiler eylem çağrısı yerinde. Bu senin için harika bir başlık olurdu Site Web !
Unutmayın, çizginizin arka plan renklerini istediğiniz gibi kolayca değiştirebilirsiniz. Kod, sizin için arka planı canlandırmak için arka planda çalışmaya devam edecektir.
Biraz CSS biliyorsanız, animasyon özelliklerinin değerlerini değiştirerek animasyonun hızını ve yönünü ayarlayabilirsiniz.
Umarım bu öğreticiyi faydalı bulmuşsunuzdur. Bu konudaki fikirlerinizi paylaşmaktan çekinmeyiniz.
