Görüntüyü Kaydırmak ve Sıçramak için Divi'nin Animasyonlarını Kullanma

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 6. 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önderide, içeriğinize gerçekçi hareket eklemek için rulo animasyon stilini kullanarak görüntüleri nasıl canlandıracağınızı gösterdiğim animasyon demo sayfamızın 7. bölümünü oluşturduk.

Bugün, animasyon demo sayfamızın 8. ve 9. Bölümlerini ele alacağız. Bölüm 8, slayt animasyonu ve bulanıklık efektlerinin bir kombinasyonunu kullanarak öne çıkan bir öğenin nasıl öne çıkarılacağının harika bir örneğidir. Bölüm 9, ekibinizin fotoğraflarını sergileyen bir ekip bölümüne animasyon eklemenin basit ve zarif bir yoludur.

Başlayalı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 dört resme ihtiyacınız olacak. Özel bir arka plan resmine ve üç tarif kartı resmine ihtiyacınız olacak. Arka plan görüntüsü 1280×936'dır ve derinlik için gölgeleme eklenmiş 6 yarı saydam beyaz dikdörtgene sahip sarı bir arka plana sahiptir. Paralakslı bölümde arka plan kullanıldığında, arka planda yüzen tarif kartları izlenimi verecektir. Tarif kartı resimlerinin her biri 375×667'dir. İşte bu eğitimde kullanılan resimler.

Arka plan görüntüsü

Tarif Kartı Görseli #1

Tarif Kartı Resmi #2

Tarif Kartı Görseli #3

Görüntüyü Kaydırmak ve Sıçramak için Divi'nin Animasyonlarını Kullanma

Youtube Kanalımıza Abone Olun

Bina Bölüm 8

İnşa sürecine başlamadan önce, görsel oluşturucuyu kullanarak oluşturacağımız kesit düzeninin tel kafes görünümüne bir göz atalım.

Visual Builder'ı kullanarak, düzenimize başka bir normal bölüm ekleyerek başlayalım. Ardından, bölümünüze üç sütun (üçte bir üçte bir) satır ekleyin.

Satır Ayarlarını Güncelle

İlk modülümüzü eklemeden önce satır ayarlarına gidin ve aşağıdakileri güncelleyin:

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 1 Özel Dolgu: %6 Sağ
Sütun 3 Özel Dolgu: %8 Sol

Bölümünüze Arka Plan Ekleyin

Ardından ana arka plan resmini bölümümüze koyalım. Bölüm ayarlarına gidin ve aşağıdakileri güncelleyin:

İçerik sekmesi altında…

Arka Plan Resmi: [1280×936 resim ekleyin]
Paralaks Yöntemini Kullan: EVET
Paralaks Yöntemi: Gerçek Paralaks

1. Resim Ekle

Artık modüllerimizi satırımıza eklemek için okuyoruz. İlk (sol) sütuna bir görüntü modülü ekleyin.

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

İçerik sekmesi altında…

Resim URL'si: [tarif kartındaki resim #1'i girin]

Tasarım sekmesi altında…

Tam Genişliği Zorla: EVET

Animasyon Stili: Slayt
Animasyon Yönü: Yukarı
Animasyon Yoğunluğu: 20%

Gelişmiş sekmesi altında…

Burada kart görüntüsüne yuvarlak bir kenar, kutu gölgesi ve bulanıklık filtresi vermek için bazı özel CSS ekleyeceğiz. Ana Öğeler kutusuna aşağıdaki CSS'yi girin:

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
filter: blur(2px) opacity(.75);

Ayarları kaydet

Orta Sütuna iki Metin Modülü ekleyin

Ardından, ikinci (veya orta) sütuna bir metin modülü ekleyin ve ayarları aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

İçerik kutusunun metin sekmesine aşağıdaki h1 başlığını girin:

<h1>The Best Recipes for Success</h1>

Tasarım sekmesi altında…

Başlık Yazı Tipi: Playfair Ekranı, Kalın (B)
Başlık Yazı Tipi Boyutu: 60px
Başlık Çizgisi Yüksekliği: 1.3em

