Görüntü Paketleri Oluşturmak için Divi'nin Konum Seçeneklerini Kullanma

İster bir resim galerisi için yeni bir görünüm arıyorsunuz, ister sadece ürün resimleri için güzel bir görüntü istiyorsanız, bu eğitim size yardımcı olacaktır. Normalde, bir Divi web sitesine resim eklerken, tasarımı sütun başına bir resimle sınırlayabiliriz. Bu geleneksel olarak güvenli ve temiz bir tasarım olsa da, görüntüleri aynı sütunda gruplandırmanın, tek veya çoklu sütun düzenlerinde harika görünen güzel görüntü demeti tasarımları oluşturabileceğini görebilirsiniz.

Bu öğreticide, web siteniz için her türlü şekilde kullanabileceğiniz 3 yaratıcı görüntü paketi tasarlamak için Divi'nin yerleşik konum seçeneklerini nasıl kullanacağınızı göstereceğiz.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarımlara hızlı bir bakış.

Görüntü Paketi Tasarımı #1

1. Bina Tasarımına Başlayın

Görüntü Paketi Tasarımı #2

Bina Tasarımına Başlayın #2

Görüntü Paketi Tasarımı #3

Bina Tasarımına Başlayın #3

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.

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!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

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.

Resim Paketi Tasarımı #1

Bu ilk görüntü demeti tasarımı için, bir merkez görüntünün her iki yanına iki (biraz döndürülmüş) görüntü yerleştireceğiz.

Normal bir bölüme tek sütunlu bir satır ekleyerek başlayın.

Orta Resim Ekle

Sütunun içine bir görüntü modülü ekleyin.

Ardından modüle bir resim yükleyin.

Bu görüntüler için Fitness Coach Layout Pack'in ekran görüntülerini kullanacağız. Her biri 880 piksele 1200 piksel olmalıdır.

Görüntü ayarlarını açın ve aşağıdakileri güncelleyin:

• Genişlik: %50
• Modül Hizalaması: merkez

Aşağıdaki gibi bir kutu gölgesi ekleyin:

• kutu Gölge: ekran görüntüsüne bakın
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 38px
• Kutu Gölge Yayılma Gücü: 5px
• Gölge Rengi: rgba(0,0,0,0.2)

Ardından, paketteki diğer görüntülerin üzerinde kalması için Z İndeksini 1'e ayarlayın.

• Z İndeksi: 1

Sol Resim Ekle

Pakette soldaki resmi oluşturmak için ortadaki resmin altına yeni bir resim ekleyin.

Resmi yenisiyle güncelleyin (en iyi sonuç için hepsinin aynı boyutta olduğundan emin olun).

Tasarım sekmesi altında genişliği aşağıdaki gibi güncelleyin:

• genişlik: %30

Ardından kutu gölgesini aşağıdaki gibi ekleyin:

• Kutu Gölgesi: ekran görüntüsüne bakın
• Gölge Rengi: rgba(0,0,0,0.2)

Ardından, sol taraftaki orta görüntüye bitişik olarak oturması için görüntüye sol orta konumda mutlak bir konum verin.

• pozisyon: mutlak
• konum: sol orta

Görüntüye biraz döndürme vermek için dönüştürme döndürme seçeneğini aşağıdaki gibi güncelleyin:

Dönüştür Döndür Z Ekseni: -10deg

Doğru Resmi Ekleyin

Doğru görüntüyü oluşturmak için Katmanlar kutusunu açın ve soldaki görüntüyü çoğaltın.

Daha sonra kolayca tanımlayabilmeniz için görüntü modüllerini (sol görüntü, sağ görüntü vb.) etiketleyin. Ardından, kopya görüntü için ayarları açın ve konumu aşağıdaki gibi ayarlayın:

• konum: sağ merkez

Ardından dönüştürme döndürme seçeneğini aşağıdaki gibi ayarlayın:

• Dönüştür Döndür Z Endeksi: 10deg

Yinelenen görüntüyü yenisiyle değiştirmeyi unutmayın.

