Ana İçeriğe Geç

Divi'de kaydırma efekti ile resim galerinizi nasıl ortaya çıkarırsınız

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Resim galerileri çoğu web sitesinde favori bir hedeftir. Ve çoğu durumda, bu resim galerilerini neşeli ve sabit tutmak, resimlerin kendi sihrini kullanmasına izin vermek en iyisi olabilir.

 Ancak, sürgülü bulmaca kaydırma efekti ekleyin resim galerisi (bu derste yapacağımız gibi), zamansız bir klasiğe ferahlatıcı bir dokunuş verebilir.

Bu eğitimde, Divi üzerinde kayan bulmaca kaydırma efektine sahip bir resim galerisini ortaya çıkaran basit bir düzeni nasıl oluşturacağınızı göstereceğiz. 

Önemli olan, görüntüyü tam olarak bir noktaya taşımak için görüntü boyutunun her kaydırma efektinin dikey ve yatay uzaklık değerleriyle nasıl ilişkili olduğunu anlamaktır. Ancak tamamlandığında ortaya çıkan hareket efekti, kademeli olarak bir araya gelerek benzersiz bir şekilde bir resim galerisi ortaya çıkardığı için net ve kesindir.

Olası Sonuç

Burada, bu öğreticide oluşturacağımız kayan bulmaca kaydırma efektiyle resim galerisi düzenine genel bir bakış yer almaktadır.

Olası sonuç divi

Başlık bölümünün oluşturulması

Başlamak için, kullanıcıya galeriyi ve harika kaydırma efektleriyle sayfayı kaydırmasını söyleyen 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.

Tek sütun satırı

Metin modülü ekle

Sütun / 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ü ekle

Metin modülü ayarları

Tasarım sekmesinde, 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
  • Üstbilgi Metni Hizalama: Merkez
  • Başlık metin boyutu: 50px (masaüstü), 40px (tablet ve telefon)
  • Başlık harfi aralığı: 4 piksel
Değiştirilmiş metin stili

Bir Bulanıklaştırma modülü simgesi ekle

Metin yerleştirildikten sonra, metin modülünün altına yeni bir sunum metin modülü ekleyin.

Divi seçim özeti modülü

Ardından, varsayılan içerikten tüm başlığı ve gövdeyi kaldırın ve aşağı ok simgesini kullanmayı seçin.

Divi özet modülü

Sunum metni ayarları

Ardından, sunum metni 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ü
Divi animasyon özet modülü

Bölüm dolgusu

Bölümlere kaydırma alanı vermek için dolguyu aşağıdaki gibi güncelleyin:

  • Dolgu: 20vh yukarıda, 50vh aşağıda

Burada, tarayıcı penceresinin yüksekliğine bağlı olan vh uzunluk birimini kullanıyoruz, böylece aralık tüm tarayıcı boyutlarında tutarlı bir şekilde ayarlanır.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Divi modülü aralığını yapılandırın

Kaydırma efektli resim galerisi oluşturma

Artık başlık bölümümüz tamamlandığına göre, kayan bulmaca kaydırma efektleriyle gerçek resim galerisini oluşturmaya hazırız. Tüm galeri, toplamda 4 resim oluşturmak için her satırda 12 resim / sütundan oluşan üç satırdan oluşacaktır. Ancak, tamamlandığında mizanpaja kolayca daha fazla çizgi ve görüntü ekleyebilirsiniz.

Kesit ve çizgi oluşturma

Yeni bölüm ekle

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

Seçim bölümü divi

Satır ekle

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

Bölümde 4 sütun divi vardır

Satır Parametreleri

Hat 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)
Divi hattı parametresi
Çizgi genişliği görüntü boyutunu nasıl belirler?

Dört sütunun her birinin genişliğini belirleyeceği için sıranın genişliği bu tasarım için çok önemlidir. Cilt payı genişliğini 1 olarak ayarladığımızda, resimler arasında artık kenar boşluğu kalmayacaktır. 

Maksimum genişliği 1200 piksel olarak ayarladığımızda, dört sütun düzeni sütunların / görüntülerin her birini tam olarak 300 piksel genişliğinde yapar (1200 piksel / 4 = 300 piksel). 

Ayrıca görsellerin her biri kare olduğu için her görüntünün yüksekliğinin de 300 piksel olacağını biliyoruz. İstemiyorsak, bu şekilde tutmak zorunda değiliz. 

Örneğin, 400 x 400 piksellik görüntülere sahip üç sütun düzenini de seçebiliriz. Görüntü genişliğini (300px) ve yüksekliğini (ayrıca 300px) bilmek, daha sonra kaydırma efektini oluşturmanın anahtarı olacaktır.

Görüntü ekleme

Resim ekle 1

Görüntü modülü div ekle

Resim 1 Kaydırma efektleri

Divi kaydırma efekti
Görüntü boyutu ve kaydırma efekti ofsetleri arasındaki ilişki

