Divi'nin Dönüştürme Seçenekleriyle Portföy Öğelerini Güzel Bir Şekilde İstifleme

Yeni Divi dönüştürme seçenekleri, görsel olarak çekici web tasarımı oluşturmaya yönelik bir sürü yeni kapı açtı. Sıfırdan bir web sitesi tasarlarken herhangi bir görsel düzenleme yazılımına ihtiyaç duymamaya bizi bir adım daha yaklaştırıyor. %100 duyarlı bir tasarıma sahipken, onu tam olarak istediğimiz gibi görünecek şekilde dönüştürebiliriz.

Bu gönderide, portföy öğelerini güzel bir şekilde istiflemek için yeni dönüştürme seçeneklerini kullanacağız. Bu, örneğin daha önce yapılmış web sitelerini sergilemek için harika bir yaklaşımdır. Ayrıca, ziyaretçilerin kullandığı ekran boyutu ne olursa olsun, resimlerin oldukları yerde kalmasını sağlayacağız. Bu öğreticinin, bir web sitesini ihtiyaçlarınıza göre özelleştirirken Divi'nin yeni dönüştürme seçenekleriyle yaratıcı olmanız için size ilham vermesini umuyoruz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Degrade Arka Plan

Sayfanıza yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve buna bir degrade arka planı ekleyin.

• Renk 1: #f4f4f4
• Renk 2: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %30
• Bitiş Konumu: %30

aralık

Ardından tasarım sekmesine gidin ve boşluk ayarlarında özel dolgu değerlerini değiştirin.

• Üst Dolgu: 0px (Masaüstü), 18vw (Tablet), 40vw (Telefon)
• Alt Dolgu: 0px (Masaüstü), 18vw (Tablet), 40vw (Telefon)

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Ardından, boşluk ayarlarına gidin ve üst ve alt varsayılan dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Görüntülemek

Ayrıca, daha küçük ekran boyutlarında her iki sütunun da yan yana görünmesini sağlıyoruz. Bunu yapmak için, satırın ana öğesine tek bir CSS kodu satırı eklememiz gerekecek.

display: flex;

Resim Modülü #1'i Sütun 1'e ekleyin

Fotoğraf yükleniyor

Artık farklı modülleri eklemeye başlayabiliriz! Bu öğreticiyi takip edebilmek adına, devam edin ve aşağıdaki yazdırma ekranını bilgisayarınıza kaydedin:

Yazdırma ekranını ilk sütundaki bir Görüntü Modülüne yükleyin.

boyutlandırma

Ardından, tasarım sekmesine gidin ve 'Tam Genişliğe Zorla' seçeneğini etkinleştirin. Bunu yaptığınızda, görüntü sütunun tüm genişliğini kaplayacaktır.

• Tam Genişliği Zorla: Evet

aralık

Resmin boyutunu küçültmek için bazı özel sol ve sağ kenar boşlukları ekleyeceğiz. Ekran boyutu ne olursa olsun görüntünün boyutunun aynı kaldığından emin olmak için bir görüntü alanı birimi kullandığımızı fark edeceksiniz.

• Üst Marj: -10vw
• Sol Dolgu: 11vw
• Sağ Dolgu: 11vw

Sınır

Sonraki kenarlık ayarlarında köşelerin her birine '2vw' ekleyin.

Kutu Gölge

Bir kutu gölgesi ile birlikte.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.3)

Dönüştür Çeviri

Şimdi görüntüyü dönüştürmeye başlayabiliriz! Dönüştürme seçeneklerinin dönüştürme çevirisi sekmesine aşağıdaki değerleri ekleyin:

• Alt: -26vw
• Sağ: -2vw

Buraya eklediğiniz değerler resminizin genişliğine ve yüksekliğine bağlıdır, bu nedenle farklı bir resim kullanıyorsanız değerleri buna göre değiştirmeniz gerekecektir. Görüntünün konumunun tüm ekran boyutlarında aynı kaldığından emin olmak için görüntü alanı birimleri kullandığınızdan emin olun.

Dönüştür Döndür

