Süreç ilerlemesini göstermek için divi slayt animasyonunu kullanma
İnanılmaz sayfa bölümleri tasarlamak için Divi’nin yeni animasyon seçeneklerini nasıl kullanacağınızı öğretecek olan bu 6 dizinin 3. bölümüne hoş geldiniz. Web sitenize animasyon ekleme tekniğini göstermek için doğrudan demo sayfamızın farklı bir bölümünü nasıl oluşturacağınız konusunda size rehberlik edeceğim. Animasyonlu özellikler gerçekten eğlenceli ve kullanımı kolay. Ve görsel inşaatçı ile kreasyonlarınızı her aşamada canlı olarak görebilirsiniz. Divi’nin animasyonunun gücünü keşfettiğimizde gel ve bana katılın.
Son yazımızda, animasyonlu demo sayfalarımızın 3. ve 4. bölümlerini yaptığımızda ürün ve hizmetleri görüntülemek için web sitenizi tasarlamak ve canlandırmanın bir dizi yaratıcı yolunu gösteriyorum.
Bugün, dört şaşırtıcı bulanık modülü görüntülemek için harika animasyonlar kullanan Bölüm 5’i ele alacağız. Animasyon açıklamasından adım adım, açıklamanın kullanıldığı adım adım gerçekten tamamlar. Bölünelim! İşte bugünün gönderisinde ne inşa edeceğimiz bir göz atın Tasarım öğesinin hazırlanması Bu öğretici için gerçekten ihtiyacınız olan tek şey, bulanıklık modülü için kullanılan Şekil 4 207×188’in simgesidir. İşte kullanacağım görüntüler. Süreç ilerlemesini göstermek için divi slayt animasyonunu kullanma
Visual Builder’ı kullanarak Bina 5’in YouTube Kanalı bölümümüze abone olun, normal bölümü ekleyin (diziyi takip ederseniz Bölüm 4 altında). Başka bir şey yapmadan önce, arka plan rengini #f5f9fc ekleyin ve ayarlarınızı kaydedin. İki metin modülü kullanarak bölümünüzün başlığını ekleyin, ardından bir satır bir sütun ekleyin. Satırda, metin modülünü ekleyin ve ayarları aşağıdaki gibi güncelleyin. İçerik sekmesinin altında … İçerik: Tasarım sekmesinin altında “Hazırlık” … Metin yazı tipi: kalın (b), büyük harf (tt) metin yazı tipi metin: 15px metin Renk Metin: #6A8091 Uzay metin mektubu: 5px metnin yüksekliği Satır: 1.9EM Metin Oryantasyonu: Middlepasi: 20 piksel daha düşük animasyon stili: Slayt Animasyon Yönü: Animasyonun Üzerinde: 850ms
Bu animasyonlu etki basit bir slayt yukarı ve görülüyor.
Ayarları Kaydet Şimdi, yeni oluşturduğunuz başka bir metin modülü ekleyerek bölümün başlığını ekleyelim. Metin ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesi altında … Metin sekmesi içerik kutusuna aşağıdaki html ekleyin: & lt; h1 & gt; divi & lt;/h1 & gt; Tasarım sekmesinin altında … Başlık Yazı Tipi: Kalın (B) Metin Başlıkını Temizleme: Orta Boyut Yazı Tipi Başlık: 39px Renk Metin Başlığı: #2F3A54 NOT: Bu H1 başlığı olduğu için başlık metin ayarlarını düzenlememiz gerekir.
Genişlik: 600 piksel (bu değeri yazın) Modül Hizalama: Orta Özel Marj: 20px daha düşük animasyon stili: Slayt Animasyon Yönü: Animasyonun Üzerinde: 850ms Animasyon Yoğunluğu:% 12 Animasyon Hız Eğrisi: Kolaylık Out Not: Bu bölüm başlığı için kolaylık hız eğrisi etkisini gerçekten seviyorum. Bu, temiz ve keskin olan daha yavaş ve keskin bir inişe sahiptir.
Dört bulanık tasarım ayarını kaydedin, şimdi bulanıklık modülümüzü eklemeye hazırız. İlk olarak, dört katlı bir yapıya sahip bir satır yapın (1/4 1/4 1/4 1/4). Bulanık modülünü ilk sütuna (en solda) ekleyin.
Ardından bulanıklık ayarlarını güncelleyin. İçerik sekmesinin altında … Metin kutusu metin sekmesine aşağıdaki html ekleyin:
lorem iPSUM Dolor oturma amet, adipiscing elit olay. Phasellus bibendum est vitae felis rhoncus gravida sed nec purus.
Not: Diğer seçenek kullanıcılarının tıklamaları için manuel olarak bir bağlantı ekliyorum. Manuel bağlantı için URL’nin URL modülü açıklamasına eklediğiniz bağlantıyla eşleştiğinden emin olun. URL: [URL girin] Resim: [207 × 188 resminizi girin] Arka Plan Rengi: #ffffff
Tasarım sekmesinin altında … Metin Oryantasyonu: Orta Yazı Tipi Başlığı: Varsayılan, Kalın (B), Büyük (TT) Başlığın Renkleri Metnin Renkleri: #7969F4 Aralık başlık harfleri: 3px başlık çizgisinin yüksekliği: 3EM renk metin gövdesi: # 6A8091 Vücut Hattı Yüksekliği: 1.9EM Patlama Özel: 40px üst, 40px sağ, 40px alt, 40px Sol Animasyon Stili: Slayt Animasyon Yönü: Animasyon Süresi: 700ms Animasyon Yoğunluğu:% 4 Görüntü/Animasyon Icon: Animasyon olmadan
Not: Bu animasyon, açıklama modülünü iyi bir süre ile ekrana kaydırır. Yaklaşan modüller için animasyon gecikmelerine (bu modül için% 0) dikkat edin. Bu, yavaş yavaş yan yana biriken modülün genel etkisi için ana bileşen olacaktır.
Devam sekmesinin altında … Ana öğe kutusuna aşağıdaki özel CSS ekleyin: Border-Radius: 6px;
Box-Shadow: 0 15px 35px RGBA (50,50,93, .1), 0 5px 15px RGBA (0.0,0, .07); Bir bulanıklık bitirdikten sonra geçerli ayarları kaydedin, bunu bir şablon olarak kullanabiliriz Üç Sonraki Açıklama. Lütfen ve sağ -modülde tıklayın ve modülü kopyalayın. Ardından, kalan üç sütunun her birine (Ctrl + V) modül yapıştırın. Şimdi tek yapmamız gereken üç çoğaltılmış modülün her birine bazı güncellemeler eklemek. İkinci sütundaki bulanıklık modülü için aşağıdakileri güncelleyin:
İçerik sekmesinin altında … Başlık: Adım 2 İçerik: [Metin ve URL Manuel Bağlantısı Güncelleme] URL: [URL Açıklama Güncelleme] Resim: [Şekil 207 × 188 yeni ekle] Tasarım sekmesinin altında … başlığın rengi Metin: #E944FF Gecikme Animasyonu: 50ms Animasyon Yoğunluğu:% 12
Not: İlk açıklamaya kıyasla, animasyonun ertelenmesinin 50 MD’ye ve yoğunluğun%12’ye yükseldiğini unutmayın. Bu, her açıklamayı canlandırdığında adım adım bir adım ayarı oluşturulmasına yardımcı olacaktır. Üçüncü sütundaki bulanıklık modülü için aşağıdakileri güncelleyin: İçerik sekmesi altında … Başlık: Adım 3 İçerik: [Metin ve URL manuel bağlantısını güncelleme] URL: [URL Açıklama Güncelleme] Resim: [Şekil 207 × 188 Yeni Ekle ]
Tasarım sekmesinin altında … Başlığın Rengi Metnin Rengi: #3EBAEF Erteleme Animasyonu: 100ms Animasyon Yoğunluğu:% 20
Not: Bir kez daha animasyon gecikmelerinin ve yoğunluğunun gelişimini görebilirsiniz.
Dördüncü sütundaki bulanıklık modülü için aşağıdakileri güncelleyin: İçerik sekmesi altında … Başlık: Adım 4 İçerik: [Metni ve URL manuel bağlantısını güncelle] URL: [URL Açıklama Güncelleme] Şekil: [Şekil 207 × 188 Yeni Ekle Aşağıda] Tasarım sekmesi … Havlu Metin Rengi: #95D624 Animasyonun Ertelenmesi: 150ms Animasyon Yoğunluğu:% 30 Tüm bulanıklıkları güncelledikten sonra, satır ayarlarını aşağıdaki gibi güncelleyelim: Tasarım sekmesinin altında … Özel genişlik kullanın : Evet Özel Genişlik: 1366px Özel Talang Genişliği Kullanın: Evet Talang Genişliği: 2 Animasyon Stili: Zoom Animasyon Süresi: 700ms Animasyon Başlangıç Opaklığı:% 100
Not: Bu animasyon, tüm sürece zoom efektleri ekleyerek diğer modül animasyonlarının çerçevelenmesinde gerçekten iyi işlev görür.
Ayarları Kaydet Şimdi bu bölümle bitmişsinizdir. Demo sayfasının açıklamanın altında başka bir resmi var, ancak buraya girmenin gerekli olduğunu düşünmüyorum.
Bonus: Bu bölümü indirin kolay bir ithalat için bonus olarak, aşağıdaki e -posta katılım formunu kullanarak alabileceğiniz ücretsiz bir indirme olmak için bugünün öğreticisindeki parçaları paketledik. Sadece e -postanızı girin ve indir düğmesi görünecektir. Divi bültenimizin bir parçası olduysanız “abone olma” konusunda endişelenmeyin. Yeniden girin e -postanız daha fazla e -posta veya kopya üretmez. Bu yalnızca indirmeleri ifade edecektir. Zevk almak!
Düzen paketini indirin
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. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Bu indirmeyi kullanmak için, indirme klasörümüzde animation_effects_part_3.zip adlı bir zip dosyası arayarak başlayın. Aşağıdaki ithalatı ortaya çıkarmak için zip açın. Animasyon Efektleri Bölüm 3 (Bölüm 1). JSON Animasyon Efektleri Bölüm 3 (Bölüm 2). Taşınabilirlik sermayesi göründüğünde, İçe Aktarma sekmesini ve etiketli düğmeyi tıklayın Dosyayı seçin. İstediğiniz JSON dosyasını seçin ve “Divi Oluşturucu Düzenlerini İçe Aktar” ı tıklayın. İthalat tamamlandıktan sonra, yukarıdaki parçalardan birini eklemek istediğiniz gönderi veya sayfaya gidin. Görsel yapımcıları etkinleştirin. Yukarıdaki bölümlerden birini eklemek istediğiniz sayfaya gidin. Simgeye tıkladığınızda, yeni bir parça ekleyin, “Kütüphaneden Ekle” seçeneği sunulacaktır. Bu seçeneği seçin ve istediğiniz düzeni seçin. Sarma Tasarımı ve Animasyon Bölüm 5, yalnızca içeriğin teslimatında bazı animasyon ayarları tarafından yapılabilecek gücü gerçekten göstermektedir.Sadece geliştirmedeki her açıklamayı görüntülemek için havalı görünmekle kalmaz, aynı zamanda bir süreç için adımlar gösterdiğinizi düşünürken de mantıklıdır.Dizimizin 4. Bölümünde gelecek, size ürünleri veya indirmeleri görüntülemek için güzel bir düzen göstereceğim.Ve elbette, bir bütün olarak akıllı bir animasyonun kullanımını vurgulayacağım.Bir sonrakine kadar!Aşağıdaki yorumlarda sizden haber almayı umuyorum.