Dikey ve yatay kaydırma efektini kullanırken, girilen sayısal değerin neyi temsil ettiğini anlamak önemlidir. Bu örnekte, dikey hareket başlangıç ​​ofsetimiz -3'tür. Bu -3, aslında görüntünün genişliği olan -300 pikseldir (veya 300 piksel aşağıdadır). 

Ofset daha sonra kullanıcı kaydırdığında 0'a (ana konum) ulaşır. Görüntüyü tam olarak bir blok / çerçeveye taşıyan kaydırma efektini oluşturan şey budur. Yatay hareket 3'te (sağdan 300 piksel) başlar ve varsayılan konumunda durur. Bu iki efekt, benzersiz bir iki bölümlü kaydırma efekti oluşturmak için birleşir.

Resim ekle 2

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

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

Resim ekle 3

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

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Resim 3 Kaydırma efektleri

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

Yatay hareket sekmesinin altında ...

  • Yatay hareketi etkinleştir: EVET
  • Başlangıç ​​ofseti: -3 (pencerenin% 0'ında)
  • Ortalama uzaklık: 0 (görüntü alanının% 15'sinde)
  • Bitiş uzaklığı: 0 (görüntü alanının% 100'ünde)
Görüntü modülü divi kaydırma efekti

Resim ekle 4

Son görüntüyü oluşturmak için görüntü 1'i kopyalayın ve 4. sütuna yapıştırın.

Görüntü ayarlarında yeni bir görüntü yükleyin.

Yeni bir divi görüntüsü yükleyin

Resim 4 Kaydırma efektleri

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

Dikey hareket sekmesinin altında ...

  • Dikey hareketi etkinleştir: EVET
  • Başlangıç ​​ofseti: 3 (pencerenin% 0'ında)
  • Ortalama göreli konum: 0 (görüntü alanının% 15 -% 28'inde)
  • Bitiş uzaklığı: 0 (görüntü alanının% 40'ünde)

Yatay hareket sekmesinin altında ...

  • Yatay hareketi etkinleştir: EVET
  • Başlangıç ​​ofseti: 3 (pencerenin% 0'ında)
  • Ortalama uzaklık: 3 (görüntü alanının% 28'sinde)
  • Bitiş uzaklığı: 0 (görüntü alanının% 40'ünde)
Divi kaydırma seçeneği

Yinelenen satır

Artık ilk satır için görüntü kaydırma efektleri yapıldığına göre, tek yapmamız gereken daha fazla görüntü ve bunlara karşılık gelen kaydırma efektlerini 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ği gibi değiştirin ve yeniden düzenleyin

Ardından sürükle bırak işlevini kullanarak istediğimiz yere görüntüleri taşıyabiliriz. Burası yaratıcı olabileceğiniz ve resimlerin 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ını karşılayan yeni görüntülerle değiştirebilirsiniz.

Toplam görüntü divi

Son rötuşlar

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

Görüntülerimiz muhtemelen bölüm / pencerenin dışına uzanacağı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
Görünürlük divi

Bölüm dolgusu

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

Divi dolgusu

Şimdiye kadarki sonuç

Galeri tasarımını resimler arasında boşluk bırakmadan korumak istiyorsanız şimdi burada durabiliriz. İşte sonuç şu ana kadar nasıl görünüyor. Görüntülerin dikey ve yatay olarak tam olarak bir blok / çerçeve nasıl hareket ettiğine dikkat edin.

Görüntüler arasına boşluk ekleme

Cilt payı genişliğini 1 olarak ayarladığımız için, artık sütunlarımız veya görüntülerimiz arasında bir kenar boşluğumuz yok. Benzer boşlukları yeniden oluşturmak için her kareye 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ğini veya yüksekliğini artırmaz. 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: üstte 10 piksel, altta 10 piksel, solda 10 piksel, sağda 10 piksel
Divi marjı ekle

Dolguyu tüm görüntülere genişlet

Kaydetmeden önce, dolgu seçeneğine sağ tıklayın ve "Dolguyu genişlet" seçeneğini seçin. Genişlet Stilleri açılır penceresinde, bu dolguyu sayfadaki tüm görüntülere genişletmek için Genişlet düğmesine tıklayın.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Divi kenar boşluklarını genişletin

Nihai sonuç

İşte şimdiye kadar yaptığımız tüm çalışmaların sonucu.

Divi masaüstü nihai sonucu

Son düşünceler

Bu makalede yer alan kayan bulmaca kaydırma efekti, bize bir resim galerisi için benzersiz bir tasarım vermekten daha fazlasını yapar. Ayrıca, yatay ve dikey hareket ofsetlerinin daha hassas kaydırma efektleri için kullanılabileceğine de işaret ediyor.

 Ofsetleri değiştirerek ve görüntülerin konumlarını karıştırarak bu düzenin farklı çeşitlemelerini keşfetmekten çekinmeyin. 

Sütun / görüntü 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.

Önerilen Bazı Kaynaklar

Muhtemelen bu kaynakları ilginç bulacaksınız çünkü WordPress blogunuzda fotoğraf galerileri oluşturmanıza izin vereceklerdir.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
1 hisseleri
hisse1
cıvıltı
Enregistrer