Özel Kenar Boşluğu: 20 piksel Alt

Animasyon Stili: Katlama
Animasyon Yönü: Yukarı

Ayarları kaydet

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

İçerik sekmesi altında…

İçerik: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur.

Tasarım sekmesi altında…

Metin Yazı Tipi Boyutu: 18px
Metin Metin Rengi: rgba(0,0,0,0.56)
Metin Satır Yüksekliği: 1.9em
Özel Kenar Boşluğu: 40 piksel

Animasyon Stili: Katlama
Animasyon Yönü: Aşağı
Animasyon Gecikmesi: 150ms

Ayarları kaydet

2. Resim Ekle

Yeni oluşturduğunuz iki metin modülünün altına bir görüntü modülü ekleyin.

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

İçerik sekmesi altında…

Resim URL'si: [kart resmi #2] girin

Tasarım sekmesi altında…

Tam Genişliği Zorla: EVET

Animasyon Stili: Slayt
Animasyon Yönü: Yukarı
Animasyon Yoğunluğu: %10

Gelişmiş sekmesi altında…

Burada, kart görüntüsüne yuvarlak bir kenar ve bir kutu gölgesi vermek için özel CSS (bulanıklaştırma efekti olmadan ilk kart görüntüsüne benzer) ekleyeceğiz. Ana Öğeler kutusuna aşağıdaki CSS'yi girin:

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);

Ayarları kaydet

3. Resim Ekle

Bir resim modülü ekleyerek üçüncü (veya sağ) sütuna üçüncü ve son kart resmimizi ekleyelim:

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

İçerik sekmesi altında…

Resim URL'si: [kart resmi #3'ü girin]

Tasarım sekmesi altında…

Tam Genişliği Zorla: EVET

Özel Marj: %20 Üst

Animasyon Stili: Slayt
Animasyon Yönü: Yukarı
Animasyon Yoğunluğu: %30

Ayarları kaydet

Gelişmiş sekmesi altında…

Bu özel CSS'yi Ana Öğe kutusuna ekleyin:

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
filter: blur(8px) opacity(.4);

Ayarları kaydet

Harika! Bu, demo sayfamızın 8. bölümünü tamamlıyor. Nihai sonucu kontrol edin.

Animasyon şaşırtıcı bir şekilde gerçeğe benziyor ve kaydırma sırasında üstte oturan modüllerden farklı bir hızda arka planı aşağı doğru hareket ettiren paralaks özelliğinden harika bir şekilde yararlanıyor. Arka plan aşağı inerken kartların yukarı doğru hareket ettirilmesi, kartların havada uçuştuğu izlenimini veriyor. Söylemeliyim ki, içerik gerçekten bu bölümde ortaya çıkıyor.

Demonun 9. Bölümünü Oluşturma

Son bölümümüzde, kelimenin tam anlamıyla "açılan" küçük bir animasyonla basit bir "Ekibimiz" bölümü oluşturacağız. İşte inşa edeceğimiz şey:

İşte tel kafes görünümünden yerleşime bir bakış.

Bölüm Başlığı Ekle

İlk olarak, tek sütunlu bir satıra sahip normal bir bölüm ekleyin. ardından sütuna bir metin modülü ekleyin.

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

İçerik sekmesi altında…

İçerik: Ekibimiz

Tasarım sekmesi altında…

Metin Yazı Tipi: Raleway, Kalın (B), Büyük Harf (TT)
Metin Yazı Tipi Boyutu: 15px
Metin Metin Rengi: rgba(0,0,0,0.32)
Metin Harf Aralığı: 5px
Metin Satır Yüksekliği: 1.9em

Özel Kenar Boşluğu: 20 piksel

Animasyon Stili: Slayt
Animasyon Yönü: Yukarı
Animasyon Süresi: 500ms
Animasyon Gecikmesi: 1000ms

Gelişmiş sekmesi altında…

Ayarları kaydet

Yeni oluşturduğunuz modülün 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 h1 etiketini girin:

<h1>Highly Skilled Ninjas</h1>

Tasarım sekmesi altında…

