Divi'nin Yeni Animasyon Efektleri Nasıl Kullanılır?

Harika 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 1. 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 animasyonunun gücünü keşfederken gelin ve bana katılın.

Animasyon bir sayfayı canlandırabilir. Etkili bir şekilde yapılırsa, kullanıcı etkileşime girebilir ve sayfanızdaki içeriği keşfetmeye daha yatkın hale gelebilir. Kötü yapılırsa, animasyonlar kullanıcının dikkatini tamamen dağıtabilir ve onları şaşkın bir hayal kırıklığı içinde uzaklaştırabilir. Animasyonun hızı, zamanlaması ve yoğunluğu, kullanıcı sayfayı aşağı kaydırırken bu hareket senfonisinde önemli bir rol oynar.

Divi'nin gelişmiş animasyon özellikleri, web sitenizin herhangi bir öğesine animasyon eklemenize olanak tanır. Ve bölümlerinizi canlandıran sayısız hareket kombinasyonu oluşturmak için bu animasyonlu öğeleri birleştirebilirsiniz.

Bu dizinin 1. bölümünde, Divi'nin animasyon özelliklerinin gücünü gösteren canlı demo sayfamızın ilk iki bölümünü oluşturmak ve canlandırmak için görsel oluşturucuyu nasıl kullanacağınızı göstereceğim.

Başlayalım.

İşte Bu Seride Yapacaklarımıza Kısa Bir Bakış

Serinin 1. Bölümü

Bölüm 1

Bölüm 2

Serinin 2. Bölümü

3. Bölüm

Bölüm 4

Serinin 3. Bölümü

5. Bölüm

Serinin 4. Bölümü

6. Bölüm

Serinin 5. Bölümü

Bölüm 7

Serinin 6. Bölümü

Bölüm 8

9. Bölüm

Tasarım Öğelerinin Hazırlanması

İlk bölüm için iki resme ihtiyacınız olacak. İlki, 1280×800 boyutlarında tam ekran arka plan resminizdir. İşte kullanıyorum:

İkinci görüntü, aynı görüntünün dikey olarak çevrilmiş ve alta doğru soluklaştırılmış bir düzenlenmiş halidir. Bu ikinci resim, ana başlığınız için arka plan görevi görecek ve 800×400 civarında olmalıdır.

Ters görüntü oluşturmak için görüntüyü Önizleme'de açın ve Araçlar > Dikey Çevir'i seçin veya görüntüyü Photoshop'ta açın, Görüntü > Görüntü Döndürme > Tuvali Dikey Çevir'i seçin. Resmin altına fade out efekti eklemek için 800px boyutunda ve %0 sertlikte silgi aracını fırça modunda kullandım. 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ım düzenlemelerinin çoğunu gerçekleştirmek için gimpshop gibi ücretsiz bir fotoğraf düzenleme çözümünü deneyebilirsiniz. Bir fotoğraf düzenleme yazılımını nasıl kullanacağınızı bilmiyorsanız (ve bu noktada öğrenmeyi umursamıyorsanız), şimdilik ikinci resmi dışarıda bırakmaktan çekinmeyin veya aşağıdakini kullanın (tıklayın ve masaüstü).

İkinci bölüm için iki resme ihtiyacınız olacak. İlki bunun gibi 730×490 civarında olmalı.

İkincisi ise aşağıdaki gibi 525×660 civarında olmalıdır.

Animasyon Terminolojisini Anlama

Henüz yapmadıysanız, devam edin ve gelişmiş animasyonları tanıtan özellik güncelleme gönderisini okuyun. Gönderinin sonunda Nick, oluşturucu boyunca bulacağınız animasyon özelliklerinin her birinin yararlı bir tanımını/açıklamasını verir. Bu animasyon özelliklerinin gerçekte ne yaptığını anlamak, oluşturma süreci için önemlidir.

Bu animasyon özelliklerinin ne olduğunu anladıktan sonra, başlayalım.

Divi'nin Yeni Animasyon Efektleri Nasıl Kullanılır?

Youtube Kanalımıza Abone Olun

Yeni Sayfa Ayarlarınızı Ekleyin

WordPress Kontrol Panelinden Sayfalar > Yeni Ekle'ye gidin. Ardından sayfanıza bir başlık ekleyin. Ardından, sayfanın sağ üst köşesindeki kutuda Divi Sayfa Ayarları'nı bulun ve Nokta Gezinme “AÇIK” öğesini seçin. Sayfa Nitelikleri kutusunda, sayfa şablonunuz için Boş Sayfa'yı seçin. Son olarak, "Divi Builder'ı Kullan" düğmesini tıklayın ve mizanpajınızı oluşturmaya başlamak için Visual Builder'ı dağıtın.

Bina Bölümü 1: Tam Ekran Başlık Tasarımı ve Animasyonu

