Bir Sürecin İlerlemesini Göstermek için Divi'nin Slayt Animasyonunu Kullanma
Yayınlanan: 2017-10-15Harika sayfa bölümleri tasarlamak için Divi'nin yeni Animasyon seçeneklerini nasıl kullanacağınızı öğretecek olan bu 6 bölümlük dizinin 3. bölümüne hoş geldiniz. Size web sitenize animasyon ekleme tekniklerini göstermek için canlı demo sayfamızın farklı bölümlerini nasıl oluşturacağınız konusunda size yol göstereceğim. Animasyon özellikleri gerçekten eğlenceli ve kullanımı kolaydır. Ve Visual Builder ile yaratımınızın yolun her aşamasında hayat bulduğunu görebilirsiniz. Divi animasyonlarının gücünü keşfederken gelin ve bana katılın.
Son gönderimizde, animasyon demo sayfamızın 3. ve 4. bölümlerini oluştururken, ürün ve hizmetleri görüntülemek için web sitenizin bölümlerini tasarlamanın ve canlandırmanın birkaç yaratıcı yolunu gösterdim.
Bugün, dört çarpıcı Blurb Modülünü görüntülemek için harika bir animasyon kullanan Bölüm 5'i ele alacağız. Tanıtım yazısı animasyonlarının adım adım zamanlaması, tanıtım yazılarının kullanıldığı adım adım süreci gerçekten tamamlıyor.
Hadi dalalım!
Bugünün Yazısında Ne İnşa Edeceğimize Kısa Bir Bakış
Tasarım Öğelerinin Hazırlanması
Bu eğitim için gerçekten ihtiyacınız olan tek şey, Blurb Modülleri için kullanılan 4 adet 207×188 görüntü ikonudur. İşte kullanacağım resimler.
Bir Sürecin İlerlemesini Göstermek için Divi'nin Slayt Animasyonunu Kullanma
Youtube Kanalımıza Abone Olun
Bina Bölüm 5
Visual Builder'ı kullanarak normal bir bölüm ekleyin (diziyi takip ediyorsanız bölüm 4'ün altında). Başka bir şey yapmadan önce, bölümünüze #f5f9fc arka plan rengini ekleyin ve ayarlarınızı kaydedin.
İki Metin Modülü Kullanarak Bölüm Başlığınızı Ekleyin
Ardından tek sütunlu bir satır ekleyin. Satırda bir Metin Modülü ekleyin ve ayarları aşağıdaki gibi güncelleyin.
İçerik sekmesi altında…
İçerik: "Kurulum"
Tasarım sekmesi altında…
Metin Yazı Tipi: Kalın (B), Büyük Harf (TT)
Metin Yazı Tipi Boyutu: 15px
Metin Metin Rengi: #6a8091
Metin Harf Aralığı: 5px
Metin Satır Yüksekliği: 1.9em
Metin Yönü: Merkez
Aralık: 20px Alt
Animasyon Stili: Slayt
Animasyon Yönü: Yukarı
Animasyon Süresi: 850ms
Ayarları kaydet
Şimdi yeni oluşturduğunuz modülün altına başka bir Metin Modülü ekleyerek bölüm başlığını ekleyelim. Metin Ayarlarını aşağıdaki gibi güncelleyin:
İçerik sekmesi altında…
İçerik kutusunun metin sekmesine aşağıdaki html'yi ekleyin:
<h1>Say Hello to DIVI</h1>
Tasarım sekmesi altında…
Başlık Yazı Tipi: Kalın (B)
Başlık Metni Hizalama: Merkez
Başlık Yazı Tipi Boyutu: 39px
Başlık Metni Rengi: #2f3a54
Not: Bu bir h1 başlığı olduğu için Başlık Metni ayarlarını düzenlememiz gerekiyor.
Genişlik: 600 piksel (bu değeri yazın)
Modül Hizalaması: merkez
Özel Kenar Boşluğu: 20 piksel Alt
Animasyon Stili: Slayt
Animasyon Yönü: Yukarı
Animasyon Süresi: 850ms
Animasyon Yoğunluğu: %12
Animasyon Hızı Eğrisi: Kolaylık
Ayarları kaydet
Dört Bulanıklığı Tasarla
Artık Blurb Modüllerimizi eklemeye hazırız. İlk olarak, dört sütunlu (1/4 1/4 1/4 1/4) yapıya sahip bir satır oluşturun.
İlk (en soldaki) sütuna bir Bulanıklık Modülü ekleyin.
Ardından Blurb Ayarlarını güncelleyin.
İçerik sekmesi altında…
İçerik Kutusunun metin sekmesine aşağıdaki html'yi ekleyin:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida sed nec purus.</p> <p><a href="#" style="font-size: 12px;letter-spacing: 1px; color: #6a8091;"><strong>READ MORE ➔</strong></a></p>
Not: Kullanıcıya tıklaması için başka bir seçenek vermek için manuel olarak bir bağlantı ekledim. Manuel bağlantının url'sinin, tanıtıcı modül url'sine eklediğiniz bağlantıyla eşleştiğinden emin olun.
URL: [url'yi girin]
Resim: [207×188 resminizi girin]
Arka Plan Rengi: #ffffff
Tasarım sekmesi altında…
Metin Yönü: Merkez
Başlık Yazı Tipi: Varsayılan, Kalın (B), Büyük Harf (TT)
Başlık Metni Rengi: #7969f4
Başlık Harf Aralığı: 3px
Başlık Çizgisi Yüksekliği: 3em
Gövde Metni Rengi: #6a8091
Gövde Çizgisi Yüksekliği: 1.9em
Özel Dolgu: 40px Üst, 40px Sağ, 40px Alt, 40px Sol
Animasyon Stili: Slayt
Animasyon Yönü: Yukarı
Animasyon Süresi: 700ms
Animasyon Yoğunluğu: %4
Resim/Simge Animasyonu: Animasyon Yok
Gelişmiş sekmesi altında…
Ana Öğe kutusuna aşağıdaki Özel CSS'yi ekleyin:
border-radius: 6px; box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
Ayarları kaydet
Artık bir Blurb'u tamamladığınıza göre, onu sonraki üç tanıtım için şablon olarak kullanabiliriz.
Devam edin ve modüle sağ tıklayın ve kopya modülünü seçin. Ardından modülü kalan üç sütunun her birine yapıştırın (ctrl + v).
Şimdi tek yapmamız gereken, çoğaltılan üç modülün her birine birkaç güncelleme eklemek.
İkinci sütundaki Blurb Modülü için aşağıdakileri güncelleyin:
İçerik sekmesi altında…
Başlık: 2. Adım
İçerik: [metni ve manuel bağlantı url'sini güncelleyin]
URL: [bildirim url'sini güncelle]
Resim: [yeni 207×188 resim ekle]
Tasarım sekmesi altında…
Başlık Metni Rengi: #e944ff
Animasyon Gecikmesi: 50ms
Animasyon Yoğunluğu: %12
Üçüncü sütundaki Blurb Modülü için aşağıdakileri güncelleyin:
İçerik sekmesi altında…
Başlık: 3. Adım
İçerik: [metni ve manuel bağlantı url'sini güncelleyin]
URL: [bildirim url'sini güncelle]
Resim: [yeni 207×188 resim ekle]
Tasarım sekmesi altında…
Başlık Metni Rengi: #3ebaef
Animasyon Gecikmesi: 100ms
Animasyon Yoğunluğu: 20%
Dördüncü sütundaki Blurb Modülü için aşağıdakileri güncelleyin:
İçerik sekmesi altında…
Başlık: 4. Adım
İçerik: [metni ve manuel bağlantı url'sini güncelleyin]
URL: [bildirim url'sini güncelle]
Resim: [yeni 207×188 resim ekle]
Tasarım sekmesi altında…
Başlık Metni Rengi: #95d624
Animasyon Gecikmesi: 150ms
Animasyon Yoğunluğu: %30
Tüm Blurb'larınızı güncelledikten sonra Row ayarlarını aşağıdaki gibi güncelleyelim:
Tasarım sekmesi altında…
Özel Genişlik Kullan: EVET
Özel Genişlik: 1366 piksel
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 2
Animasyon Stili: Yakınlaştır
Animasyon Süresi: 700ms
Animasyon Opaklığı Başlatma: %100
Ayarları kaydet
Artık bu bölümle işiniz bitti. Demo sayfasında tanıtım yazısının altında başka bir resim var ama buraya eklemenin gerekli olduğunu düşünmedim.
Bonus: Kolay İçe Aktarma için Bu Bölümleri İndirin
Bir bonus avantaj olarak, bugünün eğitiminde yerleşik bölümleri, aşağıdaki e-posta katılım formunu kullanarak alabileceğiniz ücretsiz bir indirme şeklinde paketledik. Sadece e-postanızı girin ve indirme düğmesi görünecektir. Divi Bültenimizin bir parçasıysanız, "yeniden abone olma" konusunda endişelenmeyin. E-postanızı yeniden girin, daha fazla e-postaya veya kopyaya neden olmaz. Sadece indirmeyi ortaya çıkaracaktır.
Eğlence!
Düzen Paketini İndirin
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Bu indirmeleri kullanmak için, indirilenler klasörümüzde Animation_Effects_Part_3.zip adlı sıkıştırılmış dosyayı bularak başlayın. Aşağıdaki içe aktarmaları ortaya çıkarmak için sıkıştırın.
Animasyon Efektleri Bölüm 3 (bölüm 1).json
Animasyon Efektleri Bölüm 3 (bölüm 2).json
WordPress Yöneticinizde Divi > Divi Kitaplığı > İçe ve Dışa Aktar'a gidin. Taşınabilirlik modu açıldığında, içe aktar sekmesini ve dosya seç etiketli düğmeyi tıklayın.
Tercih ettiğiniz json dosyasını seçin ve “Divi Builder Düzenlerini İçe Aktar” seçeneğine tıklayın. İçe aktarma işlemi tamamlandıktan sonra, yukarıdaki bölümlerden birini eklemek istediğiniz gönderiye veya sayfaya gidin.
Görsel oluşturucuyu etkinleştirin. Sayfanın yukarıdaki bölümlerden birini eklemek istediğiniz bölümüne gidin. Yeni bölüm ekle simgesine tıkladığınızda karşınıza “Kütüphaneden Ekle” seçeneği çıkacaktır. Bu seçeneği seçin ve istediğiniz düzeni seçin.
Toplama
5. bölümün tasarımı ve animasyonu, içeriğin tesliminde yalnızca birkaç animasyon ayarının yapabileceği gücü gerçekten gösteriyor. Her bir tanıtım yazısının ilerleme halinde gösterilmesi sadece harika görünmekle kalmaz, aynı zamanda bir sürecin adımlarını gösterdiğiniz düşünülürse mantıklıdır.
geliyor
Serimizin 4. bölümünde, ürünleri veya indirmeleri görüntülemek için size muhteşem bir düzen göstereceğim. Ve elbette, animasyonun akıllıca kullanımını baştan sona vurgulayacağım.
Bir sonrakine kadar!
Aşağıdaki yorumlarda sizden haber bekliyorum.