Başlık Yazı Tipi: Raleway Light
Başlık Metni Hizalama: Merkez
Başlık Yazı Tipi Boyutu: 48px
Başlık Metni Rengi: #3a3830
Başlık Çizgisi Yüksekliği: 1.3em

Özel Kenar Boşluğu: 20 piksel Alt

Animasyon Stili: Slayt
Animasyon Yönü: Sağ
Animasyon Yoğunluğu: %12

Ayarları kaydet

Şimdi küçük yeşil ayırıcı çizgiyi eklemek için metin modülünün altına bir Bölücü Modül ekleyin.

Ardından, ayırıcı ayarlarını aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

Bölücüyü Göster: EVET

Tasarım sekmesi altında…

Renk: #7cda24

Bölücü Ağırlığı: 3px
Yükseklik: 3 piksel
Genişlik: 60 piksel (bunu yazın)
Modül Hizalaması: Merkez

Animasyon Stili: Slayt
Animasyon Yönü: Aşağı
Animasyon Süresi: 500ms
Animasyon Gecikmesi: 1000ms
Animasyon Yoğunluğu: %200

Ayarları kaydet

Dört takım görüntüsünü ekleme

Ekip üyesi resimlerimizi eklemek için, az önce oluşturduğumuz başlığı içeren satırın altına dört sütunlu bir satır ekleyin.

İlk sütuna bir Kişi Modülü ekleyin ve ayarları aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

İsim: Nick
Resim URL'si: [150×150 fotoğrafınızı girin]

Tasarım sekmesi altında…

Başlık Yazı Tipi: Raleway Light, Kalın (B), Büyük Harf (TT)
Başlık Yazı Tipi Boyutu: 13px
Başlık Metni Rengi: rgba(0,0,0,0.71)
Başlık Harf Aralığı: 3px

Gelişmiş sekmesi altında…

Üye Resmi kutusuna aşağıdaki CSS'yi ekleyin:

border-radius: 100%;
overflow: hidden;
width: 180px;
margin: auto auto 20px auto;

Bu, görüntümüze güzel bir daire sınırı verecektir.

Üye Açıklamasına aşağıdaki özel CSS'yi ekleyin:

text-align: center;
display: block;

Bu, Adı merkezler.

Ayarları kaydet

Şimdi, sonraki üç sütunu doldurmak için sonraki üçünü eklemek için az önce oluşturduğunuz Kişi Modülünü çoğaltabilirsiniz. Tek yapmanız gereken görüntüyü ve çoğalttığınız modüllerin her birinin adını güncellemek.

Kişi modüllerinizin dördünü de ekledikten sonra, bu bölümdeki son adım olan satırın stilini ve animasyonunu yapmaya hazırsınız. Bunu yapmak için satır ayarlarını aşağıdaki gibi güncelleyin:

Tasarım sekmesi altında…

Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 2

Özel Dolgu: 60px Üst

Animasyon Stili: Sıçrama
Animasyon Süresi: 700ms
Animasyon Gecikmesi: 1000ms

Bu, animasyon demo sayfamızın 9. bölümünü tamamlıyor. Ayrıca Divi ile animasyon kullanma konusundaki 6 bölümlük seriyi de tamamlıyor.

Seriyi Kapatmak

Umarım Animasyon Demo sayfamızı oluşturmaktan keyif almışsınızdır. Tek başına tasarım harika bir ilham kaynağı. Ve baştan sona animasyon kullanımı, şüphesiz gelecekteki sayfa derlemeleri için bir referans kılavuzu görevi görecektir. Bu düzeni oluşturduğu için Direktörümüz Kenny Sing'e özel teşekkürler. Bununla gurur duyuyoruz, bir sonraki projenize hızlı bir şekilde başlamanıza yardımcı olmak için bu düzeni size ücretsiz olarak sunmak istiyoruz.

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 All_Animation_Effects_1.zip adlı sıkıştırılmış dosyayı bularak başlayın. Bu gönderi için son ikisi de dahil olmak üzere, bu dizideki tüm içe aktarmaları ortaya çıkarmak için sıkıştırmasını açın.

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.

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!