Divi'nin Kaydırma Efektleriyle Ayrılabilir Görüntü Geçişi Nasıl Oluşturulur

Divi'nin Kaydırma Efektleri, ziyaretçileri göz alıcı bir tasarımla büyüleyebilecek olağanüstü geçiş animasyonları oluşturmamıza olanak tanır. Özellikle resimler, bu kaydırma efektlerinin gücünü şaşırtıcı şekillerde sergileyebilir. Bu derste, Divi'nin kaydırma efektleriyle nasıl ayrılıkçı bir görüntü geçişi oluşturulacağını adım adım açıklayacağız. Bu efekt ilk olarak demo sayfasında yer aldı. Efekt, Photoshop gibi bir fotoğraf düzenleyici kullanarak görüntüleri önceden dilimlemeyi içerir (yapması oldukça kolaydır). Görüntüler dilimlendikten sonra tek yapmamız gereken onları Divi'ye eklemek ve sihrin gerçekleşmesi için yerleşik kaydırma efektlerini kullanmak.

Başlayalım.

Gizlice Bakış

İşte bugünün tasarımına bir göz atın.

Ayrıca tasarımın orijinal canlı demosunu demo sayfasında “Egzersiz Sıkıcı Olması Gerekmez” başlığı altında görebilirsiniz.

Breakaway Image Transition Divi Layout'u ÜCRETSİZ olarak indirin

Ellerinizi bu eğitimdeki düzene koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İ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!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Yukarıdaki Divi kurulumunun yanı sıra ihtiyacınız olacak:

• İki resim (en az 1080 piksele 540 piksel)
• Görüntüleri Divi'ye eklemeden önce dilimlemek için Photoshop gibi bir fotoğraf düzenleme yazılımı.

Bölüm 1: Photoshop'ta Görüntüleri Dilimleme

Divi'de tasarımımızı oluşturmaya başlamadan önce, ayrılık geçişi kaydırma efekti için kullanılacak iki resmimizi dilimlememiz gerekiyor. Her iki görüntünün de tam olarak 1080 piksele 540 piksel olacak şekilde kırpılması gerekir. Bundan sonra, 8 eşit parçaya (4 çapraz, 2 aşağı) dilimlenmeleri gerekir. Hazır olduğunda bunları bilgisayarımıza kaydedebilir ve görüntü dilimlerini sitemize yükleyebiliriz. İlk görselle başlayalım.

Resim #1

Resmi Kırpma

Yapmamız gereken ilk şey, resmi tam olarak 1080 piksele 540 piksel boyutlarında olacak şekilde kırpmaktır. Bunu yapmak için herhangi bir resim düzenleme yazılımını kullanabilirsiniz. Photoshop'ta kırpma aracını kullanabilirsiniz.

Resmi Dilimleme

Ardından, dilim aracını kullanmak için tıklayın ve görüntünün tamamını seçin. Dilime/resme sağ tıklayın ve Dilimi Böl seçeneğini seçin.

Dilimi Böl seçenek kutusunda aşağıdakileri güncelleyin:

Yatay olarak bölün:

• 2 dilim aşağı, eşit aralıklı
• dilim başına 270 piksel

Dikey Olarak Böl:

• 4 dilim boyunca, eşit aralıklı
• dilim başına 270 piksel

Ardından Tamam'ı tıklayın.

Görüntü Dilimlerini Kaydetme

Şimdi, her biri 270 piksele 270 piksel olan 8 eşit bloğa dilimlenmiş bir görüntümüz var.

Görüntü dilimlerini kaydetmek için Dosya > Dışa Aktar > Web için Kaydet'e gidin.

Ardından dosya biçimini seçin ve Kaydet'e tıklayın.

Açılır kutuda aşağıdakileri güncellediğinizden emin olun:

• Farklı Kaydet: [resim(ler) için isim girin]
• Biçim: Yalnızca Görüntüler
• Ayarlar: Varsayılan Ayarlar
• Dilimler: Tüm Dilimler

Ardından Kaydet'i tıklayın.

Artık tüm görüntü dilimleriniz bilgisayara kaydedilecek ve Divi'ye yüklenmeye hazır olacak.

Resim #2

Bu ayrılıkçı görüntü geçişi kaydırma efekti için gereken ikinci görüntüyü oluşturmak için, ilk görüntüyü oluşturmak için kullandığımız aynı işlemi (kırpma, dilimleme ve kaydetme) izlemeliyiz.

Görüntü Dilimlerini Döndür

Ancak, dönen kaydırma efektinin çalışma şekli nedeniyle, ikinci görüntüyü oluşturan görüntü dilimlerinin her birinin, sola veya sağa 90 derece döndürülmesi gerekecektir.

