Kayar görüntülerle içeriği ortaya çıkarmak için divi animasyonunu kullanma
İnanılmaz sayfalar tasarlamak için Divi’nin yeni animasyon seçeneklerini nasıl kullanacağınızı öğretecek olan bu Seri 5 bölümünün 2. 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.
Dizimizin 1. Bölümünde, Animasyon Demosu sayfasının ilk iki bölümünü yaptık. İlk bölümdeki tasarım ve animasyon başlığı, tam standart ekran bölümünde metin modülünün öğelerini canlandırmanın benzersiz bir yolunu gösterir. İkinci kısmı oluştururken, ince ve uyumlu animasyonları, yön sayfasındaki içeriği ilginç bir şekilde görüntülemek için kolayca kullanılabilecek içerik satırlarına birleştirmenin bir yolunu bulduk.
Bugün, sayfayı kaydırırken animasyonu etkili (ve yaratıcı bir şekilde) kullanan parçaların düzenini tasarlama yolculuğumuza devam ediyoruz. Divi animasyon özelliklerinin gücünü gösteren doğrudan demo sayfamızın üçüncü ve dördüncü bölümünü oluşturacağız. Bu bölümlerin her ikisi de, ürün veya hizmetleri görüntülemek için kendi projeniz için kolayca benimsenebilen bir düzen vardır. Başlayalım. İşte bugünkü Post 3’te ne inşa edeceğimizin bir göz atması Bölüm 4 Tasarım Elemanları Hazırlama Görüntünüzü üçüncü bölüm için hazırlayın, iki resme ihtiyacınız olacak. Birincisi 880 × 600 civarında, ikincisi 790 × 880 civarında olmalıdır. Bu görüntünün boyutunun doğru olması gerekmez. Bu boyutu sadece size bir resim vermek için ekliyorum. Dördüncü bölümü oluştururken, 600×400 civarında iki resim de yapacaksınız. Bir görsel yapıcı kullanmak burada bir takip koduna ihtiyaç duymaz. Visual Builder’ı yalnızca bu serinin 1. Bölümünde oluşturduğumuz sayfamızın sonraki iki bölümünü tasarlamak için kullanacağız. Sayfanız hazırlandığı için ayrılmaya hazırsınız. YouTube kanalına abone olan kayan görüntü ile içeriği ortaya çıkarmak için divi animasyonunu kullanmak Bölüm 3 Demo Bölüm 3’ü oluşturuyoruz.
Dalış yapalım. Visual Builder’ı kullanarak, iki sütun satırı ile normal bölümü ekleyin. Sol sütunda görüntü modülünü ekleyin.
Görüntü ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesi altında … URL Resim: [880 × 600 resminizi girin] Tasarım sekmesinin altına … Zorla Tam Genişlik: Evet Animasyon Stili: Slayt Animasyon Yönü: Sol Animasyon Yoğunluğu:% 20% 20 Animasyon Başlangıç Opaklığı: % 100 Not: Bu animasyon görüntüleri yalnızca sağdan sola kaydırır. Buradaki ana animasyon ayarı yoğunluktur. Animasyon yoğunluğunu, son dinlenme yerine ulaşmak için resme çekilmesi gereken mesafeyi kısaca% 20’ye ayarlayın.
Ayarları Kaydet, Bölme modülünü ekle sağ sütuna ekleyin, içeriğimizi bölücü modülünü ve davetli modülünü kullanarak görüntüleyeceğiz. Bölme modülü, metnin üzerine kısa bölme çizgileri eklemek için kullanılacaktır. Bölme modülünü sağ sütuna ekleyin. Ardından ayarları aşağıdaki gibi güncelleyin: İçerik sekmesinin altında … Bölme sekmesinin altında: Evet Tasarım sekmesinin altında … Renk: #E4CA77 YAĞILIM Kilo: 4 piksel genişlik: 80px ( Varsayılan yüzde olduğu için bu değeri yazın. % 0 Ayarları Kaydet Bölme modülünün altına hareket etmek için davet modülünü ekleyin, davet modülünü aşağıdaki ayarlarla hareket etmek üzere ekleyin: İçerik sekmesi altında … Başlık: “Mükemmel Manzara” Metin Düğmesi: “Daha fazla bilgi edinin” İçindekiler: “Lorem Ipsum Dolor Sit amet, Seçkin Elit Kavram. Phasellus bibendum est vitae felis rhoncus grida. Sed Nec Purus Tempus, Sagittis Mi ID, Exicitur Nisl. Lorem iPsum Dolor oturma amet, elit adipiscing contecur. Phasellus bibendum est vitae felis rhoncus grida. Sed Nec Purus Tempus, Sagittis Mi ID, Deficticur Nisi. ” 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, Coper (TT) Zaman Yazı Tipi Boyutu: 38px Metin Renk Metin Şirketi: #0C0C0C Aralık Başlık Harf: 0.2EM gölgelik çizgisinin yüksekliği: 1.4EM Gövde yazı tipi: gövde yazı tipi boyutu: 18px gövde metninin rengi: #9e9e9e gövde hattı yüksekliği: 1.8EM düğme için özel bir stil kullanın: evet metin boyutu düğmesi: 15px metin renk düğmesi: #000000 renk arka plan anahtarı düğmesi: RGBA (225,225,225, 0) Düğme Limitinin Genişliği: 0px Harflerin Mesafesi Düğmesi: 2px Yazı Tipi Düğmesi: Lato, Kalın (B), Büyük Kesin (TT) Düğme simgesi: Sağ ok Yalnızca düğmeye işaret ettiğinde simgeler görüntüleyin: Düğme Yok Hareket mesafesi: 0pxgaya animasyon: animasyonun yönünü katlayın: Doğru animasyon süresi: 1200ms animasyonun ertelenmesi: 50ms animasyon yoğunluğu:% 70 opaklık başlangıç animasyonu:% 0 Not: Bu animasyon, görüntü sola kaydırıldığında görüntünün arkasından katlanan metnin görüntüsünü verir. Ayarları Kaydet Şimdi aşağıdaki satırı düzenlemek için tıklayın ve Ayarlar Güncelleme: Tasarım sekmesinin altında … Özel genişliği kullanın: Gelişmiş sekmenin altındaki özel genişlik: 1366px, aşağıdaki özel CSS’yi ana öğe kutusu sütununa ekleyin: z: z ekleyin -Index: 999;
Not: Otomasyon sırasında sağdaki metin görüntü ile örtüşür. Bu CSS, animasyon sırasında görüntünün (sütun 1) metnin üzerinde kalmasını sağlar.
Ayarları Kaydet Çizgilerinizi çoğaltın ve ilk satır için güncelleyin. İkinci bir sıra yapmak için zaman kazanmak için, yeni yaptığınız kopyalar. Yinelenen satır ayarlarını aşağıdaki gibi düzenleyin: Devam sekmesinin altında … Sütun 1’in ana öğesindeki özel CSS’yi kaldırın ve ana öğe kutusu sütunu 2’ye ekleyin: z-index: 999;
Resimimiz doğru sütunda olacağından, soldaki metin animasyonunun üstünde kalmak için sütununa ihtiyacımız var. Görüntü modülünün ve davet modülünün güncelleme ayarlarını ayarlayın.
Bu bölüm biraz farklı bir sütun yapısına sahip olacaktır. Simgeyi tıklayın Sıra sütununun yapısını değiştirin (kopya satır simgesinin yanında) ve üçüncü iki sütunun düzenini seçin.
Şimdi yapmamız gereken, hattaki her modülü yeniden ziyaret etmek ve bazı değişiklikler yapmak. İlk olarak, bölücü modülü ayarlarını aşağıdaki gibi güncelleyin: Tasarım sekmesi altında … Hizalama Modülü: Doğru Animasyon Yönü: Sol Ayarlar Sonraki Güncelleme Davetiye modülü ayarlarını aşağıdaki gibi görüyor: “Başlık:” Kendisi için Konuş “Metin Oryantasyonu: Doğru Planlama Metin Metin: Doğru Genişlik: 700 piksel (Bu yazın) Animasyon Yönü: Sol
Sonraki Ayarları Kaydetme Yeni 790×880 resminizle sağ sütundaki görüntü modülünü güncelleyin. Bölüm 3 için hepsi bu! Sonuçlarınızı görün. Bina Bölüm 4 Demo Bölüm 4, birkaç gelişmiş CSS hilesi ile bir tasarım modülü tasarımını daha yüksek bir seviyeye getirir. Ve metin modülünü menteşeye katlamak için biriktirmek nakliye için çok uygundur. Dalış yapalım. Görsel bir oluşturucu kullanarak, normal bölümü iki sütun satırı (bir buçuk buçuk) ile ekleyin. İlk modülümüzü eklemeden önce, arka plan rengini kendi parçamıza ekleyelim. Bölüm ayarlarını düzenlemek için tıklayın. İçerik sekmesinin altında, Arka Plan Rengi sekmesini seçin ve #262938 Renk girin.
Ayarları Kaydet Sol sütundaki ilk metin modülünü ekleyin Metin modülünü ekleyin ve metin ayarlarını aşağıdaki gibi güncelleyin: İçerik sekmesinin altında … Metin sekmesi içerik kutusuna aşağıdaki html girin: Tasarım sekmesinin altındaki adipiscing elit sonuç
… Metin Rengi: Yazı Tipi Başlığı Işığı: Playfair Ekranı, Kalınlık (B) Kopyalama Yazı Tipi Boyutu: Gölgelik Hattı 38px Yüksekliği: 1.3EM Özel Marj: Animasyonun 20px’si: Animasyon: Animasyon yönünü katlayın: üst
İkinci metin modülünü ekleyin, ardından doğrudan geçerli metin modülünün altına başka bir metin modülü ekleyin. Ardından ayarları aşağıdaki gibi güncelleyin: İçerik sekmesi altında … İçindekiler: “Lorem Ipsum Dolor Sit Amet, Elite Adipising Concept. 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) Metin Hattı Yüksekliği: 1.9EM Özel Marj: 40px Bubiles Animasyonlu Stil: Katlama Animasyon Yönü: 150msNot: Bu animasyonlu efekt, menteşeler üzerindeki açık metin modülünün ikinci etkisini oluşturmak için yukarıdaki metin modülünün animasyonu ile çalışır. Ayarları Kaydet Modül Düğmesi Modül Ekle Son metin modülünün altındaki düğme modülünü ekleyin ve aşağıdaki ayarları güncelleyin: Metin düğmesi: Daha fazla URL düğmesi: # düğme için özel stil kullanın: evet metin boyutu düğmesi: 15px renk metin düğmesi: # 01254c renk arka plan Düğme: #FFFFFF RADIUS Sınır Düğmesi: 0px Yazı Tipi Düğmesi: Kalın (B), Sermaye Harfleri (TT) Özel Dolgu: 10px üst, 30px sağ, 10px alt, 30px Sol Animasyon Stili: Slayt Animasyon Yönü: Animasyon süresi altında: 1600ms Gecikme Animasyonu: 150ms Animasyon Yoğunluğu:% 20 Not: Bu animasyonlu efekt, sütunda hareket eden içeriğin son kısmı olarak düğmeye dikkat çeken daha uzun bir süreye sahiptir.
Ayarları Kaydet Sütun için resim modülünü sağ sütuna ekleyin. Şimdi sağ sütuna bir görüntü modülü eklememiz gerekiyor. Ardından ayarları aşağıdaki gibi güncelleyin: İçerik sekmesi altında … URL Resim: [600 × 400 resminizi girin] Tasarım sekmesinin altına … Zorla Tam Genişlik: Evet Animasyon Stili: Slayt Animasyon Yönü: Doğru Animasyon Gecikmesi: 800ms Animasyon Yoğunluk:% 20 Not: Bu animasyon görüntüleri soldan sağa kaydırır.
Güncelleme Ayarları Satır Ayarları şimdi aşağıdaki satırı düzenlemek için tıklayın ve Güncelleme Ayarları: Tasarım sekmesinin altında … Özel genişlik kullanın: özel genişlik: 1366px Özel Dolgu: 27px üst, 0px sağ, 170px dip, 0px Sol Solum 1 Dolgu Özelliği : Gelişmiş sekmesinin altında % 6 üst … Ana öğe kutusuna aşağıdaki özel CSS ekleyin Sütun 1: Z-Index: 999; Bu CSS’nin eklenmesi, metnin animasyon sırasında resmin üzerinde kalmasını sağlar. Ardından Ana Eleman Kutusu sütunu 2’ye aşağıdaki özel CSS ekleyin: Dönüşüm: Ölçek (1.3);
Dönüşüm-Origin: Sağ üst; Bu CSS, sütun 2 (resim) ‘deki tüm boyutlarını artırmak (eklemek) için akıllı bir tasarım ekler. Dönüşümün kökeni özelliği, sütuna satırın sağ üstünden pullu olmasını söyler. Bu, soldaki metin ve görüntü arasında biraz üst üste biner. Yinelenen ayarlarınızı kaydedin ve şimdi Bölüm 3’te yaptığımız gibi satırınızı güncelleyin, satırları çoğaltacağız. Satırdan iki katından sonra, 2 metin modülünü ve düğme modüllerini sol sütundan sağa sürükleyin. Ve görüntü modülünü sağ sütundan sola çekin. Şimdi yapmamız gereken, yinelenen hatlarımız ve içeriklerimiz hakkında bazı küçük güncellemeler yapmak. İlk olarak, satır ayarlarını aşağıdakilerle güncelleyelim: Tasarım sekmesinin altında … Özel dolgu: 40px’e kadar, 0px sağ, 40px alt, 0px Sol Solun 1 Dolgu Özel: [Varsayılan’a dönün; % 6 üstünü sil] Sütun 2 Dolgu Özel: Aşağıdaki sekmelerde% 6 Üst … Ana öğe kutusu Sütun 1 ve Ana Eleman Kutusu sütunundan özel CSS’yi silin. Bu, çoğaltmadan getirilir ve buna ihtiyacımız yok Yeniden. Bir sonraki görüntü modülünü güncelleyin, görüntü modülünü (şimdi sol sütunda) aşağıdakilerle güncelleyin: İçerik sekmesinin altında … URL görüntüsü: [Tasarım sekmesinin altına yeni 600×400 resminizi girin … Animasyon yönü: Sol
Not: Bu, görüntünün sola kayması dışında, önceki satırdaki resimden aynı sürgülü animasyonu yapar. Devam sekmesinin altında … bu resmin kaçtığını düşünüyorsanız. tekrar düşün! Bulanıklık efekti eklemek için yapmanız gereken tek şey, ana eleman kutusuna aşağıdaki özel CSS hattını eklemektir: filtre: Bulanıklık (5px) opaklık (.6);
Bulanık etkiye ek olarak, bu CSS ayrıca görüntüleri%60 opaklık ile şeffaf hale getirir.
Ayarları Kaydet Sağ sütundaki metin modülünü güncelleyin Sağ sütuna geçer, üst metin modülü içeriğini daha kısa H1 başlıklarıyla güncelleyin:
Kavram Adipising Elite
Ayarları ve Voila’yı Kaydet! Hepimiz Bölüm 4 ile bitirdik. Nihai sonuçlarımıza 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!
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_2.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 2 (Bölüm 1). JSON Animasyon Efektleri Bölüm 2 (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 karbonhidratlar için biraz susamış olmanın yanı sıra, bu bölüm görüntüleri görüntülemenin ve açmanın yaratıcı yollarını görüntüler. Buna ek olarak, gecikmiş düğme slaytı ile menteşeler üzerine katlanan metin modülü, kullanıcıyı CTA’ya tıklamaya giderek daha fazla çekiyor. Gelecek Bu serinin 3. Bölümünde size açıklama modülünü tasarlamak ve canlandırmanın güzel bir yolunu göstereceğim. Bu bölümün düzeni çeşitli amaçlar için kullanılabilir. Bunu hizmet sürecinizi veya hizmet listenizi veya ürünlerinizi göstermenin bir yolu olarak görebiliyorum. Onu bekliyor. Aşağıdaki yorumlarla iletişime geçmeyi unutmayın!
