Divi ile tasarım öğelerine çarpışan animasyon nasıl uygulanır
Sayfanızdaki tasarım öğelerine animasyon ekleyin Kesinlikle katılımı artırmanıza yardımcı olabilir. Divi’nin Visual Builder’da birçok animasyon seçeneği var ve kullanımı oldukça kolay. Ancak bu animasyonla yaratıcı olabilir ve benzersiz bir şekilde kullanabilirsiniz. Bu yazıda, yalnızca varsayılan Divi seçeneğini kullanarak adım adım bir adım atacağımız üç çarpışan animasyon örneğini ele alacağız. Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, bu öğreticiye yeniden yapacağımız üç örneğe bakalım.
Örnek #1: Metin çarpıştı
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Mesafe ayrıca boşluk ayarlarındaki özel dolgu değerini de değiştirir.
Üst dolgu: 44px
Aşağıda dolgu: 0px Metin modülünü sütun 1’e ekleyin, içeriği ekleyin, metin modülünü satırın ilk sütununa ekleyerek ve biraz içerik ekleyerek devam edin. Başlık Metin Ayarları Bir sonraki başlık metin ayarlarını değiştirin.
Yazı tipi başlığı: Montserrat
Yazı tipi ağırlığı başlığı: ışık
Başlık Metin Boyutu: 4.4VW (Masaüstü), 8.2VW (Tablet), 40 piksel (Telefon) Enstrüman Yükseklik: 0.7EM
Bölücü modülünü Sütun 1’de Sütun 1 görünürlüğüne ekleyin Sütun 1’de gereken ikinci modülün bölücü modülüdür. ‘Ekran göster’ seçeneğini etkinleştirerek bölücünün göründüğünden emin olun. Divisor göster: evet
Renk tasarım sekmesine geçer ve bölücü rengini değiştirir. Renk: #000000
Yapıştırıcı bölücünün genişliğini de azaltır. Genişlik:% 91
Mesafe ve bölücü modülleri ve metin modülleri arasında boşluk yapmak için bazı üst kenar boşlukları ekleyin. Üst kenar boşluğu: 30 piksel
Son animasyon, bölücü modülüne güzel bir animasyon ekleyin. Animasyon Stili: Slayt
Animasyonlu Yön: Sol
Metin modülünü sütun 2’ye ekleyin, ikinci sütuna taşımak için içeriği ekleyin ve seçilen birkaç içeriğe sahip ikinci metin modülünü ekleyin. Başlık Metin Ayarları Bir sonraki başlık metin ayarlarını değiştirin. Yazı tipi başlığı: Montserrat
Yazı tipi ağırlığı başlığı: ışık
Başlık Metin Rengi: #3F46FF
Başlık Metin Boyutu: 3.8VW (masaüstü), 6.5VW (tablet), 40 piksel (telefon)
Yüksek çizgi başlığı: 0.8em
Bu modüle da animasyon ve animasyon ekleyin. Animasyon Stili: Slayt
Animasyonlu Yön: Sol
Animasyon gecikmesi: 600ms
Animasyon yoğunluğu:% 10
Sıra #2 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak bölüme başka satırlar ekleyerek devam edin: Kalan modülleri ekleyin, bu yeni hatta görüntülemek istediğiniz başka bir modül ekleyin ve ihtiyaçlarınıza göre değiştirin. Bir Örnek #2: Bölü Toplama Toplama Yapının özel kısmını bir sonraki örneğe ekleyin! Aşağıdaki yapıyı kullanarak yeni bir özel parça ekleyin: Herhangi bir satır veya modül eklemeden yapıştırıcı, parçanın ayarlarını açın ve ‘Bu genişliğin bu parçasını yapın’ seçeneğini etkinleştirin. Bu parçayı tam olarak yapın: evet
Satırlar #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: satır ayarlarının açık mesafesi ve özel dolgu ayarlarını değiştirin. Üst dolgu: 44px Aşağıda dolgu: 0px
Metin modülünü ekleyin, bir sonraki içerik ekleyin, metin modülünü seçilen birkaç içerikle satıra ekleyin.
Başlık Metni Ayarları Tasarım sekmesine geçin ve başlık metninin başlığını değiştirin. Yazı tipi başlığı: Montserrat Ağır yazı tipi başlığı: ışık
Başlık Metin Boyutu: 70px (masaüstü), 50px (tablet), 40 piksel (telefon)
Yüksek çizgi başlığı: 0.8em
Aşağıdaki sütun yapısını kullanarak diğer satırlar ekleyerek #2 sütun yapısı ekleyin:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarını değiştirin. Özel Talang genişliği kullanın: evet Talang genişliği: 1
Genişlik:% 53 (masaüstü),% 100 (tablet ve cep telefonu)
Mesafe ayrıca özel dolgu değerini de değiştirir.
Üst dolgu: 50 piksel Aşağıda dolgu: 0px
Satır ayarlarını değiştirmeyi bitirdikten sonra bölücü modülünü sütun 1 görünürlüğüne ekleyin, devam edin ve bölücü modülünü ilk sütuna ekleyin ve ‘Bölü’nü göster’ seçeneğini etkinleştirerek bölücünün göründüğünden emin olun.
Divisor göster: evet Renk bir sonraki bölücü rengini değiştirir.
Renk Renk: #3F46FF Stil ayarlarındaki bölücü kuvvetini stil ve değiştirin.
Bölme Stili: Çift Yapıştırıcı, boyut ayarlarında bölücü ağırlığını da arttırır.
Bölücü ağırlığı: 8px Son animasyon, bölücü modülüne animasyon ekleyin.
Animasyon Stili: Slayt Animasyonlu yön: doğru
Klon Bölü Modülü ve Bölme Modül ayarlarını değiştirmeyi bitirdikten sonra Sütun 2’ye yerleştirin, devam ve modül klonları. Çoğaltma satırın ikinci sütununa yerleştirin.
Animasyon Değiştir Çarpışan bir etki yaratmak için, animasyon yinelenen bölücü modülünün yönünü değiştirin. Gaya Animasyonu: Slayt Animasyonlu Yön: Sol Aşağıdaki sütun yapısını kullanarak diğer satırlar ekleyerek #3 sütun yapısı ekleyin:
Kalan modülleri ekleyin ve tasarım bölümünü tamamlamak istediğiniz mümkün olduğunca çok modül ekleyin.
Bir Örnek #3: Izgara Çarpışması Bir sonraki ve son örneğe mesafenin yeni bir kısmını ekleyin! Normal bölümü ekleyin ve ayarları açın. Alan ayarlarını açın, bazı özel dolgu değerleri ekleyin: Üst Dolgu: 300 piksel Dolgu Alt: 200px Sıra #1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
Görüntü modülünü görüntünün şeklinin yükleme sütununa ekleyin.
Şekilli görüntünün şeklini koruduktan sonra, divi web sitenize geri dönün ve görüntü modülünü satıra ekleyin. Kaplama resim dosyasını indirme klasörünüzde bulabileceğiniz formda yükleyin. Arka Plan Bir sonraki gradyan, gradyanın arka planını modüle ekleyin. Renk 1: #AA2BFF Renk 2: #09f7eb Hizalama görüntü seviyesini de değiştirir.
Görüntü Uygulama: Orta
Boyut ayarlarındaki ‘Force Fullwidth’ seçeneğini yapışkan ve etkinleştirin. Tam geniş zorla: Evet
Mesafe Modüle bazı özel marjlar da ekleyin. Sol kenar boşluğu: 200px
Sağ kenar boşluğu: 200px
Son animasyon, modüle animasyon ekleyin.
Animasyon Stili: Zoom
Animasyon yönü: merkez
Animasyon yoğunluğu:% 100
İkinci sıraya satır #2 sütun yapısı ekleyin. Aşağıdaki sütun yapısını kullanın:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarında bazı değişiklikler yapın. Özel genişliği kullanın: Evet
Birim: PX Özel genişlik: 944px Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Blurb modülünü sütun 1’e ekleyin, içeriği ekleyin, ilk sütuna bulanık modül ekleyerek devam edin. Seçilen bazı içerikler girin.
simge bir sonraki simgeyi seçin.
Arka plan rengi ve modüle da arka plan renkleri ekleyin.
Arka plan rengi: RGBA (255,255,255.0.83) Ikon ayarları Tasarım sekmesine geçer ve simge ayarlarını değiştirir. Renk simgesi: #000000 Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet Simge Yazı Tipi Boyutu: 73px
Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Yazı Tip Başlığı: Open Sans
Ağır yazı tipi başlığı: yarı kalın
Hizalama Metin Başlığı: Orta Başlık Metin Boyutu: 15px
Başlık mektubu aralığı: -1px
Çizgi Yüksekliği Başlığı: 1.8EM
Yapıştırıcı ve Boyut ayarında içeriğin genişliğini azaltır.
İçerik Genişliği: 183px
Mesafemiz de bazı özel üst ve alt rulmanlar ekleyecektir.
Üst dolgu: 50 piksel Dolgu Alt: 50 piksel
Kutunun gölgesi, bir bulanıklık modülüne pürüzsüz bir kutu gölgesi vererek devam eder. Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,3)
Gelişmiş sekmedeki geçiş süresini geçiş ve artırın. Geçiş süresi: 600ms
Klon Blurb Modülü 8 kez ve yer 3 Kalan sütunların her birinde, ilk bulanıklık modülünü değiştirmeyi bitirdikten sonra, 8 kez devam edebilir ve klonlayabilirsiniz. Üçüncü sütunda ikinci ve üç sütuna üç kopya yerleştirin. Bu öğreticinin bir sonraki bölümünde, her bulanıklık modülünde benzersiz bir değişiklik yapacağız. Bunu yapmak için aşağıdaki numarayı takip edeceğiz:
Bulanık Modül #1 İlk Blurb modülünün açık mesafesini değiştirin ve bazı negatif üst kenar ekleyin. Üst. İmleci yönlendirirken aralık doğrudan değişim marj değeri.
Üst kenar: -380px Alt kenar boşluğu: 40 piksel Sol kenar boşluğu: -40px
Sağ kenar boşluğu: 40 piksel Yuvarlak açı, modülün sol üst köşesine ’30px’ ekleyerek devam edin.
Animasyon ve animasyon ekleyin.
Animasyon Stili: Slayt
Animasyonlu Yön: Sol
Animasyon gecikmesi: 200ms Blurb Modülünü Değiştir #2 Arka Plan Rengi İkinci bulanıklık modülünü açın ve arka plan rengini değiştirin. Arka plan rengi: RGBA (255,255,255.0.93)
Modüle bazı negatif kenar boşlukları ekleyerek daha fazla mesafe.
Üst kenar: -340px (masaüstü), 0px (tablet ve cep telefonu)
İmleçi yönlendirirken bu marj değerini değiştirmek için spasi doğrudan. Üst kenar: -380px
Alt kenar boşluğu: 40 piksel Modüle animasyon ve animasyon ekleyin.
Animasyon Stili: Slayt Animasyonlu Yön: Sol
Animasyon gecikmesi: 400ms
Üçüncü Blurb modülüne kadar bulanık modül #3 mesafesini değiştirin. Negatiflere biraz marj ekleyin. Üst kenar: -340px (masaüstü), 0px (tablet ve cep telefonu)
İmleci yönlendirirken aralık doğrudan değişim marj değeri.
Üst kenar: -380px
Alt kenar boşluğu: 40 piksel Sol kenar boşluğu: 40 piksel
Sağ kenar boşluğu: -40px Yuvarlak açı, modülün sağ üst köşesine ’30px’ ekleyin.
Animasyon ve animasyon ekleyin.
Animasyon Stili: Slayt
Animasyonlu Yön: Sol
Animasyon gecikmesi: 600ms Blurb Modülünü Değiştir #4 arka plan renkleri dördüncü modüle devam edin. Ayarları açın ve arka plan rengini değiştirin. Arka plan rengi: RGBA (255,255,255.0.93)
SPasi Point Bir sonraki Hover marj değerlerinden bazılarını eklemek.
Sol kenar boşluğu: -40px
Sağ kenar boşluğu: 40 piksel Animasyon ve animasyon da ekleyin.
Animasyon Stili: Fades Gecikme Animasyonu: 800ms Blurb Modül #5 animasyonunu beşinci modüle değiştirin. Burada yapmanız gereken tek şey animasyon eklemek.
Animasyon Stili: Fades
Animasyon gecikmesi: 1000ms Blurb Modülünü Değiştir #6 Arka Plan Rengi Altıncı Modülü açarak ve arka plan rengini değiştirerek devam edin.
Arka plan rengi: RGBA (255,255,255.0.93)
Aralık Navig ayrıca zammdaki alanın değerini de değiştirir. Sol kenar boşluğu: 40 piksel
Sağ kenar boşluğu: -40px
Animasyon ve animasyon ekleyin. Animasyon Stili: Fades
Animasyon gecikmesi: 1200ms Blurb Modülünü Değiştir #7 Alan Yedinci Modül’e gidin. Uzay ayarlarına bazı kaydırma marj değerleri ekleyin.
Üst kenar boşluğu: 40 piksel
Sol kenar boşluğu: -40px Sağ kenar boşluğu: 40 piksel
Yuvarlak açı, modülün sol alt köşesine ’30px’ sınır yarıçapı ekleyerek devam edin.
Animasyon ve animasyon ekleyin. Animasyon Stili: Slayt
Animasyonlu yön: doğru
Animasyon gecikmesi: 1400ms
Bulanık Modül #8 arka plan renklerini değiştirin Sekizinci modülünü açarak ve arka plan rengini değiştirerek devam edin. Arka plan rengi: RGBA (255,255,255.0.93) SPASI Point İmleci bir sonraki modüle yönlendirirken bazı özel marjlar ekler.
Üst kenar boşluğu: 40 piksel
Animasyon bu bulanıklık modülüne de animasyon ekleyin.
Animasyon Stili: Slayt Animasyonlu yön: doğru
Animasyon gecikmesi: 1600ms Blurb Modülünü Değiştir #9 Alanları Dokuzuncu ve Son Modüle Gidin! Alan ayarlarını açın ve bazı özel gelişim marjı değerleri ekleyin.
Üst kenar boşluğu: 40 piksel Sol kenar boşluğu: 40 piksel
Sağ kenar boşluğu: -40px
Yuvarlak açı sağ alt köşeye ’30px’ sınır yarıçapını da ekleyin.
Animasyon ve animasyon ekleyin. Animasyon Stili: Slayt
Animasyonlu yön: doğru
Animasyon gecikmesi: 1800ms
Bu örneğin ilk bölümünde ve ızgarada yaptığımız daireyi çatalamak için #1 numaralı görüntü modülüne negatif bir alt kenar ekleyin, bazı negatif kenar boşlukları (kaplamalı görüntüler içeren) bir görüntü modülü vereceğiz. Önizleme Şimdi tüm adımlardan geçtikten sonra, elde ettiğimiz nihai sonuçlara bakalım.Örnek #1: Böcek Toplama Örnek #2: Metin çarpıştı
Örnek #3: Izgara çarpışması
İmleç yönlendirin
Son zihin, sayfanıza animasyon ekler, ziyaretçiler ve sizin arasında daha fazla etkileşim oluşturmaya yardımcı olabilir.Tabii ki, yalnızca görsel oluşturucuda sahip olduğunuz animasyon ayarlarını kullanabilirsiniz, ancak tasarım öğesine şaşırtıcı sonuçlar elde etmenize yardımcı olacak bir animasyon uygulayarak bir adım daha ileri gidebilirsiniz.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