Bir görüntüyü döndürmek için Photoshop'u veya işletim sisteminizdeki yerleşik görüntü düzenleme yazılımını kullanabilirsiniz (görüntüleri sitenize yükledikten sonra düzenlemek ve döndürmek için WordPress medya galerisini bile kullanabilirsiniz).

Burada, görüntüyü dilimlerken görüntülerin orijinal konumlarında nasıl döndürülmesi gerektiğine ilişkin bir kılavuz bulunmaktadır.

İşte orijinal görüntü.

Resim dilimlerinin sitenize yüklenmeden önce nasıl döndürülmesi gerektiği aşağıda açıklanmıştır.

Bu, sonunda aşağıdaki kaydırma efektini elde edebilmemiz için gereklidir.

Artık her iki görüntü de kırpıldığına, dilimlendiğine, kaydedildiğine ve döndürüldüğüne göre, bunları Divi sitenize eklemeye hazırsınız. Toplam 16 resminiz olmalıdır (birinci resimden 8 adet ve 2. resimden 8 adet).

Bölüm 2: Divi'de Breakaway Image Transition Scroll Efekti Oluşturma

Görüntü dilimleri hazır olduğunda Divi'deki tasarım sürecine başlayabiliriz. İşte nasıl yapılacağı.

1. Satır Ekle

Başlamak için dört sütunlu bir satır oluşturun.

Satır Ayarları

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Maksimum Genişlik: 1080 piksel (masaüstü), 540 piksel (tablet ve telefon)
• Dolgu: 0 piksel üst, 0 piksel alt
• Yatay Taşma: görünür
• Dikey Taşma: görünür

Bölüm Dolgusunu Güncelle

İkinci sıramızı kesinlikle birinci sıranın üstüne yerleştireceğimiz için, ikinci sıranın konumunu bozmaması için bölümün üst (ve alt) dolgusunu çıkarmamız gerekiyor. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Dolgu: 0 piksel üst, 0 piksel sol

Görüntüleri Ekleme

İlk satırda, ilk görüntüyü oluşturan 8 görüntünün/dilimlerin her birini ekleyeceğiz. Resimler, sütunlar içinde tam olarak photoshop'ta nasıl dilimlendiklerine göre (4 çapraz ve 2 aşağı) yerleştirilmelidir.

Burada bir sayı ile etiketlenmiş her görüntünün bir örneği verilmiştir. Tüm resimler satıra eklendikten sonra bu şekilde görünmelidir.

Resim #1

İlk görüntü modülünü sütun 1'e ekleyin.

Ardından ilk görüntü dilimini modüle yükleyin.

Kaydırma Efektleri

Gelişmiş sekmesi altında, görüntüye aşağıdaki kaydırma efektlerini ekleyin.

• Soldurmayı ve Yavaşlamayı Etkinleştir: EVET
• Opaklığı Başlatma: %100 (%20 görünüm alanında)
• Orta Opaklık: %100 (%20 görünüm alanında)
• Bitiş Opaklığı: %0 (%50 görünüm alanında)

Ölçek sekmesine tıklayın ve aşağıdakileri güncelleyin:

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
• Başlangıç ​​Ölçeği: %100 (%20 görünüm alanında)
• Orta Ölçek: %70 (%32 - %48 görünüm alanında)
• Bitiş Ölçeği: %100 (%60 görünüm alanında)

Döndür sekmesini tıklayın ve aşağıdakileri güncelleyin:

• Döndürmeyi Etkinleştir: EVET
• Döndürmeyi Başlatma: 0 derece (%0 görünüm alanında)
• Orta Dönüş: 0 derece (%20 görünüm alanında)
• Bitiş Dönüşü: -90 derece (%60 görünüm alanında)

Sayfayı aşağı kaydırırken kaydırma efekti şöyle görünecektir.

Resim #2

2. görseli oluşturmak için 1. görseli çoğaltın ve kopyayı 2. sütuna yerleştirin.

Yinelenen görüntü modülünü görüntü #2 ile güncelleyin.

Kaydırma Efektini Güncelle

Resim 1'den aktarılan aynı kaydırma efektlerinin çoğunu tutacağız. Değiştirmemiz gereken tek şey rotasyon. Gelişmiş sekmesine gidin ve bitiş dönüşünü ters yönde dönmesi için 90 derece (-90 derece yerine) olarak değiştirin.

• Bitiş Dönüşü: 90 derece

Resim #3

3 numaralı görüntüyü oluşturmak için 1 numaralı görüntüyü kopyalayıp sütun 3'e yapıştırın ve ardından görüntüyü 3 numaralı görüntüyle değiştirin.

Resim #4

4 numaralı görüntüyü oluşturmak için 2 numaralı görüntüyü kopyalayıp 4 numaralı sütuna yapıştırın ve görüntüyü 4 numaralı görüntüye güncelleyin.

Resim #5

5 numaralı görüntüyü oluşturmak için, 1 numaralı görüntüyü çoğaltın, böylece kopya doğrudan sütun 1'in altında olur.

