Kayan Görüntülerle İçeriği Açmak 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 5 bölümlük dizinin 2. 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.

Serimizin 1. bölümünde animasyon demo sayfasının ilk iki bölümünü oluşturduk. İlk bölümdeki başlığın tasarımı ve animasyonu, bir tam ekran standart bölümün içindeki bir metin modülünün öğelerini canlandırmanın benzersiz bir yolunu sergiledi. İkinci bölümü oluştururken, içeriği bir açılış sayfasında ilgi çekici bir şekilde öne çıkarmak için kolayca kullanılabilecek, incelikli ve uyumlu animasyonları içerik satırlarına dahil etmenin bir yolunu keşfettik.

Bugün, sayfada gezinirken animasyonu etkin (ve yaratıcı bir şekilde) kullanan bölüm düzenleri tasarlama yolculuğumuza devam ediyoruz. Divi'nin animasyon özelliklerinin gücünü gösteren canlı demo sayfamızın üçüncü ve dördüncü bölümlerini oluşturacağız. Bu bölümlerin her ikisi de, ürünleri veya hizmetleri sergilemek için kendi projeleriniz için kolayca uyarlanabilecek düzenlere sahiptir.

Başlayalım.

Bugünün Yazısında Ne İnşa Edeceğimize Kısa Bir Bakış

3. Bölüm

Bölüm 4

Tasarım Öğelerinin Hazırlanması

Resimlerinizi Hazırlayın

Üçüncü bölüm için iki resme ihtiyacınız olacak. İlki 880×600 civarında, ikincisi ise 790×880 civarında olmalı. Bu görüntü boyutlarının kesin olması gerekmez. Size fikir vermesi açısından bu boyutları ekliyorum.

Dördüncü bölümü oluştururken ayrıca 600×400 civarında iki görüntü elde edeceksiniz.

Görsel Oluşturucu'yu kullanın

Burada gelişmiş koda gerek yok. Bu serinin 1. bölümünde oluşturduğumuz sayfamızın sonraki iki bölümünü tasarlamak için yalnızca Görsel Oluşturucuyu kullanacağız. Sayfanız zaten kurulu olduğundan, gitmeye hazırsınız.

Kayan Görüntülerle İçeriği Açmak için Divi'nin Animasyonlarını Kullanma

Youtube Kanalımıza Abone Olun

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

Bölüm 3, beraberindeki bir resimle birlikte Harekete Geçirme Çağrısı Modülünün nasıl tasarlanıp canlandırılacağına dair harika bir örnektir.

Hadi dalalım.

Visual Builder'ı kullanarak iki sütunlu bir satır içeren normal bir bölüm ekleyin. Sol sütuna 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: [880×600 resminizi ekleyin]

Tasarım sekmesi altında…
Tam Genişliği Zorla: EVET
Animasyon Stili: Slayt
Animasyon Yönü: Sol
Animasyon Yoğunluğu: 20%
Animasyon Opaklığı Başlatma: %100

Ayarları kaydet

Bölücü Modülü Ekle

Sağ sütunda, ayırıcı modülü ve Harekete Geçirici Mesaj Modülünü kullanarak içeriğimizi sergileyeceğiz. Ayırıcı modül, metnin üzerine kısa bir ayırıcı çizgi eklemek için kullanılacaktır.

Sağ 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: #e4ca77
Bölücü Ağırlığı: 4px
Genişlik: 80px (varsayılan yüzde olduğu için bu değeri yazmanız gerekir)
Modül Hizalama: varsayılan (sol)
Özel Kenar Boşluğu: 60px Üst, 0px Alt

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

Harekete Geçirici Mesaj Modülü ekleyin

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: “Mükemmel Görünüm”
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, efficitur nisl. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisi.”
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, Büyük Harf (TT)
Başlık Yazı Tipi Boyutu: 38px
Başlık Metni Rengi: #0c0c0c
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: #9e9e9e
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: #000000
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

Şimdi Satır Ayarlarını düzenlemek ve aşağıdakileri güncellemek için tıklayın:

Tasarım sekmesi altında…

Özel Genişlik Kullan: EVET
Özel Genişlik: 1366 piksel

Gelişmiş sekmesi altında…

Sütun 1 Ana Öğe kutusuna aşağıdaki özel CSS'yi ekleyin:

z-index: 999;

Ayarları kaydet

Satırınızı Çoğalt ve Güncelle

İlk sıra için bu kadar. İkinci satırı oluştururken zaman kazanmak için az önce oluşturduğunuz satırı çoğaltın.

Yinelenen satır ayarlarını aşağıdaki gibi düzenleyin:

Gelişmiş sekmesi altında…

Sütun 1 Ana Öğesindeki Özel CSS'yi çıkarın ve Sütun 2 Ana Öğe kutusuna ekleyin:

z-index: 999;

Resmimiz sağ sütunda olacağından, soldaki animasyonlu metnin üstünde kalması için o sütuna ihtiyacımız var.

Ayarları kaydet

İkinci Sıradaki Görüntü Modülünü ve Harekete Geçirici Mesaj Modülünü Güncelleyin

Ardından görüntü modülünü sağ sütuna sürükleyin ve bölücü modülü ve eylem çağrısı modülünü sol sütuna sürükleyin.

Bu bölüm biraz farklı bir sütun yapısına sahip olacak. Sütun Yapısını Değiştir Satır Simgesini (yinelenen satır simgesinin yanında) tıklayın ve üçte iki üçte bir sütun düzeni seçin.

Şimdi tek yapmamız gereken sıranın içindeki modüllerin her birini tekrar ziyaret etmek ve birkaç değişiklik yapmak.

İlk olarak, Bölücü Modül ayarlarını aşağıdaki gibi güncelleyin:

Tasarım sekmesi altında…

Modül Hizalaması: Sağ
Animasyon Yönü: Sol

Ayarları kaydet

Ardından Harekete Geçirici Mesaj Modülü Ayarlarını aşağıdaki gibi güncelleyin:

Başlık: “Kendi Adına Konuşuyor”
Metin Yönü: Sağ
Başlık Metni Hizalama: Sağ
Genişlik: 700 piksel (bunu yazın)
Animasyon Yönü: Sol

Ayarları kaydet

Ardından sağ sütundaki Görüntü Modülünü yeni 790×880 görüntünüzle güncelleyin.

3. bölüm için bu kadar!

Sonucunuzu kontrol edin.

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

Bölüm 4, birkaç gelişmiş CSS hilesiyle Görüntü Modülünün tasarımını başka bir düzeye taşıyor. Ve bir menteşe üzerinde katlamak için metin modüllerini istiflemek, teslimatla iyi bir şekilde birleşir. Hadi dalalım.

Visual Builder'ı kullanarak, iki sütunlu (bir buçuk) satır içeren normal bir bölüm ekleyin. İlk modülümüzü eklemeden önce bölümümüze bir arka plan rengi ekleyelim. Bölüm ayarlarını düzenlemek için tıklayın.

İçerik sekmesi altında, arka plan rengi sekmesini seçin ve #262938 rengini girin.

Ayarları kaydet

İlk Metin Modülünü Ekleyin

Sol sütuna bir Metin Modülü ekleyin ve Metin Ayarlarını aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

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

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>

Tasarım sekmesi altında…

Metin Rengi: Açık
Başlık Yazı Tipi: Playfair Ekranı, Kalın (B)
Başlık Yazı Tipi Boyutu: 38px
Başlık Çizgisi Yüksekliği: 1.3em
Özel Kenar Boşluğu: 20 piksel Alt
Animasyon: Katlama
Animasyon Yönü: Yukarı

İ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…

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

Tasarım sekmesi altında…

Metin Rengi: Açık
Metin Yazı Tipi Boyutu: 18px
Metin Metin Rengi: rgba(255,255,255,0.66)
Metin Satır Yüksekliği: 1.9em
Özel Kenar Boşluğu: 40 piksel Alt
Animasyon Stili: Katlama
Animasyon Yönü: Aşağı
Animasyon Gecikmesi: 150ms

Ayarları kaydet

Düğme Modülünü Ekleyin

Son metin modülünün altına bir düğme modülü ekleyin ve ayarları aşağıdaki gibi güncelleyin:

Düğme Metni: Daha Fazla Bilgi Edinin
Düğme URL'si: #

Düğme için Özel Stilleri Kullan: EVET

Düğme Metin Boyutu: 15px
Düğme Metin rengi: #01254c
Düğme Arka Plan Rengi: #ffffff
Düğme Sınır Yarıçapı: 0px
Düğme Yazı Tipi: Kalın (B), Büyük Harf (TT)

Özel Dolgu: 10px Üst, 30px Sağ, 10px Alt, 30px Sol

Animasyon Stili: Slayt
Animasyon Yönü: Aşağı
Animasyon Süresi: 1600ms
Animasyon Gecikmesi: 150ms
Animasyon Yoğunluğu: 20%

Ayarları kaydet

Sağ Sütuna Resim Modülü Ekle

Bu sütun için bu kadar. Ş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…

Resim URL'si: [600×400 resminizi ekleyin]

Tasarım sekmesi altında…

Tam Genişliği Zorla: EVET

