İçeriğinizi Görünüme Getirmek 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 5. 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 yazımızda, animasyon demo sayfamızın 6. bölümünü oluşturduk. Ürün indirmelerini parlak renkler, parlayan gölgeler ve hassas animasyon ile görüntülemek için nasıl bir düzen tasarlayacağınızı gösterdim.

Bugün, içeriğinize gerçeğe yakın hareket eklemek için rulo animasyon efektinin nasıl kullanılacağına dair mükemmel bir örnek olan animasyon demo sayfamızın 7. Bölümünü oluşturacağız. Son ürün, siz sayfayı aşağı kaydırırken metin ve cep telefonlarının farklı açılardan kayarak ve dönerek görüntüye geldiği izlenimini verecektir.

Bu benim en sevdiğim animasyonlardan biri. Başlayalım.

İşte Bugünkü Yazımızda İnşa Edeceğimiz Tasarım ve Animasyona Kısa Bir Bakış

Tasarım Öğelerinin Hazırlanması

Bu eğitim için üç resme ihtiyacınız olacak. İlk iki görüntü dikey görüntüler, saat yönünün tersine %10'luk bir açıyla döndürülmüş yaklaşık 580×950 olmalıdır. Yatay görüntü 1250×608 olmalıdır (ayrıca saat yönünün tersine %10 açıyla döndürülür) ve sağlanan sütuna tam olarak sığması için görüntünün sağında yaklaşık 300 piksel ekstra şeffaf arka plan alanı olmalıdır. Telefon görüntülerinin şeffaf bir arka plana sahip png formatında olduğundan emin olun. İşte bugünkü yazı için kullandığım resimler.

Dikey Telefon Resmi #1

Dikey Telefon Resmi #2

Dikey Telefon Resmi #3

İçeriğinizi Görünüme Getirmek için Divi'nin Animasyonlarını Kullanma

Youtube Kanalımıza Abone Olun

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

İ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 (dörtte bir dörtte bir buçuk) 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: %91
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1

Sütun 2 Özel Dolgu: %5 Üst
Sütun 3 Özel Dolgu: %24 Üst

Resim #1 Ekleme

Düzenimizin ilk (en soldaki) sütununa bir Görüntü Modülü ekleyin ve görüntü ayarlarını aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

Resim URL'si: [Resim #1'i yükleyin]

Tasarım sekmesi altında…

Tam Genişliği Zorla: EVET

Animasyon Tarzı: Rulo
Animasyon Yönü: Sağ
Animasyon Yoğunluğu: %16
Animasyon Opaklığı Başlatma: %100

Ayarları kaydet

Bölücü ve Harekete Geçirici Mesaj Modülleriyle Animasyonlu Metin Ekleme

Şimdi, metnin üzerine kısa bir ayırıcı çizgi eklemek için ayırıcı modülün kullanılacağı orta (dörtte bir) sütuna gidin.

Sütuna bir ayırıcı modül ekleyin.

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

İçerik sekmesi altında…

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

Tasarım sekmesi altında…

Renk: #e0c48f
Bölücü Ağırlığı: 3px
Genişlik: 60px (varsayılan yüzde olduğu için bu değeri yazmanız gerekir)
Modül Hizalama: varsayılan (sol)
Özel Dolgu: 80px Üst, 80px Sol

Animasyon Stili: Katlama
Animasyon Yönü: Sağ
Animasyon Süresi: 1200ms
Animasyon Gecikmesi: 50ms
Animasyon Yoğunluğu: %70
Animasyon Opaklığı Başlatma: %0

Ayarları kaydet

Bölücü Modülün altına, aşağıdaki ayarlarla bir Harekete Geçirici Mesaj Modülü ekleyin:

İçerik sekmesi altında…

Başlık: “1000 Kelime”
Düğme Metni: "Daha Fazla Bilgi Edinin"
İçerik: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id.”
Bağlantı: #
Arka Plan Rengini Kullan: HAYIR

Tasarım sekmesi altında…