Bu başlık bölümü, tam ekrana ayarlanmış tam genişlikte 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 header modülünü kullanmak yerine standart bir bölüm kullanacağız ve yüksekliği 100vh olarak ayarlayacağız. Bu şekilde içine bir metin modülü ekleyebiliriz.

Visual Builder'ı kullanarak, oluşturucu başlatılırken varsayılan olarak zaten görüntülenen standart bölümün bölüm ayarlarını düzenlemek için tıklayın. Aşağıdakileri güncelleyin:

İçerik sekmesi altında…

Arka Plan Resmi: [1280×800 arka plan resminizi girin]
Paralaks Etkisini Kullan: EVET
Paralaks Yöntemi: Gerçek Paralaks

Tasarım sekmesi altında…

Özel Dolgu: %5 Üst, 0px Sağ, %5 Alt, 0px Sol

Gelişmiş sekmesi altında…

Ana Öğe kutusuna aşağıdaki Özel CSS'yi ekleyin:

min-height: 100vh

Bu tek css satırı, bölüme görüntü alanı yüksekliğinin %100'ünü göstermesini söyler.

Ayarları kaydet

Ardından satırınıza tek sütunlu bir yapı ekleyin ve sütuna bir metin modülü ekleyin. Metin modülü ayarlarını aşağıdaki gibi güncelleyin:

İçerik sekmesi altında.. .

İçerik kutusunun içine "Divi" kelimesini eklemeniz yeterlidir.

Tasarım sekmesi altında…

Metin Yazı Tipi: Oswald, Büyük Harf (TT)
Metin Yazı Tipi Boyutu: 14px
Metin Metin Rengi: #08408e
Metin Harf Aralığı: 1.5em (bunu yazmanız gerekecek)
Metin Yönü: Merkez
Özel Marj: %2
Animasyon Stili: Çevir
Animasyon Tekrarı: Bir kez
Animasyon Yönü: Sağ
Animasyon Süresi: 2000ms
Animasyon Gecikmesi: 1100ms
Animasyon Yoğunluğu: %100
Animasyon Opaklığı Başlatma: %0
Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış

Mola… Bir dakika duralım, böylece size bu benzer animasyonu manuel olarak eklemek için ne gerektiğini göstereyim.

Animasyon için gereken satır içi stile sahip html:

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

Ve işte animasyon için gereken CSS:

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

Ve bu, tarayıcı penceresinde görünür hale geldiğinde animasyonu etkinleştirmek için gerekli kodu içermez. Her neyse, tüm bunlar, bu yerleşik animasyon özelliklerine sahip olmanın çok büyük bir zaman tasarrufu sağladığını söyleyebiliriz. Ve animasyon seçeneklerini düzenlerken animasyonu canlı olarak görebilmek önemli bir bonus.

Şimdi Metin Modülü Ayarlarımızı güncellemeye devam edelim:

Gelişmiş sekmesi altında…

Ana Öğe kutusuna aşağıdaki Özel CSS satırını ekleyin:

text-indent: 1.5em

Ayarları kaydet

Ardından, yeni oluşturduğunuz modülün hemen altına başka bir Metin Modülü ekleyin ve ayarları aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

İçerik kutusunun metin sekmesine aşağıdaki html'yi ekleyin:

<p><span>Believing</span><br />is  Seeing</p>

Tasarım sekmesi altında…

Metin Rengi: Açık
Metin Yazı Tipi: Oswald, Büyük Harf (TT)
Metin Yazı Tipi Boyutu: 8vw (bunu yazmalısınız; bu yazı tipi boyutunu görünüm alanı genişliğinin %8'i yapar)
Metin Metin Rengi: rgba(255,255,255,0.79)
Metin Satırı Yüksekliği: 1.4em
Metin Yönü: orta
Animasyon Stili: Katlama
Animasyon Yönü: Yukarı
Animasyon Süresi: 1800ms
Animasyon Gecikmesi: 0ms
Animasyon Yoğunluğu: %60

Ayarları kaydet

Bu animasyon efekti, ana başlığı görünüşte düz bir konumdan katlayarak (veya ayakta tutarak) ortaya çıkaracaktır. Artık ana başlık yazımız bittiğine göre baş aşağı arka plan resmimizi satıra ekleyelim.

Şimdi az önce oluşturduğunuz iki metin modülünü içeren satırın Satır Ayarlarına gidin ve Ayarları aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

Arka Plan Resmi: [800×440 resminizi ekleyin]
Arka Plan Resmi Boyutu: Sığdır
Arka Plan Resmi Konumu: Üst Merkez
Arka Plan Resmi Tekrarı: Tekrar Yok

Tasarım sekmesi altında…

Özel Genişlik Kullan: EVET
Birim: %
Özel Genişlik: %50
Özel Dolgu: %12 Üst, %0 Sağ, %5 Alt, %0 Sol
Animasyon Stili: Slayt
Animasyon Yönü: Yukarı
Animasyon Gecikmesi: 300ms
Animasyon Yoğunluğu: 20%

Bu animasyon efekti, görüntüyü sanki dağların arkasından yükseliyormuş gibi yukarı kaydırır.

İlk bölüm için bu kadar. Son tasarımımızı ve animasyonumuzu kontrol edelim.

Buradaki üç animasyonlu öğe, Satır (yukarı kayan), “İnanmak Görmektir” metnini içeren metin modülünü (merkezinden dışarı doğru katlanan) ve “Divi” metnini (gecikmeli) içeren metin modülünü içerir. diğer elemanlar durduktan sonra sağa çevirmek için). Kombinasyon, farklı içerik parçalarını amaçlı ve zamanında ortaya çıkararak ziyaretçiyi gerçekten etkiliyor.

