Divi'de Sürgülü Yapboz Parşömen Efekti ile Resim Galerinizi Nasıl Ortaya Çıkarırsınız?

Resim galerileri çoğu web sitesinde favori yerlerdir. Ve çoğu durumda, bu resim galerilerini mutlu ve statik tutmak, resimlerin sihirlerini kullanmasına izin vermek en iyisi olabilir. Ancak, bir resim galerisine kayan bir bulmaca kaydırma efekti eklemek (bu eğitimde yapacağımız gibi), zamansız bir klasiğe canlandırıcı bir dönüş getirebilir.

Bu öğreticide, Divi'de kayan bulmaca kaydırma efektiyle bir resim galerisini ortaya çıkaran basit bir düzenin nasıl oluşturulacağını göstereceğiz. Anahtar, görüntüyü tam olarak bir nokta üzerine taşımak için görüntülerin boyutunun her kaydırma efektinin dikey ve yatay ofset değerleriyle nasıl ilişkili olduğunu anlamaktır. Ancak tamamlandığında, ortaya çıkan hareket efekti, bir görüntü galerisini benzersiz bir şekilde kademeli olarak bir araya getirdiği ve ortaya çıkardığı için net ve kesindir.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız kayan bulmaca kaydırma efekti ile resim galerisi düzenine hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.

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.
4. Aynı yüksekliğe ve genişliğe sahip en az 4 kare resim bulun veya kırpın. Bu eğitim için, tam olarak 500 piksele 500 piksel olan çömlek düzeni paketinden kırpılmış görüntüleri kullanacağız.

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

Başlık Bölümünü Oluşturma

Başlamak için, galeriyi görüntülemek için sayfayı aşağı kaydırmasını ve harika kaydırma efektleriyle kullanıcıyı bilgilendirecek hızlı bir başlık bölümü oluşturalım.

Satır ekle

Varsayılan bölüme tek sütunlu bir satır ekleyin.

Metin Modülü Ekle

Sütunun/satırın içine yeni bir metin modülü ekleyin.

Metin ayarlarında, gövde içeriğini aşağıdakilerle güncelleyin:

<h1>Image Gallery</h1>

Metin Modülü Ayarları

Tasarım sekmesi altında, metin tasarımını aşağıdaki gibi güncelleyin:

• Başlık Yazı Tipi: Roboto
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: TT
• Başlık Metni Hizalama: orta
• Başlık Metni Boyutu: 50px (masaüstü), 40px (tablet ve telefon)
• Başlık Harf Aralığı: 4px

Bulanıklık Modülü Simgesi Ekle

Metin yerleştirildikten sonra, metin modülünün altına yeni bir tanıtım yazısı modülü ekleyin.

Ardından tüm varsayılan başlığı ve gövde içeriğini çıkarın ve aşağı ok simgesini kullanmayı seçin.

Bulanıklık Ayarları

Ardından, tanıtım yazısı ayarlarını yeni bir renk ve yinelenen bir slayt animasyonu ile güncelleyin.

• Simge Rengi: #ffb500
• Animasyon Stili: Slayt
• Animasyon Yönü: Aşağı
• Animasyon Yoğunluğu: 20%
• Animasyon Tekrarı: Döngü

Bölüm Dolgusu

Bölümü kaydırmak için biraz yer açmak için dolguyu aşağıdaki gibi güncelleyin:

• Dolgu: 20vh üst, 50vh alt

Burada, tarayıcı penceresinin yüksekliğine göre vh uzunluk birimini kullanıyoruz, böylece boşluk tüm tarayıcı boyutlarında tutarlı bir şekilde ayarlanacak.

Kaydırma Efektleri ile Resim Galerisi Oluşturma

Artık başlık bölümümüz tamamlandığında, kayan bulmaca kaydırma efektleriyle gerçek resim galerisini oluşturmaya hazırız. Tüm galeri, toplam 12 resim yapmak için her satırda üç sıra 4 resim/sütun oluşacaktır. Ancak, tamamlandıktan sonra düzene kolayca daha fazla satır ve resim ekleyebilirsiniz.