Resmi #5 numaralı resme güncelleyin. Ardından, Yavaşlatma ve Yavaşlama kaydırma efektini aşağıdaki gibi güncelleyin:

• Opaklığı Başlatma: %100 (%0 görünüm alanında)
• Orta Opaklık: %100 (%0 görünüm alanında)
• Bitiş Opaklığı: %0 (%40 görünüm alanında)

Ardından, Ölçekleme Yukarı ve Aşağı kaydırma efektini aşağıdaki gibi güncelleyin:

• Başlangıç ​​Ölçeği: %100 (%0 görünüm alanında)
• Orta Ölçek: %70 (%12 – %28 görünüm alanında)
• Bitiş Ölçeği: %100 (%40 görünüm alanında)

Son olarak, Dönen kaydırma efektini aşağıdaki gibi güncelleyin:

• Döndürmeyi Başlatma: 0 derece (%0 görünüm alanında)
• Orta Dönüş: 0 derece (%0 görünüm alanında)
• Döndürmeyi Bitirme: 90 derece (%40 görünüm alanında)

Resim #6

6. görseli oluşturmak için 5. görseli çoğaltın ve 2. sütuna taşıyın (2. görselin altında).

Görüntü modülünü görüntü #5 ile güncelleyin. Ardından, döner kaydırma efektini aşağıdaki gibi ters yöne (-90 derece) ayarlayın:

• Biten Rotasyon: -90 derece

Resim #7

7 numaralı görüntüyü oluşturmak için 5 numaralı görüntüyü çoğaltın ve sütun 3'teki 3 numaralı görüntünün altına taşıyın. Ardından yinelenen görüntü modülünü 7 numaralı görüntüyle güncelleyin.

Resim #8

8 numaralı görüntüyü oluşturmak için 6 numaralı görüntüyü çoğaltın ve 4 numaralı sütunda 4 numaralı görüntünün altına taşıyın. Ardından yinelenen görüntü modülünü 8 numaralı görüntüyle güncelleyin.

Şimdi tüm görüntü dilimleri, ayrılık kaydırma efektiyle 1. satıra eklendi.

Sonuç şu ana kadar böyle görünüyor.

2. Satır Ekle

İkinci sıradaki resimlerin tasarımı fazla zaman almayacak. Tek yapmamız gereken 1. satırı çoğaltmak, tüm görüntüleri doğru olanlarla güncellemek ve sonra ona mutlak bir konum vermek.

Devam edin ve 1. satırı çoğaltın.

2. Sıra Görüntülerini Güncelle

2. resim için oluşturduğumuz döndürülmüş resimleri hatırlayın. Şimdi tek yapmamız gereken, her birini 2. satırdaki doğru görüntü modülü konumuna yüklemek.

Görüntü Kaydırma Efektlerini Güncelle

Yeni döndürülmüş görüntüler yerleştirildikten sonra, 2. Satırdaki tüm görüntülerden Fading In ve Out kaydırma efektini çıkarmamız gerekiyor.

Bunu yapın, tel kafes görüntüleme modunu dağıtın ve 2. satırdaki 8 görüntünün tümünü seçmek için çoklu seçimi kullanın. Ardından, Öğe ayarlarını dağıtmak için seçilen görüntülerden birinin ayarlarını açın. Fading In ve Out kaydırma efekti seçeneği altında aşağıdakileri güncelleyin:

• Soldurmayı ve Yavaşlamayı Etkinleştir: HAYIR

Pozisyon Satırı #2

Son adımımız 2. sırayı 1. sıranın hemen arkasına yerleştirmektir. Bunu yapmanın kolay bir yolu, satır ve mutlak konumu vermektir. 2. satır için ayarları açın ve aşağıdakileri güncelleyin:

• Pozisyon: Mutlak
• Yer: Üst Merkez

Son sonuç

Sonucu görmek için, bölümünüze önemli miktarda üst ve alt kenar boşluğu vermeniz veya tasarımın üstünde ve altında başka bölümler oluşturmanız gerekebilir. Bu size kaydırma efektini düzgün bir şekilde görmeniz için gereken alanı verecektir.

Nihai sonucu kontrol edelim.

Ve işte mobilde.

Son düşünceler

Bu ayrılıkçı görüntü geçişi kendi başına etkileyici bir tasarımdır, ancak bunu ziyaretçilere dönüşüm türü bir mesaj (öncesi ve sonrası gibi) iletmek için kolayca kullanabilirsiniz. Ve bu tasarıma da razı olmak zorunda değilsiniz. Daha da şaşırtıcı görüntü geçişleri oluşturmak için farklı kaydırma efektlerini denemekten çekinmeyin. Herhangi bir fikriniz var mı?

Yorumlarda sizden haber bekliyorum.

Şerefe!