Görüntüleri yüzmek ve yansıtmak için divi animasyonunu kullanmak
Bu Seri 6’nın 6. 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ıda, içeriğinize yaşamak gibi hareketler eklemek için animasyonlu roll stilini kullanarak görüntüleri nasıl canlandıracağımı gösterdiğim animasyonlu demo sayfamızın 7. bölümünü yapıyoruz.
Bugün, Animasyon Demosu sayfamızdan 8 ve 9. bölümleri ele alacağız. Bölüm 8, slayt animasyonu ve bulanıklık efektlerinin bir kombinasyonunu kullanarak üstün öğelerin nasıl belirgin hale getirileceğinin iyi bir örneğidir. Bölüm 9, takımınızın fotoğrafını gösteren takım bölümüne animasyon eklemenin basit ve zarif bir yoludur. Başlayalım. İşte bugünün gönderisinde ne inşa edeceğimiz bir göz atın Tasarım öğelerinizin hazırlanması, bu öğretici için dört görüntüye ihtiyaç duyacaktır. Özel bir arka plan görüntüsüne ve üç tarif kartı görüntüsüne ihtiyacınız olacak. Arka plan görüntüsü 1280×936’dır ve derinlik için ek gölgelere sahip 6 yarı saydam beyaz dikdörtgen ile sarı bir arka plana sahiptir. Arka plan paralakslı kısımda kullanıldıktan sonra, arka planda yüzen bir tarif kartı izlenimi verecektir. Tarif kartı görüntüsü 375×667’dir. Bu öğreticide kullanılan görüntüler aşağıdadır. Arka plan görüntüsü
Tarif kartı #1 resmi Tarif Kartı Resim #2 Tarif Kartı Resim #3 YouTube kanalı aboneliğimizi inşaat işlemine başlamadan önce Bina Bölüm 8’e yansıtmak ve yansıtmak için divi animasyonunu kullanarak, burada görsel oluşturucu 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 başına üç üçüncü sırayı (üçte biri) 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: 1366px Özel oluklar kullanın: YAŞLAR: 1 Sütun 1 Dolgu Özel:% 6 Sağ Sütun 3 Dolgu Özel:% 8 Sol bir Sonraki Partinize Arka Plan Ekle Ana arka plan görüntüsü bizim tarafımızdan. Aşağıdaki bölümleri açın ve Güncelleme: İçerik sekmesi altında … Arka plan görüntüsü: [Şekil 1280 × 936 girin] Paralax yöntemini kullanın: Evet Paralax Yöntemi: True Paralax
Görüntü #1 ekleyin Şimdi modülümüzü çizgimize eklemek için okuyoruz. İlk sütunda (solda), görüntü modülünü ekleyin. Ardından ayarları aşağıdaki gibi güncelleyin: İçerik sekmesinin altında … URL görüntüsü: [Reçete Kartı #1’i girin] Tasarım sekmesinin altına … Zorunlu Tam Genişlik: Evet Animasyon Stili: Slayt Animasyon Yönü: Animasyonun yoğunluğu için:% 20 Not: Bu kartın her görüntüsü, bir paralaks arka plan görüntüsü ile yapılan “yüzen” etkiyi ilerletmek için yükselecektir. Devam sekmesinin altında … Burada yuvarlak kenar kartları, gölge kutuları ve bulanık filtreler sağlamak için bazı özel CSS ekleyeceğiz. Ana eleman kutusuna aşağıdaki CSS’yi girin: Border-Radius: 10px;
Taşma: gizli; Box-Shadow: 0 40px 40px 0 RGBA (232,170,0,0.0.7);
Filtre: Bulanıklık (2px) opaklık (.75);
Ayarları Kaydet Bir sonraki orta sütuna iki metin modülü ekleyin, ikinci sütun (veya orta) metin modülünü ekleyin ve ayarları aşağıdaki gibi güncelleyin: İçerik sekmesinin altında … Metin sekmesi içerik kutusuna aşağıdaki H1 başlığını girin :
Başarı için en iyi tarifler
Tasarım sekmesinin altında … Yazı Tipi Başlığı: Playfair Ekranı, Kalınlık (B) Yazı Tipi Boyutu: 60px Terder Hat Yüksekliği: 1.3EM Özel Marj: Animasyon Stilinin Altında 20 piksel: Üst Kaydet Ayarları Yeni’nin altına başka bir metin modülü ekleyin Ayarları aşağıdaki gibi oluşturur ve güncellersiniz: İçerik sekmesinin altında …
İçindekiler: Lorem Ipsum Dolor Sit Amet, Elite Adipiscing Kavramı. Phasellus bibendum est vitae felis rhoncus grida. Sed Nec Purus Tempus, Sagittis Mi ID, Exicitur. Tasarım sekmesinin altında … Metin Yazı Tipi Boyut: 18px Metin Renk: RGBA (0.0,0,0,56) Hat Metin Yüksekliği: 1.9EM Özel Marj: 40 PX Animasyon Stili: Kat Animasyon Yönü: Gecikme Animasyonu: 150msCate: Çünkü Başlık üstte, animasyonlu bir katlama yukarı doğru, bu metin animasyonunun yönünü ayarlamak, metin modülünün ortada menteşe olan bir kitap gibi açık olduğu izlenimini verecektir.Ayarları Kaydetme Resim #2 Ekle Görüntü modülünü yeni oluşturduğunuz iki metin modülünün altına ekleyin.
Ardından ayarları aşağıdaki gibi güncelleyin: İçerik sekmesi altında … URL görüntü: [Tasarım sekmesinin altındaki [kartı #2 girin] … Zorla Tam Genişlik: Evet Animasyon Stili: Slayt Animasyon Yönü: Üst Animasyon Yoğunluğu:% 10
Not: İlk sütuna eklediğimiz ilk kart resmi gibi, bu resim de bölümü yuvarlarken biraz yukarı doğru değişecektir.
Devam sekmesinin altında … Burada yuvarlak bir kenar kart görüntüsü ve bir kutu gölgesi vermek için özel bir CSS (bulanık efekti hariç ilk kart resmine benzer) ekleyeceğiz. Ana öğe kutusuna aşağıdaki CSS’yi girin: Border-Radius: 10 piksel;
Taşma: gizli; Box-Shadow: 0 40px 40px 0 RGBA (232,170,0,0.0.7);
Ayarları Kaydet Görüntü #3 Modül görüntüsünü girerek üçüncü ve son kart görüntüsü üçüncü ve son kart görüntüsü ekleyelim:
Ardından ayarları aşağıdaki gibi güncelleyin: İçerik sekmesi altında … url görüntü: [Tasarım sekmesinin altındaki [kartı #3 girin] … Zorla Tam Genişlik: Evet Özel Kenar: Animasyon Stili Üzerinden% 20: Slide Yön Animasyonu: İçin Animasyonun yoğunluğu:% 30
Ayarları devam eden sekmenin altına kaydedin … Bu özel CSS’yi ana öğe kutusuna ekleyin: Border-Radius: 10px; Taşma: Gizli; Box-Shadow: 0 40px 40px 0 RGBA (232,170,0,0.0.7); Filtre: Bulanıklık (8px) opaklık (.4); Not: Şu anda gömülü iki kart görüntüsü ile, imleci görsel yapımcıdaki görüntüye yönlendirirken menü ayarlarını gerçekten görebilirsiniz. Menü öğesini seçmek için çerçeve görüntüsünün ekranını etkinleştirmeyi düşünebilirsiniz. Veya görsel üreticinin ayarlarını görmek için modülün herhangi bir yerini iki kez tıklayabilirsiniz.
Ayarları Kaydet
Büyük! Demo sayfamızın 8. bölümünü sonuçlandırdı. Sonuç’a bakın.
Animasyon çok canlı ve kaydırma sırasında yukarıda oturan modülün farklı bir hızıyla arka planı aşağı hareket ettiren bir paralaks özelliği kullanıyor. Kartın bir arka planla yukarı doğru canlandırılması, yüzen bir kart izlenimini verir. Söylemeliyim ki, içerik gerçekten bu bölümde görünür.
Son bölümümüzde gösterinin 9. bölümünü inşa etmek, kelimenin tam anlamıyla “görünen” küçük bir animasyonla basit bir “ekip” bölümü oluşturacağız. Yapacağımız şey bu:
Aşağıda, tel kafes ekranının düzenine bir göz atın.
Başlığın ilk bölümünü ekleyin, normal bölümü bir sütun satırı ile ekleyin. Ardından metin modülünü sütuna ekleyin. Metin ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesi altında … İçerik: Tasarım sekmesinin altındaki ekibimiz … metin yazı tipi: raleway, kalınlık (b), coper (tt) metin yazı tipi boyutu: 15px metin metin rengi: RGBA (RGBA ( 0.0, 0.0.32) Metin mektubu alanı: 5px metin çizgisi yüksekliği: 1.9em Özel Marj: 20PX Animasyon Stili: Slayt Animasyon Yönü: Animasyonun Üzerinde: 500ms Gecikme Animasyonu: 1000msi Sekme Gelişmiş … Ayarları Kaydet, Ayarları yeni oluşturduğunuz ve aşağıdaki gibi güncellediğiniz diğer metin modüllerini ekleyin: İçerik sekmesi altında. .. Etiketi Metin sekmesi içerik kutusuna aşağıdaki H1’i girin:
Yüksek yetenekli ninjalar
Tasarım sekmesinin altında … Yazı tipi başlığı: Raleway ışık hizalama metni metin metin: Orta yazı tipi boyutu yazı tipi metin: #3A3830 CEMAWork Hat yüksekliği: 1.3EM Özel kenar boşluğu: Animasyon Stili Altında 20px: Doğru Animasyon Yoğunluk:% 12
Geçerli ayarları kaydedin Küçük bir yeşil bölücü hattı eklemek için bölücü modülünü metin modülünün altına ekleyin. Ardından Bölme Ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesinin altında … Divisor’u Göster: Evet Tasarım sekmesinin altında … Renk: #7CDA24 Bölme Ağırlığı: 3px Yükseklik: 3px genişlik: 60px (Tür) Modül Hizalama: Animasyon Stili Merkezi: Slayt Animasyon Yönü: Animasyon Altında: 500ms Animasyon Gecikmesi: 1000ms Animasyon Yoğunluğu:% 200 Not: Bu animasyon bölücünün güzelliği, aynı zamanda “ekibimiz” metin modülünün kayması, iyi bir animasyon simetri ekleyerek başlığı çok iyi çerçevelemesidir. Ekip üyelerimizin görüntülerini eklemek için dört takım resmi eklemek için ayarları kaydedin, yeni yaptığımız başlıkları içeren satırın altına dört sıra sütun ekleyin.İlk sütundaki kişinin modülünü ekleyin ve ayarları aşağıdaki gibi güncelleyin: İçerik sekmesinin altında … Ad: Nick URL görüntü: [150 × 150 fotoğrafınızı girin] Tasarım sekmesinin altına … Yazı tipi başlığı: Raleway Light , Kalınlık (b), büyük harfler (b) tt) Yazı tipi boyutu: 13px renk metin başlığı: RGBA (0,0,0,0.0.71) Başlık Boşluğu: 3PXDI sekmesi devam ediyor … Devam devam et … Aşağıdaki CSS’yi ekleyin Üye resim kutusu: Border-Radius:%100; Taşma: gizli; Genişlik: 180px;
Marj: Otomatik otomatik 20px otomatik; Bu, iyi bir daire sınırının resmini verecektir. Üye açıklamasına aşağıdaki özel CSS ekleyin: Metin-align: Center; Ekran bloğu; Bu isimlere odaklanır.
Ayarları Kaydet Şimdi, sonraki üç sütunu doldurmak için sonraki üçünü eklemek için yeni oluşturduğunuz kişi modülünü çoğaltabilirsiniz. Tek yapmanız gereken, çoğalttığınız her modül için resimleri ve adları güncellemektir.
Kişinizin dört modülünü ekledikten sonra, bu bölümde çizgiyi organize etmek ve canlandırmak için son adıma hazırsınız. Bunu yapmak için satır ayarlarını aşağıdaki gibi güncelleyin: Tasarım sekmesinin altında … Özel Talang’ın genişliğini kullanın: Evet Talang Genişliği: 2 Özel Dolgu: 60px Animasyon Stili: Bounce Animasyon Süresi: 700ms Gecikmeli Animasyon: 1000ms
Not: Bu animasyonlu etki tüm satırlar için geçerli olduğundan, her modül birlikte sıçrayacaktır.
Şimdi animasyonlu demo sayfamızın 9. bölümünü bitiriyor. Ve bu da Divi ile animasyon kullanımı hakkında 6 bölüm serisini bitirdi. Dizimi kapat, umarım animasyonlu demo sayfamızı oluşturmaktan hoşlanırsınız. Tek başına tasarım olağanüstü bir ilham kaynağı oldu. Ve animasyonun bir bütün olarak kullanılması, gelecekte sayfa yapmak için bir referans kılavuzu olarak işlev göreceğinden şüphe yoktur. Bu düzeni yapmak için yönetmenimiz Kenny Sing’e teşekkür ederiz. Bununla gurur duyuyoruz, bir sonraki projeye başlamanıza yardımcı olmak için bu düzeni size ücretsiz olarak sunmak istiyoruz. 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 Haftalık Divi Düzen Paketine erişin! Bu indirmeyi kullanmak için indirme klasörümüzde all_animation_effects_1.zip adlı bir zip dosyası arayarak başlayın. Bu yazı için son ikisi de dahil olmak üzere bu serinin tüm ithalatını ortaya çıkarmak için fermuarı açın. WordPress yöneticinize Divi> Divi Kütüphanesi> İçe Aktarma ve Dışa Aktarma’ya gidin. 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. Aşağıdaki yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