Bina Bölüm 2

Animasyon demo sayfamızın bu ikinci bölümü, sayfanızdaki içeriği ortaya çıkarmanın ince ama son derece havalı bir yolunu gösteriyor. Aslında tüm hareketleri ilk bakışta tanımak neredeyse imkansızdır.

İkinci bölümü oluşturmak için önceki bölümün altına normal bir bölüm ekleyin. Bölümde iki sütunlu (yarım bir buçuk) satır ekleyin.

Sol sütuna, aşağıdaki ayarlarla bir metin modülü ekleyin:

İçerik sekmesi altında…

İçerik kutusunun metin sekmesine aşağıdaki html'yi girin:

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

Tasarım sekmesi altında…

Metin Rengi: Açık
Metin Yazı Tipi: Montserrat
Metin Yazı Tipi Boyutu: 18px
Metin Satır Yüksekliği: 1.8em
Başlık Yazı Tipi: Montserrat, Kalın (B), Büyük Harf (TT)
Başlık Yazı Tipi Boyutu: 39px (masaüstü)
Başlık Çizgisi Yüksekliği: 2.2em
Alt kenar boşluğu: 50 piksel
Animasyon Stili: Slayt
Animasyon Yönü: Yukarı
Animasyon Yoğunluğu: %10

Bu animasyon efekti, metin bloğunu yukarı kaydırarak görüntüye getirecektir.

Ayarları kaydet

Ardından, az önce oluşturduğunuz Metin modülünün altına bir düğme modülü ekleyin. Düğme modülü ayarlarını aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

Düğme Metni: Daha Fazla Bilgi Edinin
Düğme URL'si: # (veya olmasını istediğiniz her şey)

Tasarım sekmesi altında…

Düğme Hizalama: Sol
Metin Rengi: Açık
Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 15px
Düğme Sınır Yarıçapı: 0
Düğme Harf Aralığı: 3px
Düğme Yazı Tipi: Montserrat, Kalın (B), Büyük Harf (TT)
Düğme Simgesini Göster: EVET
Özel Dolgu: 10px Üst, 30px Sağ, 10px Alt, 30px Sol
Animasyon Stili: Slayt
Animasyon Yönü: Aşağı
Animasyon Gecikmesi: 100ms
Animasyon Yoğunluğu: %10

Yukarıdaki önceki metnin etkisini dengelemek için, bu animasyon efekti, düğmeyi hafif bir gecikmeyle aşağı kaydırarak ortaya çıkaracaktır.

Şu anda beyaz bir arka plan üzerinde beyaz metin olduğundan, metninizi ve düğmenizi henüz göremezsiniz. Sorun yok. Yakında arka planımızı ekleyeceğiz.

Ardından sağ sütuna bir Bölücü Modül ekleyin.

Ardından Ayarları aşağıdaki gibi güncelleyin:

Tasarım sekmesi altında…

Yükseklik: 260 piksel

Gelişmiş sekmesi altında…

Masaüstünde görünürlüğü devre dışı bırak

Buraya bir ayırıcı eklemek, arka plan görüntüsünün mobil cihazlarda görünür kalmasına yardımcı olur.

Ayarları kaydet

Şimdi her bir sütunumuza arka planlarımızı ekleyelim. Satır Ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik sekmesi altında…

Sütun 1 Arka Plan Degrade Renkleri: #fe8840, rgba(238,78,78,0.9)
Sütun 1 Gradyan Yönü: 135deg
Sütun 2 Arka Plan Resmi: [730×490 resminizi girin]
Sütun 2 Arka Plan Resmi Konumu: Sol Üst
Sütun 2 Arka Plan Resmi Tekrarı: Tekrar Yok

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: 1
Sütun Yüksekliklerini Eşitle: EVET
Özel Dolgu: 0px Üst, 0px Sağ, 0px Alt, 0px Sol
Sütun 1 Özel Dolgu: %5 Üst, %7 Sağ, %5 Alt, %7 Sol
Animasyon Stili: Katlama
Animasyon Yönü: Yukarı
Animasyon Süresi: 800ms