Dönüştürme döndürme sekmesine gidin ve görüntüyü buna göre döndürün:

• Sol: 24deg
• Merkez: 46 derece
• Sağ: -7 derece

Eğriliği Çevir

Son olarak, aşağıdaki değerlerle skew çevirmeyi etkinleştirin:

• Alt: -4 derece
• Sağ: 24deg

Resim Modülü #2'yi Sütun 1'e ekleyin

Fotoğraf yükleniyor

Bir sonraki Görüntü Modülüne! Aşağıdaki yazdırma ekranını bilgisayarınıza kaydedin veya seçtiğiniz başka bir yazdırma ekranını kullanın:

Yazdırma ekranını sütun 1'deki ikinci Görüntü Modülüne yükleyerek devam edin.

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve 'Tam Genişliğe Zorla' seçeneğini etkinleştirin.

• Tam Genişliği Zorla: Evet

aralık

Boşluk ayarlarında bazı özel kenar boşluğu değerlerini kullanarak görüntünün boyutunu küçültüyor ve önceki görüntüyle örtüşmesini sağlıyoruz.

• Üst Marj: -81vw (Masaüstü), -50vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: 11vw
• Sağ Marj: 11vw

Sınır

Sonraki kenarlık ayarlarında köşelerin her birine '2vw' ekleyeceğiz.

Kutu Gölge

Ve biz de bir kutu gölgesi ekleyeceğiz. İkinci portföy öğesi görüntüsü için nasıl daha koyu bir kutu gölgesi kullandığımıza dikkat edin. Bu, portföy öğeleri arasında daha fazla derinlik oluşturmanıza yardımcı olacaktır.

• Kutu Gölge Bulanıklığı Gücü: 150 piksel
• Gölge Rengi: rgba(0,0,0,0.6)

Dönüştür Çeviri

Ardından, dönüştürme ayarlarına gidin ve dönüştürme dönüştürme değerlerini değiştirin:

• Alt: -8vw
• Sağ: 0 piksel

Yine, bu değerler baskı ekranını nasıl konumlandırmak istediğinize ve baskı ekranınızın boyutlarına bağlıdır. Görüntü ne kadar küçükse, daha büyük bir negatif değer kullanarak onu o kadar sola itmeniz gerekir.

Dönüştür Döndür

Dönüştürme döndürme sekmesine geçin ve üç değerle de oynayın.

• Sol: 24deg
• Merkez: 46 derece
• Sağ: -7 derece

Eğriliği Çevir

Son fakat en az değil, çevirme eğri değerlerini değiştirin:

• Alt: -4 derece
• Sağ: 24deg

Sütun 1'e Görüntü Modülü #3'ü ekleyin

Fotoğraf yükleniyor

Sütun 1'de ihtiyacımız olan bir sonraki ve son Görüntü Modülüne geçelim. Aşağıdaki yazdırma ekranını bilgisayarınıza kaydedin veya tercih ettiğiniz başka bir yazdırma ekranını kullanın:

Kaydettiğiniz yazdırma ekranını yeni bir Görüntü Modülüne ekleyin.

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve 'Tam Genişliğe Zorla' seçeneğini etkinleştirin.

• Tam Genişliği Zorla: Evet

aralık

Sonraki boşluk ayarlarına gidin ve kenar boşluğu değerlerini buna göre değiştirin:

• Üst Marj: -107vw
• Sol Kenar Boşluğu: 19vw
• Sağ Kenar Boşluğu: 19vw

Sınır

Görüntü Modülünün her bir köşesine '2vw' ekleyerek devam edin.

Kutu Gölge

Ardından bir kutu gölgesi ekleyin. Yine, önceki iki Görüntü Modülü için kullandığımızdan daha güçlü bir gölge rengi kullanıyoruz.

• Kutu Gölge Bulanıklığı Gücü: 200 piksel
• Gölge Rengi: rgba(0,0,0,0.82)

Dönüştür Çeviri

Ardından, dönüştürme ayarlarına gidin ve dönüştürme dönüştürme değerlerini değiştirin:

• Alt: -42vw
• Sağ: 11vw

