Divi'nin Konum Seçeneklerini Kullanarak Etkileşimli Bir Görüntü Kolajı Nasıl Oluşturulur

Divi'nin yeni konum seçenekleri, mutlak konum özelliğini kullanarak benzersiz görüntü kolaj düzenleri oluşturmanın kapısını açar. Bu, tasarımınızın her bir öğesi için daha kesin yerleşimler yapmanızı sağlar. Ve bunu Divi'deki sayısız tasarım ayarı kombinasyonuyla birleştirdiğinizde, oldukça şaşırtıcı görüntü kolajları tasarlayabilirsiniz.

Bu öğreticide, Divi web siteniz için dakikalar içinde güzel bir etkileşimli resim kolajı oluşturmak için Divi'nin yerleşik konum seçeneklerini nasıl kullanacağınızı göstereceğim.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız etkileşimli resim kolaj düzenine hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu öğreticiden resim kolajı düzenine el 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.

Divi'nin Konum Seçenekleriyle Etkileşimli Görüntü Kolajı Oluşturma

Satır ve Sütunu Optimize Etme

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

Satır Ayarları

Daha sonra, modüller arasında fazladan boşluk kalmayacak şekilde (oluk genişliği aracılığıyla) satırı güncellememiz gerekiyor, böylece oluk genişliğini 1 olarak ayarlayacağız. Ayrıca satırın tarayıcı penceresinin tüm genişliğini kapladığından emin olmamız gerekiyor. böylece resimlerimizi konumlandırmak için vw uzunluk birimlerinden yararlanabiliriz (vw (görünüm alanı genişliği) uzunluk birimi tarayıcı penceresinin genişliği ile ilgilidir). Genişlik %100 olarak ayarlandığında, görüntülerimizi satır/sütun içinde konumlandırmak için vw uzunluk birimlerini kullanabiliriz, böylece kusursuz duyarlı tasarım için konumun tüm tarayıcı genişliklerinde bozulmadan kalması sağlanır. Ve satırın dışındaki herhangi bir görüntü taşmasını gizlemek için, taşmayı gizli olarak ayarlamamız gerekir.

Bunu yapmak için satır ayarlarını aşağıdaki gibi optimize edin:

Sütun Yüksekliğini Ayarlama

Varsayılan olarak, sütunun yüksekliği içerdiği içeriğin (veya Divi modüllerinin) yüksekliğine göre belirlenir. Divi Modülleri (HTML'deki tüm div'ler gibi) varsayılan olarak statik bir konuma sahip olacaktır; bu, sayfanın normal akışında konumlandırıldığı için üst sütununa gerçek boşluk/yükseklik ekleyecekleri anlamına gelir. Ancak mutlak konumu olan Divi Modüller normal akışın dışına çıkar ve kolon için gerçek boşluk/yükseklik oluşturmaz. Bu nedenle, görüntüleri önceden belirlenmiş bir boşluk içinde konumlandırabilmemiz için sütun için belirli bir yükseklik eklememiz gerekiyor.

Bunu yapmak için satır ayarlarını açın ve Ana Öğeye aşağıdaki Özel CSS'yi ekleyerek sütun ayarlarını güncelleyin.

height: 40vw;

Telefon sekmesi altında, görüntüleri telefonda statik bir konuma geri döndürdüğümüz için yüksekliği varsayılan durumuna geri yükleyin. Telefon sekmesine aşağıdaki Özel CSS'yi ekleyin:

height: auto !important;

Başlık Metni Ekleme

Sütun yüksekliği ayarlandığında, mutlak konumlandırılmış öğelerimizi sütuna eklemeye başlayabiliriz. Resim kolaj düzenimizin başlığı için bir metin modülü ekleyerek başlayalım.

Metin Modülü İçeriği

Ardından metni aşağıdaki içerikle güncelleyin:

<h2>Recent Work</h2>

Metin Modülü Ayarları

