Bulanıklıkları çiçeklendirmek için katlanır divi animasyonunu kullanma
Bu Seri 6’nın 4. bölümüne hoş geldiniz, bu da inanılmaz bir sayfa tasarlamak için Divi’nin yeni animasyon seçeneklerini 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, adım adım tarif edilen 4 modülü tasarlamak ve canlandırmanın bir dizi yaratıcı yolunu gösteriyorum.
Bugün, animasyonlu demo sayfamızın 6. bölümünü oluşturacağız. Bu bölümde, üstün ürünler veya indirmeler görüntülemek için birkaç harika tasarım ve animasyon bulunmaktadır. Bulanık modülde animasyonun renklerin kullanılması ve çiçek açan etkileri bu kısmı gerçekten öne çıkarıyor. Bölünelim! İşte bugünün gönderisinde ne inşa edeceğimiz bir göz atın Bulanıklık yapmak için divi katlama animasyonu kullanarak Mekar YouTube kanalımız Bölüm 6’ya abone olun. Ardından, üç sütunu (yarım çeyrek çeyrek) ekleyin. İlk modülümüzü eklemeden önce, ayarları açın ve aşağıdakileri güncelleyin: İçerik sekmesinin altında … Arka Plan Rengi: #00252D Tasarım sekmesinin altında … Özel Dolgu: 80px üst, 80px Altında Ayarların KAYDETİ KAYDET METİN METİN MODÜLÜNÜNÜNDE ÜSİ KADAR EKLE, Üç sütuna dönelim ve Metin Modülünü Sol sütuna ekleyelim. Metin ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesi altında … Metin sekmesinde aşağıdaki H1 başlığını ekleyin İçerik kutusuna:
Tasarım sekmesinin altında demek istediğin gibi oluşturun … Yazı tipi başlığı: Lato, Lato, Kalın (b) gölgelik yazı tipinin boyutu: 38px renk metin doğru: #fffff Yüksek başlık satırı: 1.3EM
Not: İçeriğimizde bir H1 başlığı olduğundan, bunu düzenlemek için yalnızca başlık metni seçeneği çalışır.
Özel Marj: 20px Daha Alt Animasyon Stili: Slayt Animasyon Yönü: Sol Animasyon Yoğunluğu:% 16
Not: Bu animasyon başlığın hafifçe sola kaymasını sağlar. Buradaki anahtar daha düşük bir yoğunluk sağlamaktır, böylece slayt çok fazla toprağı kaplamaz veya çözmek için çok uzun sürmez.
Ayarları Kaydetme Metin Ekle Başka bir metin modülü kullanarak genellikle devam edebilir ve metninizin geri kalanını aynı metin modülünde H1 başlığının altına ekleyebilirsiniz. Ancak H1 başlığına ve aşağıdaki metne farklı animasyon efektleri eklemek istediğimiz için başka bir metin modülü yapmamız gerekiyor. Lütfen aşağıdaki ayarları yeni oluşturduğunuz ve güncellediğiniz metin modülünü ekleyin:
İçerik sekmesinin altında … İçindekiler: “Lorem Ipsum Dolor Sit amet, Kavram Adipiscing Elite. Phasellus bibendum est vitae felis rhoncus grida. Sed Nec Purus Tempus, Sagittis Mi ID, Exicitur Nisl. Sed Nec Purus Tempus, Sagittis Mi ID, Exicticur Nisl. ” Tasarım sekmesinin altında … Metin Rengi: Işık Yazı Tipi Boyut Metin: 18px Metin Metin Renk: RGBA (255,255,255,0.66) Satır Metninin Yüksekliği: 1.9EM Özel Marj: 40px Bubile Animasyon Stili: Slayt Animasyon Yönü: 8 Sol Yoğunluk Animasyonu: 8 %Not: Bu metin için animasyon ayarlarının yukarıdaki başlık metninden (%16) biraz daha düşük bir yoğunluğa (%8) sahip olduğunu not edin. Bu, daha hızlı hareket edeceği anlamına gelir, çünkü aynı sürede daha küçük bir mesafe kat eder. Her iki metin modülü de animasyonu tamamlamak için aynı zamanda (süre) gerektirse de, farklı yoğunluk seviyelerinde başladıkları için farklı hızlarda hareket edeceklerdir. Bu, yarışı aynı zamanda başlatan ve sona erdiren iki yarışçı gibi, önemli bir başlangıçta önemli bir başlangıç yaptı.
Ayarları Kaydet Now düğmesini ekleyin, sol sütundaki iki metin modülünün altına bir düğme modülü ekleyelim. Ardından Ayarları aşağıdaki gibi güncelleyin: İçerik sekmesi altında … Buttom Metin: Tüm URL Düğmelerini İndirin [URL’yi Tasarım sekmesinin altına girin] … Düğme için Özel Stili Kullan: Evet Metin Boyutu Düğmesi: 15px Renkli Metin Düğmesi : #01254C Arka Plan Renk Düğmesi: #FFCD1C Genişlik Düğme sınırı: 0px Sınır Sınır Yarıçapı: 65px Hareketler Düğmesi: 1px Yazı Tipi Düğmesi: Kalınlık (B), COPER (TT)
Özel Dolgu: 10px üst, 30px sağ, 10px dip, 30px Sol Animasyon Stili: Slayt Animasyon Yönü: Sol Animasyon Yoğunluğu:% 16
Not: Bu animasyon efekti ilk metin modülü animasyonuyla eşleşir. <Gelişmiş sekmesinin altında … Box Shadow CSS özelliğini kullanarak güzel bir ışık efekti eklemeyi unutmayın. Özel CSS altındaki ana eleman kutusunu bulun ve aşağıdakileri ekleyin: Kutu -shadow: 0 3px 30px -5px #ffd747, ek 0 1px 3px RGBA (255,255,255.0.5);
Ayarları Kaydet Sol sütunumuz için ilk bulanıklık modülünüzü ekleyin. Şimdi orta sütuna (sütunun ilk çeyreği) bir bulanıklık modülü ekleyelim.
Ayarları aşağıdaki gibi güncelleyin: İçerik sekmesi altında … Başlık: Divi Kullanım Simgeleri: Evet simgesi: [simge seç]
Gradyan Renk Arka Plan: #8B56FF, #5D3DFF Gradyan Türü: Doğrusal Gradyan Yönü: Tasarım sekmesinin altında 140deg … Icon Renk: #FFFFF Metin Renk: Işık Metin Oryantasyonu: Orta Yazı Tipi Başlığı: Kalınlık (B), Bigher Harfler (TT) Alan Başlık Harfleri: 10px Özel Kıyma:% 12 Daha Alt Özel Dolgu: 40px Top, 30px Sağ, 30px Alt, 30 Piksel Sol Animasyon Stili: Kat Animasyon Yönü: Sol Gecikme Animasyonu: 200ms
Not: Her modülün animasyonunun yönü Açıklama farklı olacaktır. Birincisi sola uzanıyor.
Devam sekmesinin altında … ışığın etkisini modülümüze ekleyebilir ve küçük bir girinti başlığı yapabiliriz.
Aşağıdaki CSS’yi ana eleman kutusuna ekleyin: Border-Radius: 6px;
Kutu -Shadow: 0 10px 60px -10px #8b56ff, ek 0 1px 3px RGBA (255,255,255.0.2);
Aşağıdaki CSS’yi Blurb başlık kutusuna ekleyin: metin-Bağımsız: 10px;
Tasarlanan ve Animasyonlu İlk Blurb modülüne sahip olduktan sonra sonraki üç bulanıklığı oluşturmak için bulanıklık modülünün kopya ayarlarını kaydedin, kalan açıklamayı yapmak için modülü çoğaltabiliriz. İmleci bulanıklık modülüne gidin ve kopya modül simgesini tıklayın. Aşağıda görünen yeni kopya modülünde, ayarları aşağıdaki gibi güncelleyin: İçerik sekmesi altında … Başlık: Bloom Ikon: [Yeni simge seç] Arka plan gradyan rengi: #ff56f9, #c43dffff
Tasarım sekmesinin altında … animasyonlu yön: aşağıda
Not: Katlanır animasyon bu açıklamada aşağı yönlü bir yöne sahiptir.
Devam sekmesinin altında … Ana öğe kutusundaki CSS’yi aşağıdakilerle değiştirin: Border-Radius: 6px;
Kutu -Shadow: 0 10px 60px -10px #ff56f9, ek 0 1px 3px RGBA (255,255,255.0.2);
Diğer kopyalar için ayarları açıklama modülünden kaydedin ve en sağ sütuna yinelenen sürükleyin. Ardından bulanık modülünü aşağıdaki ayarlarla güncelleyin:
İçerik sekmesinin altında … Başlık: Ekstra simge: [yeni bir simge seçin] Gradyan Renk Arka Plan: #56FFDA, #38D5EA
Tasarım sekmesinin altında … animasyonlu yön: üst
Not: Katlanır animasyonun bu açıklamada üste bir yönü vardır.
Devam sekmesinin altında … Ana öğe kutusundaki CSS’yi aşağıdakilerle değiştirin: Border-Radius: 6px;
Kutu -Shadow: 0 10px 60px -10px #56FFDA, Ek 0 1px 3px RGBA (255,255,255,0.2);
Doğru sütunda yeni güncellediğiniz açıklamayı, hemen altında görünecek şekilde modülün başka bir kopyasını oluşturun. Ardından Blurb modülünü aşağıdaki ayarlarla güncelleyin: İçerik sekmesi altında … Başlık: Monarch Icon: [Yeni bir simge seçin] Gradyan Renk Arka Plan: #F2743A, #FF5656 Tasarım sekmesinin altında … Animasyonlu Yönlü: Sağ
Not: Bu kısa açıklamada, animasyon sağa uzanır.
Not: Bu açıklamaların 4’ünün hepsi aynı stile ve gecikmeye sahip olacağından, bu ters çiçek çiçeklenmesinin etkisini yaratır, çünkü dört modül farklı yönlere katlanacaktır.
Ayarları Kaydet Şimdi satır ayarlarınızı aşağıdaki gibi güncelleyerek mesafeyi düzeltelim: Tasarım sekmesinin altında … Özel genişlik kullanın: özel genişlik: 1366px Özel Talang genişliği kullanın: Evet Talang genişliği: 2 Özel Dolgu: 80px üst, 0px sağ , 160 piksel aşağıda, 0px sol sütun 1 dolgu özelliği: İkinci satırın 140 piksel üstü, şimdi bizim tarafımız için bir sonraki satırı yapmaya hazırız. Hız için, daha önce tasarlanmış çizgilerin ve modüllerin tasarım öğelerini çoğaltacağız ve kopyalayacağız. İlk olarak, bizim tarafımıza yeni bir sütun satırı ekleyelim. Ardından satır ayarlarını aşağıdakilerle güncelleyin: Özel Genişliği Kullan: Evet Özel Genişlik: 1366PX Özel Talang Genişliği Kullanın: Evet Talang Genişliği: 2 Ayarları Kaydet H1 başlıkını içeren ilk satırdaki ilk metin modülünü kopyalayın. Ardından ayarları aşağıdaki gibi güncelleyin: İçerik sekmesi altında … Geçerli H1 etiketini aşağıdakilerle değiştirin:
Daha azına razı olmayın
Tasarım sekmesinin altında … Metin Oryantasyonu: Orta Animasyon Stili: Dönüş Animasyonu Yoğunluğu:% 70 Kaydet Ayarları Ardından Önceki satır modülünü kopyalayın ve ikinci sırada yeni güncellediğiniz metin modülünün altına yapıştırın. Ardından düğme modülünü aşağıdaki gibi güncelleyin: İçerik sekmesi altında … Metin düğmesi: Tasarım sekmesinin altına bugün katılın … Düğmenin hizalanması: Orta Animasyon Stili: Dönüş Animasyon Yoğunluğu:%70 Not: Yukarıdaki düğmeler ve başlıklar var aynı animasyon.
Ayarları son satırımız için şimdi kaydedin. Sütunun yarım yapısıyla yeni bir satır oluşturun. Modülünüzü eklemeden önce, satır ayarlarını aşağıdaki gibi güncelleyin: Tasarım sekmesinin altında … Özel olukların genişliğini kullanın: evet olukların genişliği: 2 Sonraki ayarları kaydedin, “divi” bulanıklık modülünü önceki ” satır ve yeni satırınızın sol sütununa yapıştırın. Ardından aşağıdaki ayarları güncelleyin: İçerik sekmesi altında … Başlık: Ikon Binası: [Yeni bir simge seçin] Gradyan Renk Arka Plan: #FF568E, #FF3D5D
Not: Doğru açıklama modülünü kopyalarsanız animasyonun yönü “sol” olmalıdır. Eğer emin değilse.
Devam sekmesinin altında … Ana öğe kutusundaki CSS’yi aşağıdakilerle değiştirin: Border-Radius: 6px;
Sonraki ayarları kaydedin Mavi “Ekstra” Blurb modülünü, yaptığınız ilk satırda en sağdaki sütunun üst kısmına kopyalayın. Ardından üçüncü satırınızın sağ sütununa yapıştırın. Ardından Blurb ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesi altında … Başlık: Sakin simge: [Yeni bir simge seçin] Gradyan Renk Arka Plan: #3DA4FF, #385EEA
Not: Doğru açıklama modülünü kopyalarsanız animasyon yönü “yukarı” olmalıdır. Emin değilse, evet. Devam sekmesinin altında … Ana öğe kutusundaki CSS’yi aşağıdakilerle değiştirin: Border-Radius: 6px; Kutu -Shadow: 0 10px 60px -10px #3da4ff, ek 0 1px 3px RGBA (255,255,255,0.2);
Ayarı kaydedin. 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 DIVI Düzen Paketine erişin!
Bu indirmeyi kullanmak için, indirme klasörümüzde animation_effects_part_4.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 4 (Bölüm 1). JSON Animasyon Efektleri Bölüm 4 (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 mizanpajı seçin. Renk kombinasyonları, parlak gölgeler ve yaratıcı animasyonlar, kendi indirmelerinizi veya ürünlerinizi görüntülemek için bu olağanüstü düzeni yapar. Bölüm 5’te geleceğim, Roll animasyon stilini bölümünüzdeki cep telefonuna birleştirmeyi nasıl başaracağınızı göstereceğim.
Aşağıdaki yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