Şimdi şimdiye kadarki sonucu kontrol edin.

Birden Çok Sütuna Görüntü Paketi Ekleme

Görüntüler bir sütun içinde konumlandırıldığından, bu görüntü paketi tasarımını birden çok sütun düzenine kolayca ekleyebilirsiniz.

Görüntü paketini birden çok sütuna eklemek için mevcut görüntü paketini içeren satırı çoğaltın.

Yinelenen satırda, görüntü paketinin dahil olduğu başka bir sütun oluşturmak için sütunu çoğaltın. Bu, iki sütunlu bir düzende görüntü demetleri oluşturacaktır.

Üç görüntü demetinden oluşan bir satır oluşturmak için iki sütunlu satırı çoğaltın ve ardından yinelenen satırdaki sütunlardan birini çoğaltın. Bu size üç sütunlu bir düzen verecektir.

Son sonuç

İşte 1 numaralı görüntü paketinin son tasarımı.

Görsel Paketi #2 Tasarlama

Bu sonraki tasarım, ortada bir resim ve sütunun her köşesinde dört tane olmak üzere beş resimden oluşan bir resim paketi içerir.

Başlamak için, dörtte bir buçuk dörtte bir sütun satırına sahip yeni bir normal bölüm oluşturun.

Merkez Resmi Ekle

Orta sütuna bir görüntü modülü ekleyin.

Ardından modüle bir resim yükleyin. Mobilya Mağazası Düzen Paketinden (her biri 800 piksele 1200 piksel) görüntüler kullanıyoruz.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Arka Plan Rengi: #f7f3ec

• Genişlik: %55
• Modül Hizalaması: merkez

• Kenar boşluğu: 0 piksel
• Dolgu: %5 üst, %5 alt, %5 sol, %5 sağ

Gelişmiş sekmesinin altında, görüntünün Z alanındaki diğer görüntülerin üzerinde kaldığından emin olmak için Z İndeksini 1 artırın.

• Z İndeksi: 1

Sol Üst Resmi Ekle

Sol üstteki resmi eklemek için orta sütundaki ortadaki resmin altına yeni bir resim modülü ekleyin.

Modüle yeni bir resim yükleyin.

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: %40
• Kenar boşluğu: 0 piksel alt

Sütun Aralığı

Sütunun yüksekliği, ortadaki görüntünün yüksekliğine ve eklediğimiz üst ve alt dolgu miktarına göre belirlenir. Bu nedenle, kesinlikle konumlandırılmış görüntülerimize uygun aralığı vermek için, üst ve alt dolguyu artırarak sütunun yüksekliğini artırmamız gerekir.

• Dolgu (masaüstü): %12 üst, %12 alt
• Dolgu (tablet): %24 üst, %24 alt

Ardından, sol üstteki resme aşağıdaki gibi mutlak bir konum verin:

• Pozisyon: Mutlak
• Konum: sol üst

Sağ Üst Resmi Ekle

Artık sol üstteki görüntü yerinde olduğuna göre, sağ üstteki görüntüyü oluşturmak için görüntüyü çoğaltın.

(Bu noktada, daha sonra kolay tanımlama için resimlerin her birine etiket eklemek iyi bir fikirdir.)

Yinelenen (sağ üst) görüntüyü açın ve mutlak konum konumunu güncelleyin:

• Yer: sağ üst

Sol Alt Resmi Ekle

Sol alt resmi oluşturmak için sağ üst resmi çoğaltın ve etiketleri gerektiği gibi güncelleyin.

Yinelenen (sol alt) görüntü için ayarları açın ve mutlak konum konumunu güncelleyin:

• Konum: sol alt

Sağ Alt Resmi Ekle

Sağ alt resmi oluşturmak için sol alt resmi çoğaltın ve etiketi gerektiği gibi güncelleyin. Ardından resmi güncelleyin ve ona yeni bir konum verin:

• Yer: sağ alt

Kutu Gölge Tasarımı Vurgusu Ekle

