Divi ile her kap için güzel bir animasyon taslağı nasıl yapılır
Divi animasyon seçenekleri, özel kodlar gerektirmeden birçok web sitesini açmaya yardımcı oldu. Varsayılan animasyon ayarları ayarlanabilir ve çok benzersiz bir tasarım oluşturmanıza olanak tanır. Örneğin yapabileceğiniz şeylerden biri animasyonlu bir konteyner çerçevesi oluşturur. Bu yazıda size göstereceğimiz tam olarak bu. Her bir kabına limit ekleyeceğiz ve her bir öğenin akışıyla eşleşen animasyon ayarları ekleyeceğiz. JSON dosyalarını ücretsiz olarak da indirebilirsiniz! Haydi Yapalım şunu. Önizleme Eğiticiye girmeden önce sonuçlara tüm ekran boyutlarındaki bakalım.
Masaüstü
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanallarımıza abone olun, arka plan renginin yeni bir bölümünü oluşturmaya başlayalım, üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın ve arka plan rengini beyaz kullanın.
Arka plan rengi: #ffffff
Mesafe Tasarım sekmesine geçin ve bazı marj ve özel dolgu değerleri ekleyin. Üst Marj: 3VW
Alt marj: 3VW
Sol kenar boşluğu: 3VW
Doğru marj: 3VW
Üst Dolgu: 3VW
Dolgu Alt: 3VW
Bir sonraki sınır ayarını açın ve her köşeye ‘2VW’ ekleyin. Sınırı da kullanın. Sınır Genişliği: 1 piksel
Sınır rengi: #000000
Animasyon ayrıca özel animasyon ekler. Animasyon Stili: Slayt
Animasyonlu yön: aşağıda
Animasyon Opaklık Başlar:% 100
Görünürlük Hiçbir şeyin rezervuarı aşmamasını sağlamak için, bölümün görünürlük ayarlarındaki taşmayı gizleyeceğiz. Yatay taşma: gizli
Dikey taşma: gizli
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve uygun boyut ayarlarını değiştirin: Özel Talang genişliği kullanın: evet
Talang genişliği: 2
Genişlik:% 94
Maksimum genişlik:% 100
Mesafe Bir sonraki özel dolgu değerleri ekleyin. Üst Dolgu: 3VW
Dolgu Alt: 3VW
Sol dolgu: 3VW
Doğru dolgu: 3VW
Sınır ayarlarına taşınır ve her köşeye ‘2VW’ ekler. Sınırı da ekleyin. Sınır Genişliği: 1 piksel
Sınır rengi: #000000
Animasyonumuz da satıra animasyon ekliyor. Animasyon: slayt Animasyonlu yön: üst
Animasyon gecikmesi: 500ms
Animasyon Opaklık Başlar:% 100
Görünürlük ve sütun animasyonunun (daha sonra ekleyeceğiz) işlevini sağlamak için, satır taşmasını görünür hale getireceğiz.
Yatay taşma: görünür Dikey taşma: görünür
Sütun 1 ayarları ilk sütun ayarlarını açarak devam eder.
Tasarım sekmesini açın, her köşeye ‘2VW’ ekleyin ve sınırı kullanın. Sınır Genişliği: 1 piksel Sınır rengi: #000000
Animasyon gecikmesi: 1000ms
Animasyon Opaklık Başlar:% 100
Blurb modülünü sütun 1’e ekleyin. İhtiyacımız olan ilk şey bulanıklık modülü. İstediğiniz bazı içerikleri girin.
Simgeyi seçin Bir sonraki simgeyi seçin. Simgeyi ayarlama Tasarım sekmesine geçer ve uygun simge ayarlarını değiştirin: Renk simgesi: #000000 Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 6VW (masaüstü), 8VW (tablet), 10vw (telefon)
Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Yazı Tip Başlığı: Poppins Ağır yazı tipi başlığı: Ultra Kalın
Hizalama Metin Başlığı: Orta
Boyut Metin Başlığı: 1.2VW (Masaüstü), 2.5VW (Tablet), 3VW (Telefon)
Gövde metni ayarları içerik metin ayarlarına denk gelir.
Gövde yazı tipi: açık sans Vücut metninin hizalanması: orta
Gövde metni boyutu: 0.8VW (masaüstü), 1.7vw (tablet), 2.3vw (telefon)
Çeşitli ekran boyutlarına özel alan değerleri ekleyerek bulanık modülün etrafındaki bazı boşluklar için mesafe.
Üst Marj: 3VW Alt marj: 3VW
Sol kenar boşluğu: 3VW
Doğru marj: 3VW
Üst Dolgu: 10VW (masaüstü), 18VW (Tablet ve Cep Telefonu) Dolgu Aşağıda: 10VW (masaüstü), 18VW (Tablet ve Cep Telefonu)
Sol dolgu: 2VW (masaüstü), 8VW (tablet ve cep telefonu)
Sağ dolgu: 2VW (masaüstü), 8VW (tablet ve cep telefonu)
Sınır ayarlarına sınır hareketleri, her köşeye ‘2VW’ ekleyin ve sınırı kullanın.
Sınır Genişliği: 1 piksel
Sınır rengi: #000000 Animasyon Özel animasyon ekleyerek bulanıklık modülünün tasarımını tamamlayın.
Animasyon Stili: Slayt
Animasyonlu yön: aşağıda Animasyon Süresi: 1300ms
Animasyon gecikmesi: 1200ms
Animasyon yoğunluğu:% 60
Animasyon Opaklık Başlar:% 100
Animasyonlu simge: animasyon olmadan
Düğme modülünü Sütun 1’e ekleyin Bir sonraki ve son olarak düğme modülüne bir kopya ekleyin. Seçtiğiniz bazı kopyaları girin.
Hizalama Tasarım sekmesine geçer ve seviyelendirmeyi değiştirir.
Düğmenin hizalanması: orta Ayarlar Sonraki Düğme Değiştir düğmesi. Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 0.8VW (masaüstü), 1.5VW (tablet), 2.2vw (cep telefonu) Metin Renk Düğmesi: #000000
Arka plan renk düğmesi: #ffffff
Sınır sınır genişliği: 1px
Düğme Sınır Rengi: #000000
Sınır Sınır Yarıçapı: 50VW
Yazı tipi düğmesi: SANS’ı açın
Mektup Ağırlığı Düğmesi: Çok kalın
Yazı tipi stili düğmesi: büyük harf
Düğme modülünün mesafesi ve şekli, çeşitli ekran boyutlarında özel alan değerleri kullanır.
Üst kenar: -5vw (masaüstü), -6.5vw (tablet), -7vw (telefon)
Alt kenar boşluğu: 2VW (masaüstü), 3VW (tablet ve cep telefonu) Üst Dolgu: 1VW (masaüstü), 2VW (tablet ve cep telefonu)
Aşağıda dolgu: 1VW (masaüstü), 2VW (tablet ve cep telefonu)
Sol dolgu: 5VW (masaüstü), 8VW (tablet ve cep telefonu)
Sağ dolgu: 5VW (masaüstü), 8VW (tablet ve cep telefonu)
Animasyon Özel animasyon ekleyerek tasarım modülü düğmesi tasarımını tamamlayın. Gaya animasyonu: slayt
Animasyonlu yön: üst
Animasyon gecikmesi: 1400ms Animasyon yoğunluğu:% 200
Animasyon Opaklık Başlar:% 100
Sütun 2 ve Klon Sütunu 1 Kaldır Sütun 1 ve modülü tamamladıktan sonra, ikinci (boş) sütunu silebilir ve birincisini klonlayabilirsiniz. Web sitenize uyacak şekilde bulanık modülün tüm içeriğini değiştirin ve bitirin!
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Bu yazıdaki son zihin, Divi ve sınırları tarafından sağlanan çeşitli kaplarla birlikte Divi animasyon ayarlarının nasıl kullanılacağını gösterdik. Bu öğretici de bu teknikten kendi varyasyonunuzu yapmanıza ilham verir! Bir sorunuz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun. Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanallarımıza abone olun, arka plan renginin yeni bir bölümünü oluşturmaya başlayalım, üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın ve arka plan rengini beyaz kullanın.
Arka plan rengi: #ffffff
Mesafe Tasarım sekmesine geçin ve bazı marj ve özel dolgu değerleri ekleyin. Üst Marj: 3VW
Alt marj: 3VW
Sol kenar boşluğu: 3VW
Doğru marj: 3VW
Üst Dolgu: 3VW
Dolgu Alt: 3VW
Bir sonraki sınır ayarını açın ve her köşeye ‘2VW’ ekleyin. Sınırı da kullanın. Sınır Genişliği: 1 piksel
Sınır rengi: #000000
Animasyon ayrıca özel animasyon ekler. Animasyon Stili: Slayt
Animasyonlu yön: aşağıda
Animasyon Opaklık Başlar:% 100
Görünürlük Hiçbir şeyin rezervuarı aşmamasını sağlamak için, bölümün görünürlük ayarlarındaki taşmayı gizleyeceğiz. Yatay taşma: gizli
Dikey taşma: gizli
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve uygun boyut ayarlarını değiştirin: Özel Talang genişliği kullanın: evet
Talang genişliği: 2
Genişlik:% 94
Maksimum genişlik:% 100
Mesafe Bir sonraki özel dolgu değerleri ekleyin. Üst Dolgu: 3VW
Dolgu Alt: 3VW
Sol dolgu: 3VW
Doğru dolgu: 3VW
Sınır ayarlarına taşınır ve her köşeye ‘2VW’ ekler. Sınırı da ekleyin. Sınır Genişliği: 1 piksel
Sınır rengi: #000000
Animasyonumuz da satıra animasyon ekliyor. Animasyon: slayt Animasyonlu yön: üst
Animasyon gecikmesi: 500ms
Animasyon Opaklık Başlar:% 100
Görünürlük ve sütun animasyonunun (daha sonra ekleyeceğiz) işlevini sağlamak için, satır taşmasını görünür hale getireceğiz.
Yatay taşma: görünür Dikey taşma: görünür
Sütun 1 ayarları ilk sütun ayarlarını açarak devam eder.
Tasarım sekmesini açın, her köşeye ‘2VW’ ekleyin ve sınırı kullanın. Sınır Genişliği: 1 piksel Sınır rengi: #000000
Animasyon Özel animasyon ekleyerek sütun ayarlarını tamamlayın.
Animasyon Stili: Slayt
Animasyon gecikmesi: 1000ms
Animasyon Opaklık Başlar:% 100
Blurb modülünü sütun 1’e ekleyin. İhtiyacımız olan ilk şey bulanıklık modülü. İstediğiniz bazı içerikleri girin.
Simgeyi seçin Bir sonraki simgeyi seçin. Simgeyi ayarlama Tasarım sekmesine geçer ve uygun simge ayarlarını değiştirin: Renk simgesi: #000000 Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 6VW (masaüstü), 8VW (tablet), 10vw (telefon)
Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Yazı Tip Başlığı: Poppins Ağır yazı tipi başlığı: Ultra Kalın
Hizalama Metin Başlığı: Orta
Boyut Metin Başlığı: 1.2VW (Masaüstü), 2.5VW (Tablet), 3VW (Telefon)
Gövde metni ayarları içerik metin ayarlarına denk gelir.
Gövde yazı tipi: açık sans Vücut metninin hizalanması: orta
Gövde metni boyutu: 0.8VW (masaüstü), 1.7vw (tablet), 2.3vw (telefon)
Çeşitli ekran boyutlarına özel alan değerleri ekleyerek bulanık modülün etrafındaki bazı boşluklar için mesafe.
Üst Marj: 3VW Alt marj: 3VW
Sol kenar boşluğu: 3VW
Doğru marj: 3VW
Üst Dolgu: 10VW (masaüstü), 18VW (Tablet ve Cep Telefonu) Dolgu Aşağıda: 10VW (masaüstü), 18VW (Tablet ve Cep Telefonu)
Sol dolgu: 2VW (masaüstü), 8VW (tablet ve cep telefonu)
Sağ dolgu: 2VW (masaüstü), 8VW (tablet ve cep telefonu)
Sınır ayarlarına sınır hareketleri, her köşeye ‘2VW’ ekleyin ve sınırı kullanın.
Sınır Genişliği: 1 piksel
Sınır rengi: #000000 Animasyon Özel animasyon ekleyerek bulanıklık modülünün tasarımını tamamlayın.
Animasyon Stili: Slayt
Animasyonlu yön: aşağıda Animasyon Süresi: 1300ms
Animasyon gecikmesi: 1200ms
Animasyon yoğunluğu:% 60
Animasyon Opaklık Başlar:% 100
Animasyonlu simge: animasyon olmadan
Düğme modülünü Sütun 1’e ekleyin Bir sonraki ve son olarak düğme modülüne bir kopya ekleyin. Seçtiğiniz bazı kopyaları girin.
Hizalama Tasarım sekmesine geçer ve seviyelendirmeyi değiştirir.
Düğmenin hizalanması: orta Ayarlar Sonraki Düğme Değiştir düğmesi. Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 0.8VW (masaüstü), 1.5VW (tablet), 2.2vw (cep telefonu) Metin Renk Düğmesi: #000000
Arka plan renk düğmesi: #ffffff
Sınır sınır genişliği: 1px
Düğme Sınır Rengi: #000000
Sınır Sınır Yarıçapı: 50VW
Yazı tipi düğmesi: SANS’ı açın
Mektup Ağırlığı Düğmesi: Çok kalın
Yazı tipi stili düğmesi: büyük harf
Düğme modülünün mesafesi ve şekli, çeşitli ekran boyutlarında özel alan değerleri kullanır.
Üst kenar: -5vw (masaüstü), -6.5vw (tablet), -7vw (telefon)
Alt kenar boşluğu: 2VW (masaüstü), 3VW (tablet ve cep telefonu) Üst Dolgu: 1VW (masaüstü), 2VW (tablet ve cep telefonu)
Aşağıda dolgu: 1VW (masaüstü), 2VW (tablet ve cep telefonu)
Sol dolgu: 5VW (masaüstü), 8VW (tablet ve cep telefonu)
Sağ dolgu: 5VW (masaüstü), 8VW (tablet ve cep telefonu)
Animasyon Özel animasyon ekleyerek tasarım modülü düğmesi tasarımını tamamlayın. Gaya animasyonu: slayt
Animasyonlu yön: üst
Animasyon gecikmesi: 1400ms Animasyon yoğunluğu:% 200
Animasyon Opaklık Başlar:% 100
Sütun 2 ve Klon Sütunu 1 Kaldır Sütun 1 ve modülü tamamladıktan sonra, ikinci (boş) sütunu silebilir ve birincisini klonlayabilirsiniz. Web sitenize uyacak şekilde bulanık modülün tüm içeriğini değiştirin ve bitirin!
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Bu yazıdaki son zihin, Divi ve sınırları tarafından sağlanan çeşitli kaplarla birlikte Divi animasyon ayarlarının nasıl kullanılacağını gösterdik. Bu öğretici de bu teknikten kendi varyasyonunuzu yapmanıza ilham verir! Bir sorunuz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun. Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