Metin Rengi: Koyu
Metin Yönü: Sol
Başlık Yazı Tipi: Lato, Kalın (B) Büyük Harf (TT)
Başlık Yazı Tipi Boyutu: 38px
Başlık Metni Rengi: #33454f
Başlık Harf Aralığı: 0.2em
Başlık Çizgisi Yüksekliği: 1.4em

Gövde Yazı Tipi: Lato
Gövde Yazı Tipi Boyutu: 18px
Gövde Metni Rengi: #9b9b9b
Gövde Çizgisi Yüksekliği: 1.8em

Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 15px
Düğme Metin Rengi: #f2733c
Düğme Arka Plan Rengi: rgba(225,225,225,0)
Düğme Kenar Genişliği: 0px
Düğme Harf Aralığı: 2px
Düğme Yazı Tipi: Lato, Kalın (B), Büyük Harf (TT)
Düğme Simgesi: sağ ok
Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR
Düğme Vurgulu Harf Aralığı: 0px

Animasyon Stili: Katlama
Animasyon Yönü: Sağ
Animasyon Süresi: 1200ms
Animasyon Gecikmesi: 50ms
Animasyon Yoğunluğu: %70
Animasyon Opaklığı Başlatma: %0

Ayarları kaydet

Resim #2 Ekleme

Ardından, az önce oluşturduğunuz Harekete Geçirici Mesaj modülünün altına bir Görüntü modülü ekleyin. Görüntü ayarlarını aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

Resim URL'si: [2 numaralı resmi yükle]

Tasarım sekmesi altında…

Tam Genişliği Zorla: EVET

Animasyon Tarzı: Rulo
Animasyon Yönü: Sol
Animasyon Yoğunluğu: %13
Animasyon Opaklığı Başlatma: %100

3. Resim Ekle

İkinci (orta) sütunumuz için bu kadar. Şimdi üçüncü (en sağdaki) sütuna Resim #3'ü ekleyelim. Bunu yapmak için, ikinci sütunun altına yeni eklediğiniz görüntü modülünü çoğaltabilir/kopyalayabilir ve üçüncü sütuna yapıştırabiliriz. Animasyon stilleri aynı olduğundan, yeni resim modülü için güncellemeniz gereken tek şey gerçek resim URL'sidir.

Bölücü ve Harekete Geçirici Mesaj Modülünü Çoğaltın ve Özelleştirin

Yeni görsel URL'sini üçüncü sütundaki çoğaltılmış görsele ekledikten sonra, ikinci sütunun üstünde oluşturduğunuz hem Bölücü Modülü hem de Harekete Geçirici Mesaj Modülünü çoğaltın/kopyalayın ve iki modülü görüntünün altına sürükleyin/yapıştırın Üçüncü sütunda #3.

Bölücü Modül için Tasarım sekmesi altındaki Animasyon Yönü ayarını “Sol” olarak değiştirin.

Yeni Harekete Geçirici Mesaj Modülümüz için devam edin ve aşağıdaki ayarları güncelleyin:

İçerik sekmesi altında…

Başlık: Yeni bir inşa yöntemi

Tasarım sekmesi altında…

Özel Dolgu: 80px Sağ, 80px Alt, 80px Sol

Animasyon Yönü: Sol

Şimdi nihai sonucumuzu kontrol edelim…

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

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

Bu düzeni çıkarmak biraz zor. Ancak, doğru görüntüleri ve doğru aralığı elde ettiğinizde, animasyon tüm düzeni güzel bir şekilde bir araya getirir. Telefon görüntülerinin gerçeğe yakın yuvarlanması, sayfayı aşağı kaydırırken neredeyse birileri beyaz bir masa üzerinde onları görüşümüze kaydırıyor gibi görünüyor. Bu yuvarlanma animasyonu örneği kesinlikle öne çıkan bir örnektir.

geliyor

Bir sonraki gönderide, serimizi bölüm 6 ile sonlandıracağım. Size yemek tarifleri içeren çarpıcı bir düzen oluşturmak için bazı özel resimler ve css ile slayt animasyonunu nasıl kullanacağınızı göstereceğim. Bununla birlikte, aynı düzen ince ayar yapılabilir ve birçok farklı özellikli öğe için kullanılabilir.

Yorumlarda sizden haber bekliyorum.