Dönüştür Döndür

Dönüştürme döndürme sekmesine geçin ve orada da bazı değişiklikler yapın.

• Sol: 24deg
• Merkez: 46 derece
• Sağ: -7 derece

Eğriliği Çevir

Son olarak, öteleme eğri değerlerini değiştirin.

• Alt: -4 derece
• Sağ: 24deg

Sütun 2'ye Başlık Metin Modülü Ekle

H2 Kopyası Ekle

İkinci sütuna geç! Seçtiğiniz bazı H2 içeriğine sahip bir Metin Modülü ekleyin.

H2 Metin Ayarları

Sonraki H2 metin ayarlarına gidin ve bazı değişiklikler yapın.

• Başlık 2 Yazı Tipi: Roboto
• Başlık 2 Yazı Ağırlığı: İnce
• Başlık 2 Metin Hizalama: Sol
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu: 5vw (Masaüstü), 6vw (Tablet), 7vw (Telefon)
• Başlık 2 Harf Aralığı: -1px

aralık

Aralık ayarlarına bazı özel kenar boşluğu değerleri ekleyerek devam edin.

• Üst Marj: 35vw (Masaüstü), 10vw (Tablet), 0vw (Telefon)
• Sol Kenar Boşluğu: -4vw
• Sağ Kenar Boşluğu: 4vw

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

2. sütunda ihtiyacımız olan bir sonraki modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Renk

Ardından tasarım sekmesine gidin ve ayırıcı rengini değiştirin.

• Renk: #8193fa

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 8px
• Genişlik: %28

aralık

Ve bazı özel kenar boşluğu değerleri ekleyin.

• Üst Marj: 1vw
• Sol Kenar Boşluğu: -4vw
• Sağ Kenar Boşluğu: 4vw

Sütun 2'ye Açıklama Metni Modülü Ekle

İçerik Ekle

2. sütunda ihtiyacımız olan bir sonraki modül başka bir Metin Modülü. Seçtiğiniz bazı paragraf içeriği ekleyin.

Metin Ayarları

Ardından, metin ayarlarına gidin ve bazı değişiklikler yapın.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.6vw (Masaüstü), 1.2vw (Tablet), 1.8vw (Telefon)
• Metin Satırı Yüksekliği: 3,1em (Masaüstü), 2,7em (Tablet), 2,6em (Telefon)
• Metin Yönü: Sol

aralık

Daha sonra bazı özel kenar boşluğu değerleri ekleyin.

• Üst Marj: 1vw
• Sol Kenar Boşluğu: -4vw
• Sağ Kenar Boşluğu: 4vw

Sütun 2'ye Düğme Modülü Ekle

Kopya Ekle

Tasarımı tamamlamak için ihtiyacımız olan bir sonraki ve son modül bir Düğme Modülüdür. Seçimin bir kopyasını ekleyin.

Düğme Ayarları

Ardından tasarım sekmesine gidin ve düğme ayarlarını değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Renk 1: #5627ba
• Renk 2: #8fb5fc
• Gradyan Yönü: 122deg
• Düğme Kenar Genişliği: 0px
• Yazı Tipi Ağırlığı: Ultra Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Özel kenar boşluğunu ve dolgu değerlerini de değiştirin.

• Üst Marj: 2vw (Masaüstü), 3vw (Tablet), 5vw (Telefon)
• Alt Marj: 6vw (Tablet), 8vw (Telefon)
• Sol Kenar Boşluğu: -4vw
• Sağ Kenar Boşluğu: 4vw
• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)

Kutu Gölge

Son olarak, ince bir kutu gölgesi ekleyin ve işiniz bitti!

• Kutu Gölge Bulanıklığı Gücü: 40px
• Gölge Rengi: rgba(0,0,0,0.3)

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Bu gönderide, Divi'nin yeni dönüştürme seçenekleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, güzel ve görsel olarak çekici bir tasarım oluşturmak için portföy öğelerini üst üste koyduk. Ayrıca görüntülerin tüm ekran boyutlarında harika görünmesini sağladık. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!