İçeriğinizi ekrana yuvarlamak için divi animasyonunu kullanma
Bu Seri 6’nın 5. bölümüne hoş geldiniz, bu da Divi’nin yeni animasyon seçeneklerini muhteşem sayfa bölümleri tasarlamak için nasıl kullanacağınızı öğretecek. 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 sayfamızın 6. bölümünü yaptık. Size parlak renkler, parlak gölgeler ve hassas animasyonlarla ürün indirmelerini görüntülemek için nasıl bir düzen tasarlayacağınızı gösteriyorum.
Bugün, içeriğinize yaşamak gibi hareketler eklemek için Roll Animation efektinin nasıl kullanılacağının mükemmel bir örneği olan animasyonlu demo sayfamızın 7. bölümünü oluşturacağız. Nihai ürün metin ve cep telefonu slaytlarının izlenimini verecek ve sayfayı aşağı kaydırdığınızda görünümde farklı bir açıdan dönecektir. Bu benim en sevdiğim animasyonlardan biri. Başlayalım. İşte bugünkü gönderide inşa edeceğimiz tasarım ve animasyondan gizlice bir göz atın Tasarım öğelerinizin hazırlanması, bu öğretici için üç görüntüye ihtiyaç duyacaktır. Dikey görüntülerin ilk iki resmi yaklaşık 580×950 civarında% 10’luk bir açıda döndürülmelidir. Yatay görüntüler, görüntünün sağında yaklaşık 300 piksel ekstra şeffaf arka plan alanı ile 1250×608 (ayrıca saat yönünün tersine% 10 açıyla döndürülmelidir) olmalıdır, böylece sağlanan sütuna iyi uyur. Şeffaf bir arka plana sahip PNG formatında cep telefonu görüntüsünün emin olun. İşte bugünkü gönderi için kullandığım resim. Dikey telefon resimleri #1
Dikey telefon resimleri #2 Dikey telefon resimleri #3 İçeriğinizi YouTube Kanalı abonelik ekranına yuvarlamak için divi animasyonunu kullanarak, geliştirme sürecine başlamadan önce demonun 7. bölümünü oluşturuyoruz, işte Visual Builder’ı kullanarak yapacağımız parçanın düzeninden tel kafes ekranına bir göz atın. Visual Builder’ı kullanarak, düzenimize başka normal bölümler ekleyerek başlayalım. Ardından, kendi tarafınıza üç katlı bir satır (bir buçuk çeyrek) ekleyin. İlk modülümüzü eklemeden önce satır ayarlarını güncelleyin, aşağıdaki satır ayarlarını açın ve güncelleme: Tasarım sekmesinin altında … Özel genişlik kullanın: Evet Özel Genişlik:% 91 Özel Talang Genişliği Kullanın: Evet Talang Genişliği: 1
Sütun 2 Dolgu Özel:% 5 Üst Sütun 3 Dolgu Özel:% 24 Üst İlk sütunda (en solda) görüntü #1 ekleyin, resim modülümüzü ekleyin ve görüntü ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesi altında … URL görüntüsü: [Şekil #1’i yükle] Tasarım sekmesinin altındaki … Zorunlu Tam Genişlik: Evet Stil Animasyonu: Roll Yön Animasyonu: Doğru Animasyon Yoğunluğu:% 16 Animasyon Başlat Opaklık:% 100 Not: Rolling Animation Effect’e ek olarak, bu animasyon ayarı ile ilgili benzersiz şey, mobil görüntülerin her zaman görünür olması için tam opaklıkla animasyona başlamanızdır. Ayrıca,% 16 yoğunluk “rulo” nu hala minimum hale getirir. Bu daha canlı animasyon yaratır. Aynı zamanda animasyonu sağa yönlendirdiği için yaptı çünkü görüntü sayfanın sol tarafındaydı. Ayarları Kaydet
Bölme modülü ile animasyonlu metin ekleyin ve harekete geçme daveti şimdi metnin üzerine kısa bölücü çizgileri eklemek için bölücü modülünün kullanılacağı orta sütuna (çeyrek) geçin. Bölme modülünü sütuna ekleyin. Ardından ayarları aşağıdaki gibi güncelleyin: İçerik sekmesi altında … Divisor’u göster: evet tasarım sekmesinin altında … Renk: #e0c48f İlahi Ağırlık: 3px genişlik: 60px (bu değeri yazmalısınız çünkü varsayılan yüzde olduğu için) Modül modülü Hizalama: Varsayılan (Sol) Dolgu Özel: 80px Top, 80px Sol Animasyon Stili: Kat Animasyon Yönü: Doğru Animasyon Süresi: 1200ms Animasyon Gecikmesi: 50ms Animasyon Yoğunluğu:% 70 Opaklık Başlangıç Animasyonu:% 0% 0
Ayarları KAYDET BÖLÜMÜ MODÜLÜNDE KAYDET, Davet Modülünü Aşağıdaki Ayarlar ile Etkinleştirecek: İçerik sekmesi altında … Başlık: “1000 Kelimeler” Düğme Metni: “Daha fazla bilgi edinin” İçindekiler: “Lorem Ipsum Dolor Sit Amet, Adpissing Elit Elitler. Phasellus bibendum est vitae felis rhoncus grida. Sed Nec Purus Tempus, Sagittis Mi Id. ” Bağlantı: # arka plan rengini kullanın: hayır Tasarım sekmesinin altında … Metin Rengi: Koyu Metin Oryantasyonu: Sol başlık yazı tipi: Lato, Kalınlık (B) Doğru harfler (TT) Terder Yazı Tipi Boyutu: 38px Renk Metin Metin: #33454f Başlık Mektubu Alanı: 0.2em Yüksekliği Yüksekliği Başlık: 1.4em Gövde yazı tipi: lato gövde yazı tipi boyutu: 18px renk gövde metni: #9b9b9b Yüksek gövde hattı: 1.8EM Düğme için özel bir stil kullanın: Evet Düğmenin metin boyutu: 15px metin Renk Anahtarı Düğmesi: #F2733C Arka Plan Renk Düğmesi: RGBA (225,225,225,0) Genişlik Genişlik Düğme Sınırı: 0px Hareketler Düğmesi: 2px Yazı tipi düğmesi: 2px Yazı tipi düğmesi: Lato, kalınlık (b), harf, harf büyük (tt) Kest simgesi: sağ ok sadece düğmeye gittiğinde simgeleri görüntüle: Düğme Yok Harekete geçin: 0pxgaya animasyon: Animasyonun yönünü katlayın: Doğru animasyon süresi: 1200ms Gecikme Animasyonu: 50ms Animasyon Yoğunluğu:% 70 Opaklık Başlangıç Animasyonu:% 0 Not: Bu animasyon, soldan katlanan metnin görüntüsünü verir. Bu animasyon ayarının hemen üzerindeki bölücü modülünün animasyonuyla eşleştiğini unutmayın. Ayarları Kaydet Resim #2 ekleyin, ardından yeni yaptığınız hareket etmek için davet modülü altına görüntü modülünü ekleyin. Görüntü ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesi altında … URL görüntü: [Tasarım sekmesinin altındaki resim #2’yi yükle] … Zorla Tam Genişlik: Evet Animasyon Stili: Roll Animasyon Yönü: Sol Yoğunluk Animasyonu:% 13 Animasyon Başlangıç Opaklık:% 100
Görüntü #3 ekleyin Yalnızca ikinci sütun (orta) için. Şimdi üçüncü sütunda (en sağ) Şekil #3 ekleyelim. Bunu yapmak için, ikinci sütunun altına eklediğiniz görüntü modülünü çoğaltabilir/kopyalayabilir ve üçüncü sütuna ekleyebiliriz. Hayvan tarzı aynı olduğundan, yeni bir görüntü modülü için güncellemeniz gereken gerçek görüntü URL’sidir.
Üçüncü sütundaki görüntüyü kopyalamak için yeni bir görüntü URL’si ekledikten sonra, bölücü modülünün çoğaltılmasına/kopyasını ve ikinci sütunun üstünde oluşturduğunuz dava modülünü devam ettirdikten sonra yeni bir görüntü URL’si ekledikten sonra ve sürükleyin/Drag/Drag/ Üçüncü sütunda Şekil #3 3 altına iki modülü yapıştırın. Bölme modülü için, tasarım sekmesi altındaki animasyon yön ayarlarını “sol” olarak değiştirin. Yeni eylem davetiyesi modülümüz için aşağıdaki ayarlara devam edin ve güncelleyin: İçerik sekmesi … Başlık: Tasarım altında oluşturmanın yeni yolları Sekme … Özel Dolgu: 80px sağ, 80px dip, 80px Sol Animasyon Yönü: Sol Şimdi son sonucumuza bakalım …
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. Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketine erişin! Bu indirmeyi kullanmak için indirme klasörümüzde animation_effects_part_5.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 5 (Bölüm 1). JSON Animasyon Efektleri Bölüm 5 (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.
Düzeni sarmak oldukça zordur. Ancak, doğru resmi ve doğru mesafeyi elde ettiğinizde, animasyon tüm düzeni iyi birleştirir. Hayatta gibi telefon görüntüleri ruloları, sayfayı aşağı kaydırdığımızda, birisi beyaz bir masanın üzerine kaydırıyor gibi görünüyor. Bu rulo animasyonunun bir örneği açıkça göze çarpan bir animasyon. Gelecek