Güzel bir tasarım vurgusu eklemek için sol üstteki resme aşağıdaki gibi bir kutu gölgesi ekleyebiliriz:

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Yatay Konumu: -170px
• Kutu Gölgesi Dikey Konumu: 170px
• Gölge Rengi: rgba(36,57,74,0.07)

Sağ üstteki resme aşağıdaki gibi ücretsiz bir kutu gölgesi tasarım vurgusu ekleyin:

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Yatay Konum: 170px
• Kutu Gölge Dikey Konumu: 170px
• Gölge Rengi: rgba(36,57,74,0.07)

Sol Sütuna Metin Ekle

Tasarıma biraz metin eklemek için sol sütuna yeni bir metin modülü ekleyin.

İçerik

Ardından içeriği aşağıdakilerle güncelleyin:

<h2>Image Bundle</h2>

Metin Tasarımı

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Yazı Tipi Stili: TT
• Başlık 2 Metin Hizalama: sağ
• Başlık 2 Metin Rengi: #24394a
• Başlık 2 Metin Boyutu: 34px
• Başlık 2 Harf Aralığı: 4px
• Başlık 2 Çizgi Yüksekliği: 1.3em

Sol Sütun Dolgusu

Metni biraz aşağı çekmek için sol sütunun ayarlarını açın ve aşağıdaki dolguyu güncelleyin:

• Dolgu: %20 kaldı

Sağ Sütuna Metin Ekle

Sağ sütun metnini oluşturmak için sol sütundaki metin modülünü kopyalayın ve sağ sütuna yapıştırın. Ardından metin ayarlarını açın ve aşağıdakileri güncelleyin:

• Başlık 2 Metin Hizalama: sol

Sağ Sütun Dolgusu

Sol sütun için yaptığımız gibi, metin modülünü aşağı indirmek için sağ sütuna (sütun 3) aşağıdaki dolguyu ekleyin.

• Dolgu: %33 üst

Bölüm Arka Planı

Tasarımı bitirmek için bölüm ayarlarını açın ve aşağıdaki arka plan rengini ekleyin:

• Arka Plan Rengi: #f7f3ec

İşte şimdiye kadarki sonuç.

Birden Çok Sütuna Görüntü Paketi Ekleme

Bu görüntü paketini birden çok sütuna eklemek için satırı çoğaltın ve ardından yinelenen satırdaki sol ve sağ sütunları silin ve yalnızca görüntü paketinin bulunduğu sütunu bırakın.

Çoklu seçimi kullanarak sol üstteki resmi ve sağ üstteki resmi seçin. Ayarları açın ve kutu gölgesini çıkarın.

Ardından, dahil edilen görüntü paketleri ile birden çok sütun oluşturmak için sütunu bir veya iki kez çoğaltın.

Görüntü paketiniz için üç sütun düzeni oluşturuyorsanız, her sütun için sütun ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:

• dolgu: %8 üst, %8 alt

Son sonuç

İşte nihai sonuç.

Ve işte mobilde.

Görüntü Paketi Tasarımı #3

Bu son görüntü paketi tasarımı için, alt temalar veya düzen paketleri gibi şeyler için güzel bir görüntü oluşturmak için ince 3D döndürme ile 5 görüntüyü yan yana konumlandıracağız.

Satır ekle

Başlamak için normal bir bölüme tek sütunlu bir satır ekleyin.

Orta Resim Ekle

Satırın içine bir görüntü modülü ekleyin.

Ardından görüntü modülüne bir görüntü yükleyin. 1 numaralı tasarım için kullandığımız Fitness Coach Layout Pack'teki 880px 1200px ekran görüntülerinin aynısını kullanıyoruz.

Tasarım sekmesi altında, boyutlandırma seçeneklerini aşağıdaki gibi güncelleyin:

• Genişlik: %30
• Modül Hizalaması: merkez

Ardından görüntüye ince bir kutu gölgesi verin:

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Dikey Konumu: -12px
• Kutu Gölge Bulanıklığı Gücü: 28px
• Gölge Rengi: rgba(0,0,0,0.11)