Bölüm ve Satırı Oluşturma

Yeni Bölüm Ekle

Başlık bölümünün altına yeni bir normal bölüm ekleyerek başlayalım.

Satır ekle

Ardından, bölüme dört sütunlu bir satır ekleyin.

Satır Ayarları

Satır ayarları altında aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: 1200 piksel (masaüstü), 600 piksel (tablet), 300 piksel (telefon)

Satır Genişliği Görüntü Boyutunu Nasıl Belirler?

Satır genişliği bu tasarım için çok önemlidir çünkü dört sütunun her birinin genişliğini belirleyecektir. Oluk genişliğini 1'e ayarladığımızda, resimler arasında boşluk kalmayacaktır. Ve maksimum genişliği 1200 piksele ayarladığımızda, dört sütunlu düzen, sütunların/görüntülerin her birini tam olarak 300 piksel genişliğinde (1200 piksel/4 = 300 piksel) yapacaktır. Ayrıca, resimlerin her biri kare olduğundan, her bir resmin yüksekliğinin de 300 piksel olacağını biliyoruz. İstemiyorsak bu şekilde tutmak zorunda değiliz. Örneğin, 400 piksele 400 piksel olan resimlerle üç sütunlu bir düzene sahip olmayı da seçebiliriz. Görüntünün genişliğini (300 piksel) ve yüksekliğinin (ayrıca 300 piksel) daha sonra kaydırma efekti oluşturmanın anahtarı olacağını bilin.

Görüntüleri Ekleme

Resim 1 Ekle

Resim 1 Kaydırma Efektleri

Görüntü Boyutunun Kaydırma Etkisi Ofsetleriyle İlişkisi

Dikey ve yatay kaydırma efektini kullanırken, girilen sayı değerinin neyi temsil ettiğini anlamak önemlidir. Bu örnekte, -3'lük bir dikey hareket başlangıç ​​ofseti var. Bu -3 aslında görüntünün genişliği olan -300 pikseldir (veya alta doğru 300 pikseldir). Ardından, kullanıcı kaydırdıkça ofset 0'a (orijinal konum) ulaşır. Bu, görüntüyü tam olarak bir blok/görüntü üzerinde hareket ettiren kaydırma efektini yaratan şeydir. Yatay hareket 3'te (sağdan 300 piksel) başlar ve varsayılan konumunda durur. Bu iki efekt, benzersiz bir iki parçalı kaydırma efekti oluşturmak için birleşir.

Resim 2 Ekle

1. görüntüye kaydırma efektleri eklendikten sonra 2. sütuna yeni bir görüntü ekleyin.

Bu görüntüyü herhangi bir kaydırma efekti olmadan statik bırakacağız.

Resim 3 Ekle

Ardından, sütun 3'e başka bir görüntü modülü ekleyin ve modülü yeni bir görüntü ile güncelleyin.

Resim 3 Kaydırma Efektleri

Görüntü ayarları altında aşağıdaki kaydırma efektlerini güncelleyin:

Yatay Hareket Sekmesi altında…

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: -3 (%0 görünüm alanında)
• Orta Ofset: 0 (%15 görünüm alanında)
• Bitiş Ofseti: 0 (%100 görünüm alanında)

Resim Ekle 4

Son resmi oluşturmak için 1. resmi kopyalayın ve 4. sütuna yapıştırın.

Resim ayarlarından yeni bir resim yükleyin.

Resim 4 Kaydırma Efektleri

Ardından aşağıdaki kaydırma efektlerini güncelleyin:

Dikey Hareket Sekmesi altında…

• Dikey Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 3 (%0 görünüm alanında)
• Orta Ofset: 0 (%15-%28 görünüm alanında)
• Bitiş Ofseti: 0 (%40 görünüm alanında)

Yatay Hareket Sekmesi altında…

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 3 (%0 görünüm alanında)
• Orta Ofset: 3 (%28 görünüm alanında)
• Bitiş Ofseti: 0 (%40 görünüm alanında)

Satırı Çoğalt

