Yeni animasyonlu efekt divi nasıl kullanılır
Bu Seri 6’nın Bölüm 1’e, 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.
Animasyon sayfayı açabilir. Etkili bir şekilde yapılırsa, kullanıcılar dahil olabilir ve sayfanızdaki içeriği keşfetme olasılığı daha yüksektir. Kötü bir şekilde yapılırsa, animasyon kullanıcının dikkatini tamamen yönlendirebilir ve şaşkın bir şaşkınlıkla dışarı atabilir. Animasyonun hızı, zamanı ve yoğunluğu, kullanıcı sayfayı aşağı eğittiğinde bu hareketin senfonunda önemli bir rol oynar.
Divi’nin sofistike animasyonlu özellikleri, web sitenizdeki herhangi bir öğeye animasyon eklemenizi sağlar. Ve bu animasyonlu öğeyi, rolünüzü canlı hale getiren sayısız hareket kombinasyonunu yapmak için birleştirebilirsiniz. Bu serinin 1. Bölümünde, Divi animasyon özelliklerinin gücünü gösteren doğrudan demo sayfamızın ilk iki bölümünü oluşturmak ve canlandırmak için bir görsel üreticiyi nasıl kullanacağınızı göstereceğim. Başlayalım. İşte Seri 1 Serisinin 1. Bölümünde Neler Yapacağımızın Sneak Gözleri Bölüm 2 Seri 3 Serisinin 2. Bölümü Bölüm 4 Seri 5’in 3. Bölümü Seri 6’nın 4. Bölümü Seri 7’nin 5. Bölümü Seri 8 Bölüm 9’un 6. Bölümü Tasarım öğeleri hazırlama İlk bölüm için iki resme ihtiyacınız olacak. Birincisi, yaklaşık 1280 × 800 boyutlarına sahip tam ekran arka plan görüntüsünüzdür. Kullandığım şey bu: İkinci resim, dikey olarak tersine çevrilmiş ve kaybolmuş aynı resmin düzenlenmiş versiyonudur. Bu ikinci resim ana başlığınız için bir arka plan olarak işlev görecek ve yaklaşık 800×400 olmalıdır. Ters bir görüntü oluşturmak için, görüntüyü önizlemede açın ve Araçlar> Dikey’i çevirin veya Photoshop’ta görüntüyü açın, Resim> Görüntü Döndürme> Tuval Dikey’i seçin. Görüntünün altına solma etkisini eklemek için, fırça modunda 800 piksel ve%0 şiddetli bir silgi kullanıyorum. Sonra vardiyayı tuttum ve fırçayı alt kenar boyunca sürükledim. PNG dosyası olarak dışa aktardığınızdan emin olun. Photoshop’unuz yoksa, aynı tasarımları tamamlamak için GimpShop gibi ücretsiz fotoğraf düzenleme çözümlerini deneyebilirsiniz. Fotoğraf düzenleme yazılımını nasıl kullanacağınızı bilmiyorsanız (ve şu anda öğrenmeyi umursamıyorsanız), lütfen şimdilik ikinci resmi bırakın veya aşağıdaki resmi kullanın (tıklayın ve masaüstüne sürükleyin). İkinci bölüm için iki resme ihtiyacınız olacak. Birincisi bunun gibi 730 × 490 civarında olmalı. Ve ikincisi aşağıdaki gibi 525 × 660 civarında olmalıdır. Animasyonlu Terminolojiyi Anlayın Bunu yapmadıysanız, Devam ve Gelişmiş Animasyonu tanıtan özellik güncellemesi yayınlarını okuyun. Gönderinin sonunda Nick, üreticide bulacağınız her animasyon özelliğinin yararlı bir tanımını/açıklamasını sağlar. Bu animasyon özelliğini gerçekte ne yaptığını anlamak üretim süreci için önemlidir. Bu animasyon özelliğini anladıktan sonra, dival. YouTube kanalına abone olan yeni animasyon efekti divi nasıl kullanılır yeni sayfa ayarlarınızı wordPress kontrol panelinden ekliyoruz, sayfaları açın> yeni ekleyin. Ardından sayfanıza başlığı ekleyin. Ardından, sayfanın sağ üst kısmındaki kutudaki divi sayfası ayarlarını bulun ve “on” dot navigasyonunu seçin. Sayfa öznitelik kutusunda, sayfa şablonunuz için boş bir sayfa seçin. Son olarak, “Divi Oluşturucu Kullan” düğmesini tıklayın ve düzeninizi oluşturmaya başlamak için Visual Builder kullanın. Bina Bölüm 1: Tam Ekran Başlığının Tasarımı ve Animasyonu Bu başlık, tam ekrana ayarlanmış tam geniş bir başlık modülü gibi davranacaktır. Başka bir deyişle, site yüklendiğinde, bölüm pencerenin boyutu ne olursa olsun, tarayıcı penceresinin tüm genişliğini ve yüksekliğini dolduracaktır. Ancak FullWidth başlık modülünü kullanmak yerine, standart bölümü kullanacağız ve yüksekliği 100VH olarak ayarlayacağız. Bu şekilde metin modülünü ekleyebiliriz.
Visual Builder’ı kullanarak, oluşturucuyu başlatırken varsayılan olarak görüntülenen standardın ayarlarını düzenlemek için tıklayın. Aşağıdakileri Güncelleyin: İçerik sekmesi altında … Arka plan görüntüsü: [1280 × 800 arka plan resminizi girin] Paralax efektini kullan Tasarım sekmesinin altında … Özel Dolgu:% 5 üst, 0px sağ,% 5 alt, 0px Kiridi devam eden sekmenin altında … Ana öğe kutusuna aşağıdaki özel CSS ekleyin: min-yükseklik: 100VH
Bu CSS hattı, parçanın% 100 görüntüleme yüksekliği göstermesini söyler. Ayarları Kaydet Ardından satırınıza bir sütunun yapısını girin ve metin modülünü sütuna ekleyin. Metin modülü ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesinin altında … İçerik kutusuna “Divi” kelimesini eklemeniz yeterlidir. Tasarım sekmesinin altında … Metin Yazı Tipi: Oswald, Sermaye Harfleri (TT) Metin Yazı Tipi Boyut: 14px Metin Renk: #08408E Metin Alanı: 1.5EM (bunu yazmalısınız) Metin Oryantasyonu: Orta Özel Marj:% 2 Animasyon Stili : Geri animasyon tekrarlama: Bir kez animasyon yönü: doğru animasyon süresi: 2000ms animasyon gecikmesi: 1100ms animasyon yoğunluğu:% 100 opaklık başlangıç animasyonu:% 0 animasyon hız eğrisi: kolaylık-çıkış Zaman aşımı … Bir an duralım, böylece benzer bir animasyon eklemek için neyin gerekli olduğunu gösterebilirim. Aşağıda animasyon için gerekli bir satıra sahip HTML:
divi Ve bu animasyon için gereken CSS’dir:
@keyframes et_pb_flipleft {
itibaren {
Dönüşüm Origin: Merkez
}
ile {
Opaklık: 1;
Dönüşüm: Rotatey (0)
}
}
.et_animated.flipleft {
animasyon adı: et_pb_flipleft
}
.et_animated {
Animasyon-Fil-Mode: Her ikisi de önemli;
}
Ve bu, tarayıcı penceresinde görünür olduğunda animasyonu etkinleştirmek için gereken kodu içermez. Ancak, bunların hepsi bu doğuştan gelen animasyon özelliğine sahip olmanın çok büyük bir zaman tasarrufu olduğu anlamına geliyor. Ve animasyon seçeneklerini düzenlediğinizde animasyonu doğrudan görebilirsiniz Yeterince büyük bir bonus. Şimdi metin modülü ayarlarımızı güncelleyerek devam edelim: Devam sekmesinin altına … Ana öğe kutusuna aşağıdaki CSS CSS satırını ekleyin: metin-endent: 1.5em
Sonraki Ayarları Kaydet, aşağıdaki ayarları yeni oluşturduğunuz ve güncellediğiniz diğer metin modülünü ekleyin: İçerik sekmesinin altında … Metin sekmesi içerik kutusuna aşağıdaki html ekleyin:
İnanma
görüyor
Tasarım sekmesinin altında … Metin Rengi: Yazı Tipi Yazı Tipi Metin: Oswald, Sermaye Harfleri (TT) Metin Yazı Tipi Boyutu: 8VW (bunu yazmalısınız; bu, yazı tipi boyutunu görünümün genişliğinin% 8’ini yapar) Metin Renk Metni: RGBA (255.255.255.0. 79) Metin Hattı Yüksekliği: 1.4EM Metin Oryantasyonu: Orta Animasyon Stili: Kat Animasyon Yönü: Animasyonun Üzerinde: 1800ms Animasyon Gecikmesi: 0ms Animasyon Yoğunluğu:% 60 Kaydet Ayarları
Bu animasyonlu efekt, ana başlığı düz görünümlü bir konumdan katlayarak (veya ayakta) görüntüleyecektir. Artık ana başlık metnini bitirdiğimize göre, satıra baş aşağı bir arka plan görüntüsü ekleyelim. Şimdi, yeni oluşturduğunuz iki metin modülü içeren satır ayarlarını açın ve aşağıdaki ayarları güncelleyin: İçerik sekmesinin altında … Arka plan görüntüsü: [800×440 resminizi girin] Arka plan görüntü boyutu: Arka plan resminin konumuna göre : Arka planın en üst tekrarının ortası Görüntü: Tasarım sekmesi altında tekrar yok … Özel genişliği kullanın: Evet Birim:% 50 Özel Dolgu:% 12 Üst,% 0 sağ,% 5 alt, % 0 Sol Animasyon Kuvveti: Slayt Animasyon Yönü: Animasyonun ertelenmesi için: 300ms Animasyon Yoğunluğu:% 20
Bu animasyonlu etki, neredeyse dağların arkasından yükseliyormuş gibi görüntüyü yukarı kaydırıyor. Hepsi ilk bölüm için. Son tasarımımıza ve animasyonumuza bakalım.
Burada üç animasyonlu öğe, satırlar (kaydırılır), “inanma görülür” metinli metin modülleri (ortadan katlanmıştır) ve “divi” metnine sahip metin modülünü içerir (sağa açılır diğer öğeler durduktan sonra). Kombinasyon, içeriğin farklı bölümlerini yönlendirilmiş ve zamanında açığa çıkararak ziyaretçileri gerçekten içerir. Animasyonlu demo sayfamızın binasının ikinci kısmı, sayfanızdaki içeriği ortaya çıkarmak için pürüzsüz ama çok harika bir yol görüntüler. İlk bakışta tüm hareketleri tanımak neredeyse imkansızdır. İkinci kısmı oluşturmak için, önceki bölümün altına normal bölümü ekleyin. Bu bölümde iki sütun satırı ekleyin (bir buçuk buçuk).
Sol sütunda, aşağıdaki ayarlarla metin modülünü ekleyin: İçerik sekmesinin altında … Metin sekmesi içerik kutusuna aşağıdaki html girin: Dolor Sit amet, Seçkin Elit Kavram. PHACELLUS Hendrerit Pretium Felis, oturmak amet solisitudin eros Dignissim at. Cras Molestie Nisl Enim. Tasarım sekmesinin altında … Metin Rengi: Yazı tipi Yazı Tipi Metin: Montserrat Metin Yazı Tipi Boyut: Metin Hattı Yüksekliği: 1.8EM Yazı Tipi Başlığı: Montserrat, Kalınlık (B), Koper (TT) Yazı Tipi Boyutu Başlık: 39px (masaüstü) Yükseklik Başlık Hattı Yüksekliği: 2.2EM MARGIN-BAWAH: 50PX Animasyon Stili: Slayt Animasyon Yönü: Animasyonun yoğunluğunda: Bu animasyon efektinin% 10’u metin bloklarını değiştirerek görüntüleyecektir. Sonraki Ayarları Kaydet, Yeni oluşturduğunuz metin modülünün altındaki düğme modülünü ekleyin. Modül Güncelleme Ayarları düğmeyi aşağıdaki gibi: İçerik sekmesinin altında … Metin düğmesi: Daha fazla URL düğmesi: # (veya isterseniz) tasarım sekmesinin altındaki … düğmenin hizalanması: Sol Renk Metni: Işık Kullanın Özel Düğmeler için Stil: Evet Metin Boyutu Düğmesi: 15px Radius Sınır Sınır: 0 Mesafe Düğmesi: 3px Yazı Tipi Düğmesi: Montserrat, Kalınlık (B), Büyük harf (TT) Düğme simgesini görüntüleyin: Evet Özel Dolgu: 10px üst, 30px sağ, 10px , 30px Sol Kuvvet Animasyonu: Slayt Animasyon Yönü: Gecikme Animasyonu altında: 100ms Animasyon Yoğunluğu:% 10 Yukarıdaki önceki metin efektini telafi etmek için, bu animasyon efektini biraz gecikme ile ekrana kaydırarak düğmeyi görüntüleyecektir. Metin ve düğmeleri göremediniz çünkü şu anda metin beyaz arka plana sahip beyaz. Önemli değil. Hemen arka planımızı ekleyeceğiz. Daha sonra bölücü modülünü sağ sütuna ekleyin. Ardından ayarları aşağıdaki gibi güncelleyin: Tasarım sekmesinin altında … Yükseklik: Gelişmiş sekmenin altındaki 260 piksel … masaüstünde görünürlüğü devre dışı bırak, buraya arka plan görüntüsünün hala görünür yardımcı olmasına yardımcı olacaktır. mobil cihazda. Ayarları Kaydet Şimdi arka planımızı sütunlarımıza ekleyelim. Aşağıdaki satır ve güncelleme ayarlarını açın: İçerik sekmesinin altında … Sütun 1 Renk Düzenimi Arka Plan: #FE8840, RGBA (238,78,78,0,9) Sütun 1 Grade Yönü: 135deg Sütun 2 Arka Plan Görüntü: [Girin Şekil 730 × 490 You] Sütun 2 Arka Plan Görüntü Pozisyonu: Sol Üst Tekrar Görüntü Arka Plan Sütun 2: Tasarım sekmesinin altında tekrar yok … Özel genişliği kullanın: özel genişlik: 1366px Özel gasters genişliği kullanın: Evet Guture genişliği: 1 eşit yükseklik yüksekliği Sütun: evet dolgu özel: 0px üst, 0px sağ, 0px alt, 0px sol sütun 1 dolgu özel:% 5 üst,% 7 sağ,% 5 alt,% 7 sol animasyon kuvveti: Animasyon yönünü katlayın: sürenin üstünde: Animasyon: 800ms Bu animasyonlu efekt, görünene kadar katlanarak (veya ayakta) tüm satırı görüntüleyecektir. Devam sekmesinin altında … Ana öğe kutusuna aşağıdaki özel CSS ekleyin: Kutu -shadow: -20px 0px 60px -20px RGBA (255, 130, 65, 0.88);
Sonraki ayarları kaydedin Yeni yaptığınız satırın altına iki sütun satırı (üçte üçte biri) ekleyin.
Sol sütunda, bölme modülü ekleyin ve aşağıdaki ayarları güncelleyin: Tasarım sekmesinin altında … Yükseklik: Devam sekmesinin altındaki 400 piksel … Masaüstünde görünürlüğü devre dışı bırak, buradaki bölücü ekler arka plan görüntüsünün hala görünürde görünmesine yardımcı olacaktır. mobil cihaz.Ayarları Kaydetme Zamanından Kaydet, lütfen doğru öğüt ve “Zamandır Para” metnini içeren satırın sol sütununa doğru tıklayın ve kopyalayın.Ardından aşağıdaki sağ sütuna (üçte iki) yapıştırın.Yeni metin modülü ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesinin altında … H1 başlık metnini içerik kutusundaki “Profesyonel Gider” olarak değiştirin.Tasarım sekmesinin altında … Metin Renk Metni: #A8A8A8 RENK METİN TAHUK: #414159 Animasyon Stili: Slayt Animasyon Yönü: Animasyon Yoğunluğu Altında:% 10 Bu animasyon efektini ekrana kaydırarak metin bloklarını ortaya çıkarır.Şimdi yukarıdaki satırın sol sütunundaki düğme modülünü sağ tıklayın ve kopyalayın ve yeni düzenlediğiniz metin modülünün altına yapıştırın. Modül Ayarlarını Güncelle düğmesi aşağıdaki gibi: Metin Renk Düğmesi: #FF4823 Renk Düğmesi Renk: #FF4823 Metnin renginde gezin: #ff2323 Son adım için ayarları kaydedin, aşağıdakileri güncelleyerek satır ayarlarınızı düzenleyin: İçerik altında Sekme … Arka plan rengi: #ffffff sütun 1 Arka plan görüntü: [525 × 660 resminizi girin] Sütun 1 Arka Plan Görüntü Konum: Sol Üst Tekrar Görüntü Arka Plan Sütun 1: Sütun 2 Renk Yasası Arka Plan: RGBA (255,255,255,0.91 ), #FFFFFF Sütun 2 DEĞERLENDİRME: Tasarım sekmesinin altında 135deg … Özel genişliği kullanın: Evet Özel Genişlik: 1040px Özel oluklar kullanın: Evet Gapthang Genişliği: 1 Eşit Sütun Yüksekliği: Evet Özel Dolgu: 0px üst, 0px sağ, 0px Alt, 0px Sol Sütun 2 Özel Dolgu:% 5 Üst,% 7 Sağ,% 5 Alt,% 7 Sol Animasyon Stili: Animasyonun yönünü Katlayın: Animasyon süresinin altında: 800ms Bu animasyon efektinde tüm satırları katlayarak görüntüleyecektir ekrana. Özellikle Ana öğe kutusuna katılın: Kutu -Shadow: 0 40px 90px -35px RGBA (0.0,0, .3); Bu bölüm için hepsi bu. Sonuçlarınızı görün. Bu bölümün animasyon ve tasarım öğeleri pürüzsüz olduğundan, bunun çoğu sayfada kullanılabilecek tasarım ve animasyon türünün iyi bir örneği olduğunu düşünüyorum. Üst ve alt çizgiler, kitabın açılışını arkadan göreceksiniz gibi açıktır. Metin ve düğmeler üst sıradaki üst ve aşağı satırlarda hafifçe yukarı doğru hareket eder. Harika bir kombinasyon. 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. Keyfini çıkarın! 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_1.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 1 (Bölüm 1). JSON Animasyon Efektleri Bölüm 1 (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 umarım bu bölümlerin her ikisi de Divi animasyon özelliğini kullanarak yaklaşan yapı için bir ilham kaynağı olacaktır. Tek başına tasarım konsepti iyidir ve düzen, yalnızca birkaç küçük ayarla herhangi bir web sitesine kolayca ayarlanabilir. Burada kalın çünkü bu seride daha fazla tartışacağız. Bu serinin bir sonraki bölümünde gelecek, animasyonlu demo sayfamızın 3. ve 4. bölümlerini oluşturarak Divi sofistike animasyon özelliğini keşfetmeye devam edeceğim. Yapmayı beklediğiniz şey budur. Bölüm 3: Bölüm 4: Lütfen aşağıda sahip olduğunuz yorumları bırakın. Kızarmış ekmek!