Ardından, varsayılan alt kenar boşluğunu 0 piksele ayarlayarak çıkarın.

• Kenar boşluğu: 0 piksel alt

Üst üste binerken görüntünün diğer görüntülerin üzerinde kaldığından emin olmak için Z İndeksini ayarlayın.

• Z İndeksi: 2

Sütun Perspektifi Ekle

Geri kalan görüntüleri görüntü paketine eklemeden önce, dönüştürme seçeneklerini kullanarak görüntüleri döndürürken perspektif katacak sütuna özel CSS eklememiz gerekiyor. Bu, gerçekçi bir 3D efekti yaratır.

Orta Sol Resim Ekle

Artık perspektifimizi yerleştirdiğimize göre, diğer görüntüleri eklemeye başlayabiliriz.

Sol ortadaki görüntüyü oluşturmak için ortadaki görüntüyü çoğaltın.

Katmanlar kutusundaki görüntü etiketlerini gerektiği gibi güncelleyin, ardından kopya görüntü modülünü yeni bir görüntü ile güncelleyin.

Görüntünün ayarlarını açın ve mutlak konum konumunu ve Z İndeksini aşağıdaki gibi güncelleyin:

• Konum: sol alt
• Z İndeksi: 1

Ardından, görüntüyü konumlandırmak ve döndürmek için aşağıdaki dönüştürme seçeneklerini ekleyin.

• Dönüştürme X Eksenini Çevir: %75
• Dönüştür X Eksenini Döndür: 30deg

Sol Resim Ekle

Soldaki görüntüyü oluşturmak için, az önce oluşturduğumuz sol ortadaki görüntüyü çoğaltın.

Yeni görüntünün ayarlarını açın ve genişliği güncelleyin:

• Genişlik: 20%

Ardından transform translate seçeneğini aşağıdaki gibi ayarlayın:

• Dönüştür X Eksenini Çevir: 0px

Ardından, görüntü orta sol görüntünün arkasında kalacak şekilde Z İndeksini ayarlayın.

• Z İndeksi: 0

Orta Sağ Resim Ekle

Ardından, görüntü paketine bir orta sağ görüntü ekleyeceğiz.

Görüntüyü oluşturmak için Katmanlar açılır penceresini açın. Ardından, sol ortadaki görüntüyü çoğaltın, kopyalanan görüntüyü sol görüntünün altına sürükleyin ve ardından buna göre etiketleyin (yani, "sağ orta görüntü").

Sağ ortadaki görüntü için ayarları açın ve mutlak konum konumunu aşağıdaki gibi değiştirin:

• Yer: sağ alt

Ardından dönüştürme seçeneklerini aşağıdaki gibi ayarlayın:

• Dönüştürme X Eksenini Çevir: -%75
• Dönüştür X Eksenini Döndür: -30deg

Sağ Resmi Ekle

Doğru görüntüyü (sonuncusu) oluşturmak için soldaki görüntüyü çoğaltabiliriz. Ardından yinelenen görüntüyü sağ orta görüntünün altına sürükleyin ve “doğru görüntü” olarak etiketleyin.

Doğru görüntü ayarlarını açın ve mutlak konum konumunu aşağıdaki gibi güncelleyin:

• Yer: sağ alt

Ardından, dönüştürme dönüşünü ayarlayın.

• Dönüştür X Eksenini Döndür: -30deg

Şimdiye kadarki sonuca bakın.

Ve işte birden çok sütuna eklenen aynı görüntü paketi.

Son düşünceler

Divi'nin mutlak konum seçeneğinin nasıl çalıştığını anladığımızda, onu oldukça harika görüntü paketi tasarımları oluşturmak için kullanabiliriz. Bu görüntü gruplarının en iyi yanı, birden çok sütunda harika görünecekleri ve mobilde de mükemmel şekilde ölçeklenebilecekleri tek bir sütunda bulunmalarıdır.

Umarım bu, bir sonraki projeniz için harika görüntü gösterileri yaratmanız için size biraz ilham verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!