Artık ilk satır için görüntü kaydırma efektleri tamamlandı, tek yapmamız gereken daha fazla görüntü ve bunlara karşılık gelen kaydırma efektleri oluşturmak için satırı çoğaltmak. Bu örnek için, toplam üç satır oluşturmak için satırı iki kez çoğaltalım.

Görüntüleri Gerektiğinde Değiştirin ve Yeniden Düzenleyin

Ardından sürükle bırak özelliğini kullanarak görüntüleri istediğimiz yere taşıyabiliriz. Burası, yaratıcı olabileceğiniz ve görüntülerin nasıl hareket edeceğini görebileceğiniz yerdir. Görüntüler yerleştirildikten sonra, görüntü modülünün içeriğini web sitesinin ihtiyaçlarına uygun yeni görüntülerle değiştirebilirsiniz.

Son Rötuşlar

Bölüm Görünürlüğü

Görüntülerimiz muhtemelen bölümün/görünüm alanının dışına taşacağından, biraz temizlemek için taşmayı gizleyelim. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Bölüm Dolgusu

Üstteki görüntünün (bölümün üzerine uzanan) dikey kaydırma efektinin, gizli taşmaya rağmen görünür olmasını istiyoruz. Öyleyse, görüntünün yüksekliğine (300 piksel) eşit üst ve alt dolgu ekleyelim.

Sonuç Şimdiye Kadar

Galeri tasarımını resimler arasında boşluk bırakmadan tutmak istiyorsanız şimdi burada durabiliriz. Sonuç şu ana kadar böyle görünüyor. Görüntülerin dikey ve yatay olarak tam olarak bir blok/görüntü üzerinde ne kadar güzel kaydığına dikkat edin.

Resimler Arasına Boşluk Ekleme

Oluk genişliğini 1 olarak ayarladığımız için artık sütunlarımız veya resimlerimiz arasında herhangi bir kenar boşluğu yok. Benzer bir aralığı yeniden oluşturmak için her görüntüye dolgu ekleyebiliriz. Bu, kaydırma efektlerinin işlevselliğinden ödün vermeden ihtiyacımız olan aralığı oluşturmamızı sağlayacaktır. Bu mümkündür, çünkü görüntüye dolgu eklemek görüntü kabının genişliğine veya yüksekliğine eklenmez (bununla ilgili daha fazla bilgi için Divi'de kutu boyutlandırma hakkında okuyun). Kenarlıkları kullanarak da benzer bir etkiye sahip olabilirsiniz.

Resim 1 Dolgu

Resim 1 için ayarları açın ve aşağıdakileri güncelleyin:

• Dolgu: 10 piksel üst, 10 piksel alt, 10 piksel sol, 10 piksel sağ

Dolguyu Tüm Görüntülere Uzat

Kaydetmeden önce, dolgu seçeneğine sağ tıklayın ve “Dolguyu Genişlet” seçeneğini seçin. Genişletme stilleri açılır penceresinde, bu dolguyu sayfadaki tüm resimlere genişletmek için genişlet düğmesini tıklayın.

Son sonuç

Bu kadar!

İşte masaüstündeki nihai sonuç.

İşte tablet ve telefonda.

Son düşünceler

Bu gönderide yer alan kayan bulmaca kaydırma efekti, bize bir resim galerisi için benzersiz bir tasarım vermekten daha fazlasını yapıyor. Ayrıca, daha hassas kaydırma efektleri için yatay ve dikey hareket ofsetlerinin kullanılabileceğini vurgular. Ofsetleri değiştirerek ve görüntü yerleşimlerini karıştırarak bu düzenin farklı varyasyonlarını keşfetmekten çekinmeyin. Sütunların/görüntülerin boyutunun nasıl değişeceğini ve ardından kaydırma efekti ofsetlerini karşılık gelen değerle nasıl güncelleyeceğinizi anladığınız sürece sütun sayısını da değiştirebilirsiniz.

Umarım bu işe yarar. Ve her zaman olduğu gibi, yorumlarda sizden haber almak için sabırsızlanıyorum.

Şerefe!