Bu animasyon efekti, tüm satırı görüntüye katlayarak (veya ayakta tutarak) ortaya çıkaracaktır.

Gelişmiş sekmesi altında…

Ana Öğe kutusuna aşağıdaki Özel CSS'yi ekleyin:

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

Ayarları kaydet

Ardından, oluşturmayı yeni bitirdiğiniz satırın altına iki sütunlu (üçte biri üçte iki) bir satır ekleyin.

Sol sütuna bir Bölücü Modül ekleyin ve ayarları aşağıdaki gibi güncelleyin:

Tasarım sekmesi altında…

Yükseklik: 400 piksel

Gelişmiş sekmesi altında…

Masaüstünde görünürlüğü devre dışı bırak

Buraya bir ayırıcı eklemek, arka plan görüntüsünün mobil cihazlarda görünür kalmasına yardımcı olur.

Ayarları kaydet

Zaman kazanmak için devam edin ve sağ tıklayın ve yukarıdaki Satırın sol sütunundaki “Vakit Paradır” metnini içeren metin modülünü kopyalayın. Ardından, aşağıdaki Satırın sağ (üçte iki) sütununa yapıştırın.

Yeni Metin Modülü ayarlarını aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

İçerik kutusundaki h1 başlık metnini “Bir Profesyonel Gibi İşe Gidin” olarak değiştirin.

Tasarım sekmesi altında…

Metin Metin Rengi: #a8a8a8
Başlık Metni Rengi: #414159
Animasyon Stili: Slayt
Animasyon Yönü: Aşağı
Animasyon Yoğunluğu: %10

Bu animasyon efekti, metin bloğunu aşağı kaydırarak görünümü ortaya çıkarır.

Şimdi sağ tıklayın ve yukarıdaki satırın sol sütunundaki düğme modülünü kopyalayın ve düzenlemeyi yeni bitirdiğiniz metin modülünün altına yapıştırın.

Düğme Modülü Ayarlarını aşağıdaki gibi güncelleyin:

Düğme Metin Rengi: #ff4823
Düğme Kenar Rengi: #ff4823
Düğme Vurgulu Metin Rengi: #ff2323

Ayarları kaydet

Son adım için, aşağıdakileri güncelleyerek Satır Ayarlarınızı düzenleyin:

İçerik sekmesi altında…

Arka Plan Rengi: #ffffff
Sütun 1 Arka Plan Resmi: [525×660 resminizi ekleyin]
Sütun 1 Arka Plan Resmi Konumu: Sol Üst
Sütun 1 Arka Plan Resmi Tekrarı: Tekrar Yok
Sütun 2 Arka Plan Degrade Renkleri: rgba(255,255,255,0.91), #ffffff
Sütun 2 Gradyan Yönü: 135deg

Tasarım sekmesi altında…

Özel Genişlik Kullan: EVET
Özel Genişlik: 1040 piksel
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: 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: Katlama
Animasyon Yönü: Aşağı
Animasyon Süresi: 800ms

Bu animasyon efekti, tüm satırı görüntüye katlayarak ortaya çıkaracaktır.

Gelişmiş sekmesi altında…

Ana Öğe kutusunun altına aşağıdaki özel CSS'yi ekleyin:

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

Bu bölüm için bu kadar. Sonuçlarınızı kontrol edin.

Bu bölümün animasyon ve tasarım öğeleri incelikli olduğundan, çoğu sayfada kullanılabilecek tasarım ve animasyon türünün harika bir örneği olduğunu düşünüyorum. Üst ve alt sıralar, arkadan açılan bir kitaba bakar gibi açılır. Metin ve düğmeler, üst satırda hafifçe yukarı ve alt satırda aşağı doğru hareket eder. Harika bir kombinasyon.

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.

İNDİRMEK

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_1.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 1 (bölüm 1).json

Animasyon Efektleri Bölüm 1 (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

Umarım bu iki bölüm, Divi'nin animasyon özelliklerini kullanan gelecekteki yapılar için bir ilham kaynağı olur. Tek başına tasarım konseptleri harika ve düzenler sadece birkaç küçük ince ayar ile herhangi bir web sitesine kolayca uyarlanabilir. Bu seride çok daha fazlasını ele alacağımız için bizi izlemeye devam edin.

geliyor

Bu serinin bir sonraki bölümünde, animasyon demo sayfamızın 3. ve 4. bölümlerini oluşturarak Divi'nin gelişmiş animasyon özelliklerini keşfetmeye devam edeceğim.

İşte inşa etmeyi bekleyeceğiniz şey.

Bölüm 3:

Bölüm 4:

Lütfen aşağıda herhangi bir yorum bırakın.

Şerefe!