Ardından metin modülü ayarlarını aşağıdaki gibi güncelleyin:

• Başlık 2 Yazı Tipi: Limelight
• Başlık 2 Metin Hizalama: orta
• Başlık 2 Metin Rengi: #24005b
• Başlık 2 Metin Boyutu: 5vw (masaüstü ve tablet), 50px (telefon)
• Genişlik: %100
• Maksimum Genişlik: 35vw (masaüstü ve tablet), %100 (telefon)
• Konum: Mutlak (masaüstü), Varsayılan (telefon)
• Yatay Ofset (masaüstü): 35vw

Görüntü Oluşturma ve Konumlandırma

Artık başlık yerinde olduğuna göre, etkileşimli resim kolajımız için ilk resmi oluşturalım. Buradaki fikir, tüm optimizasyonları yerinde olan ilkini oluşturmaktır, böylece kolaj için görüntülerin geri kalanını oluşturmayı ve konumlandırmayı kolaylaştırmak için çoğaltabiliriz.

Hover Efektleri, Işık Kutusu ve Mutlak Konumlandırma ile İlk Görüntüyü Optimize Etme.

İlk olarak, metin modülünün altına bir resim modülü ekleyin.

Ardından modüle bir görüntü yükleyin ve görüntüyü bir ışık kutusunda açma seçeneğini seçin. Şimdi görüntü, tıklandığında bir ışık kutusunda gösterilecektir.

Fareyle Üzerine Geldiğinde Görüntüyü Ölçekle

Işık kutusu etkileşimine ek olarak, görüntünün biraz daha büyük ölçeklenmesine neden olan bir vurgulu efekti ekleyin. Bunu yapmak için aşağıdaki dönüştürme seçeneğini güncelleyin:

• Dönüştürme Ölçeği (fareyle üzerine gelme): %115

Hover'da Z Endeksi önceliği ile Mutlak Konumlandırma

Resmimizi konumlandırmak için vw uzunluk birimleriyle mutlak bir konum kullanacağız. Konum seçeneklerini aşağıdaki gibi güncelleyin:

Masaüstünde (ve Tablette)

• pozisyon: mutlak
• Konum: Sol Üst
• Dikey Ofset: 5vw
• Yatay Ofset: -2vw

Telefonda

• Pozisyon: Varsayılan

Üzerinde gezinme

• Z İndeksi: 2

Görüntü Tasarımı ve Duyarlı Ayarlar

Ardından aşağıdakileri güncelleyin:

• Görüntü Hizalama: sol (masaüstü), orta (telefon)
• Genişlik: %75 (telefon)
• Maksimum Genişlik: 20vw (masaüstü ve tablet), %100 (telefon)
• Kenar boşluğu (telefon): 30 piksel alt
• Kutu Gölgesi: ekran görüntüsüne bakın
• Doygunluk: %0 (masaüstü), %100 (fareyle üzerine gelme)

Diğer Görüntüleri Hızlı Bir Şekilde Oluşturmak ve Konumlandırmak için İlk Görüntüyü Şablon Olarak Kullanma

İlk görüntü tamamlandığında, etkileşimli görüntü kolajını oluşturmak için yeni görüntüler oluşturmak gerçekten çok kolay. Aynı zamanda güçlü bir tasarım aracıdır, çünkü tasarımı gerçek zamanlı olarak görüntülerken görüntüleri yerinde sürükleyip boyutu ayarlayabileceksiniz.

İşte süreç…

1. Çoğalt simgesine tıklayarak Resmi çoğaltın. Yinelenen görüntü, kopyaladığınız görüntünün hemen üstünde kesinlikle aynı yere yerleştirilecektir.
2. Resmi Yerinde Sürükleyin. Yinelenen görüntü, önceki görüntünün vw uzunluk birimini devraldığından, görüntüyü satır içinde tam olarak istediğiniz yere konumlandırmak için sürükle simgesini kullanabilirsiniz.
3. Görüntüyü yenisiyle güncelleyin.
4. Yerleşik boyut seçeneklerini kullanarak görüntünün boyutunu ayarlayın.