Animasyon Stili: Slayt
Animasyon Yönü: Sağ
Animasyon Gecikmesi: 800ms
Animasyon Yoğunluğu: 20%

Ayarları kaydet

Satır Ayarlarını Güncelle

Şimdi Satır Ayarlarını düzenlemek ve aşağıdakileri güncellemek için tıklayın:

Tasarım sekmesi altında…

Özel Genişlik Kullan: EVET
Özel Genişlik: 1366 piksel

Özel Dolgu: 27px Üst, 0px Sağ, 170px Alt, 0px Sol
Sütun 1 Özel Dolgu: %6 Üst

Gelişmiş sekmesi altında…

Sütun 1 Ana Öğe kutusuna aşağıdaki özel CSS'yi ekleyin:

z-index: 999;

Bu css ekler, animasyon sırasında metnin görüntünün üstünde kalmasını sağlar.

Ardından, Sütun 2 Ana Öğe kutusuna aşağıdaki özel CSS'yi ekleyin:

transform: scale(1.3);
transform-origin: top right;

Bu css, 2. sütundaki (resim) her şeyin boyutunu büyütmek (artırmak) için akıllı bir tasarım ekler. transform Origin özelliği, sütuna satırın sağ üst köşesinden ölçeklenmesini söyler. Bu, soldaki metinle resim arasında hafif bir örtüşme yaratır.

Ayarları kaydet

Satırınızı Çoğalt ve Güncelle

Şimdi 3. bölümde yaptığımız gibi, satırı çoğaltacağız. Satırı çoğalttıktan sonra, 2 metin modülünü ve düğme modülünü sol sütundan sağa doğru sürükleyin. Ve görüntü modülünü sağ sütundan sola sürükleyin. Şimdi tek yapmamız gereken, yinelenen satırımızda ve içeriğinde bazı küçük güncellemeler yapmak.

İlk olarak, satır ayarlarını aşağıdakilerle güncelleyelim:

Tasarım sekmesi altında…

Özel Dolgu: 40px Üst, 0px Sağ, 40px Alt, 0px Sol
Sütun 1 Özel Dolgu: [varsayılana geri yükle; %6 Sil Üst]
Sütun 2 Özel Dolgu: %6 Üst

Gelişmiş sekmesi altında…

Sütun 1 Ana Öğe Kutusundan ve Sütun 2 Ana Öğe Kutusundan özel CSS'yi silin. Bu kopyadan aktarıldı ve artık buna ihtiyacımız yok.

Görüntü Modülünü Güncelle

Ardından, Görüntü Modülünü (şimdi sol sütunda) aşağıdakilerle güncelleyin:

İçerik sekmesi altında…

Resim URL'si: [yeni 600×400 resminizi ekleyin]

Tasarım sekmesi altında…

Animasyon Yönü: Sol

Gelişmiş sekmesi altında…

Bu görüntünün zaten bulanık olduğunu düşünüyorsanız. tekrar düşün! Bu bulanıklaştırma efektini eklemek için tek yapmanız gereken, Ana Öğe kutusuna aşağıdaki özel CSS satırını eklemektir:

filter: blur(5px) opacity(.6);

Bulanıklaştırma efektine ek olarak, bu css ayrıca görüntüyü %60 opaklıkla yarı saydam yapar.

Ayarları kaydet

Sağ Sütundaki Metin Modülünü Güncelle

Sağ sütuna geçerek, en üstteki Metin Modülü içeriğini daha kısa bir h1 başlığıyla güncelleyin:

<h1>Consectetur adipiscing elit</h1>

Ayarları kaydet

Ve işte! Bölüm 4 ile işimiz bitti. Son 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_2.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 2 (bölüm 1).json

Animasyon Efektleri Bölüm 2 (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 bölüm beni karbonhidratlara acıktırmanın yanı sıra, görüntüleri görüntülemenin ve canlandırmanın yaratıcı yollarını gösteriyor. Ayrıca, gecikmeli düğme kaydırmalı bir menteşe üzerinde katlanan metin modülleri, kullanıcıyı CTA'ya tıklamaya daha fazla ikna eder.

geliyor

Bu serinin 3. bölümünde size tanıtım yazısı modülleri tasarlamanın ve canlandırmanın güzel bir yolunu göstereceğim. Bu bölüm düzeni çeşitli amaçlar için kullanılabilir. Bunun, hizmetinizin sürecini veya hizmet veya ürünlerinizin bir listesini sergilemenin bir yolu olduğunu görebiliyorum.

sabırsızlıkla bekliyorum.

Aşağıdaki yorumlarda ulaşmayı unutmayın!