İşte ikinci görüntüyü oluştururken nasıl görüneceğini gösteren bir örnek.

Bu işlemin güzel yanı, görüntüyü yerine her sürüklediğinizde konumun (dikey ve yatay ofsetler) belirlenecek olmasıdır. Ayarlarda ofset konumlarını manuel olarak güncellemeye gerek yoktur.

Ancak, bu örnekte kullandığım ofsetleri görebilmeniz için, bunları boyut ayarlarıyla birlikte aşağıdaki her görüntü için ekleyeceğim.

Resim #2 Güncellemeleri

• Dikey Ofset: 10.06 vw
• Yatay Ofset: 16.51 vw
• Maksimum Genişlik: 18 vw

Resim #3 Güncellemeler

• Dikey Ofset: 24.25vw
• Yatay Ofset: 7.13vw
• Maksimum Genişlik: 20vw

Resim #4 Güncellemeler

• Dikey Ofset: 17.69vw
• Yatay Ofset: 31.91vw
• Maksimum Genişlik: 18vw

Resim #5 Güncellemeler

• Dikey Ofset: 12vw
• Yatay Ofset: 46.82vw
• Maksimum Genişlik: 15vw

Resim #6 Güncellemeler

• Dikey Ofset: 19.13vw
• Yatay Ofset: 58.84vw
• Maksimum Genişlik: 12vw

Resim #7 Güncellemeler

• Dikey Ofset: 28.24vw
• Yatay Ofset: 54.2vw
• Maksimum Genişlik: 10vw

Resim #8 Güncellemeler

• Dikey Ofset: 32.5vw
• Yatay Ofset: 74.04vw
• Maksimum Genişlik: 8vw

Resim #9 Güncellemeler

• Dikey Ofset: 1.01vw
• Yatay Ofset: 75.5vw
• Genişlik: 27vw
• Maksimum Genişlik: 27vw

Arka Plan Resmi Ekle

Son bir dokunuş için bölüme bir arka plan resmi ekleyin ve işiniz bitti!

Son sonuç

Etkileşimli resim galerisi masaüstü ve tablette böyle görünecek. Görüntüyü öne getiren, görüntünün tam renkli sürümünü gösteren ve görüntüyü daha büyük ölçekleyen vurgulu efektlerine dikkat edin. Ardından, ışık kutusu efektini göstermek için resme tıklayabilirsiniz.

İşte telefon ekranındaki tasarım.

Farklı Mizanpaj Tasarımları İçin Görsellerin Konum Noktasını Değiştirme

Görüntülerin her birinin ofsetleri konum noktasına göre olduğundan, tasarımımızın farklı yönlerden geldiğini saniyeler içinde görebilmek için görüntülerin orijinal konum noktasını değiştirebiliriz.

Bunu yapmak için, tüm görüntü modüllerini seçmek üzere Divi'nin çoklu seçim özelliğini kullanın. Ardından, öğe ayarları modunu getirmek için görüntü modülü ayarlarından birini açın.

Ardından, yerleşim düzeninin farklı yapıları için konumu dört köşenin her birine değiştirebilirsiniz.

Sağ Üst Köşe Konumu

Sol Alt Köşe Konumu

Sağ Alt Köşe Konumu

Son düşünceler

Divi'nin yeni konum seçenekleri hem güçlü hem de kullanışlı. Ve bu eğitimde deneyimlediğimiz gibi, görsellerimiz için benzersiz düzenler tasarlamamız için bize harika tasarım araçları sağlıyorlar. Umarım bu etkileşimli resim kolajı, bir sonraki projeniz için küçük bir ilham kaynağı olur.

Yorumlarda sizden haber bekliyorum.

Şerefe!