Divi ile Zarif Bölünmüş Görüntü Ürün Bilgisi Bölümleri Nasıl Oluşturulur

Görsellerle yaratıcı olmak, CTA'larınıza dikkat çekmenize kesinlikle yardımcı olabilir. Bu gönderide, Divi ile güzel bir bölünmüş görüntü ürün bilgisi bölümünü nasıl yeniden oluşturacağınızı göstereceğiz. Yeniden yarattığımız tasarım güzel, göz alıcı ve ihtiyaçlarınıza göre özelleştirilebilir. Tasarımın JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

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

masaüstü

Mobil

Ücretsiz Bölünmüş Görüntü Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz bölünmüş görüntü düzenine 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.

Youtube Kanalımıza Abone Olun

Photoshop ve Illustrator ile Bölünmüş Görüntü Efekti Oluşturun

Divi'yi kullanmaya başlamadan önce, yüklenmeye hazır bir dizi görüntüye sahip olmanız gerekir. Bu bir bölünmüş görüntü efekti olduğundan, birbirine iyi uyan iki görüntüye ihtiyacınız vardır. İki farklı resim boyutuna ihtiyacınız olacak: masaüstü için 960 piksel genişlik ve 1200 piksel yükseklik ve tabletler ve mobil cihazlar için 600 piksel genişlik ve 1200 piksel yükseklik.

Adım 1: Görüntüleri Seçin

Ürünlerinizin iki HD görüntüsünü seçin.

2. Adım: Arka Planı Silin

Kesikler oluşturmak için arka planları silin. İstediğiniz programı kullanabilirsiniz. Ama işte Photoshop için adım adım bir kılavuz.

3. Adım: Illustrator'da Yeni Bir Proje Açın

Illustrator'da 1920 piksel genişliğinde ve 1200 piksel yüksekliğinde yeni bir proje açın.

Adım 4: Bir Dikey Kılavuz ekleyin.

Boş tuvalin ortasından dikey bir kılavuz ekleyin. Tam merkezde olduğundan emin olun.

Adım 5: Kesilmiş Görüntüleri İçe Aktarın veya Yerleştirin

Her iki kesilmiş görüntüyü de tuval üzerine yerleştirin.

Adım 6: Bölmeyi Görselleştirmeye Başlayın

Her görüntünün iki kopyasını yapın. Bunları farklı noktalarda ikiye bölmek için kırpma işlevini kullanın. Önce merkezden, sonra kopyalar için biraz daha az ve biraz daha fazla. Artık her görüntünün üç bölünmüş versiyonuna sahip olacaksınız.

7. Adım: Efekti Sonlandırın

Farklı bölünmüş kesikleri kullanarak resimleriniz için en iyi kompozisyonu bulun. Her görüntünün düz kenarının tuval üzerindeki orta kılavuz üzerinde olduğundan emin olun. Daha iyi sığdırmak için görüntülerin boyutunu değiştirmeyi deneyin. Tuvalin tam genişlikte bir ekran boyutuna sahip olduğunu unutmayın, bu nedenle görüntülerin boyutunu buna göre ayarlayın.

8. Adım: Yarısını Kırp Kaydedin

Tasarım bittiğinde, fazladan kesiklerden kurtulun. Her görüntünün düz kenarının orta kılavuza değdiğini iki kez kontrol edin. İki yeni çalışma yüzeyi oluşturun ve bunları orta kılavuzda ayrıldıklarından emin olarak her iki tarafa sığacak şekilde yeniden boyutlandırın. Web için dışa aktarın, her seferinde bir çalışma yüzeyi ve .png olarak kaydedin. Şimdi, iki farklı resminiz var. Hem 960 piksel genişliğinde hem de 1200 piksel yüksekliğinde.

9. Adım: Tablet ve Mobil için Yeniden Boyutlandırın

Her iki resmi de 960 piksel genişliğe ve 1200 piksel yüksekliğe yeniden boyutlandırın. Yalnızca saydam arka planı kırptığınızdan emin olun, resme dokunmayın. Resmin yanındaki çapa ile tuval boyutunu değiştirerek Photoshop'ta yaptım.

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Arka plan

Eğitimin ilk bölümünü tamamladığımıza göre, şimdi Divi'yi kullanma zamanı! Yeni bir sayfa oluşturun veya mevcut bir sayfaya yeni bir bölüm ekleyin. Bölüme bir degrade arka planı ekleyin.

• Arka plan: Gradyan
• Birinci Renk: Kapalı Beyaz #f7f7f7
• İkinci Renk: Taze Yeşil #b7e778
• Gradyan Yönü: 90deg
• Başlangıç ​​ve Bitiş Konumu: %50

aralık

Daha sonra bölümün boşluk ayarlarını değiştirin.

• Üst Dolgu: 5vw
• Alt Dolgu: 12vw

görünürlük

Son olarak, görünürlüğü ayarlayın.

• Dikey ve Yatay Taşma: Gizli

1. Satır Ekle

Sütun Yapısı

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

boyutlandırma

Satırın boyutlandırma ayarlarını yapın.

• Oluk Genişliği: 2
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst ve Alt Dolgu: 2vw

Sütun 1 Ayarları

dönüştürmek

Sonraki sütun 1 ayarlarına gidin ve dönüştürme çevirme değerlerini değiştirin.

• Dönüştür Çevir: -2vw y ekseni

Sütun 2 Ayarları

dönüştürmek

2. sütun için de aynısını yapın.

• Dönüştür Çevir: 2vw x ekseni

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! Seçtiğiniz bazı H2 içeriğiyle sütun 1'e bir metin modülü ekleyin.

Başlık Metni

Tasarım sekmesinde başlık metni ayarlarını değiştirin.

• Başlık Metni Düzeyi: H2
• H2 Yazı Tipi: Corben
• H2 Hizalama:
  • Masaüstü: Sol
  • Tablet + Telefon: Merkez
• H2 Metin Rengi: Çok Koyu Gri #3a3a3a
• H2 Metin Boyutu:
  • Masaüstü: 7vw
  • Tablet + Telefon: 16vw

aralık

Ardından, aralığı ayarlayın.

• Sağ Kenar Boşluğu:
  • Masaüstü: -1vw
  • Tablet + Telefon: 0vw
• Sağ Dolgu:
  • Tablet + Telefon: 35vw

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

Şimdi ikinci sütuna bir metin modülü ekleyin. Seçtiğiniz bazı H2 içeriğini ekleyin.

Başlık Metni

Ardından, başlık metnini aşağıdaki gibi biçimlendirin.

• Başlık Metni Düzeyi: H2
• H2 Yazı Tipi: Corben
• H2 Hizalama:
  • Masaüstü: Sol
  • Tablet + Telefon: Sağ
• H2 Metin Rengi: Çok Koyu Gri #3a3a3a
• H2 Metin Boyutu:
  • Masaüstü: 7vw
  • Tablet + Telefon: 14vw

aralık

Son olarak, aralığı ayarlayın.

• Üst boşluk:
  • Tablet: -12vw
  • Telefon: -14vw
• Sol Kenar Boşluğu:
  • Masaüstü + Tablet: -0.5vw
• Sağ Dolgu:
  • Tablet + Telefon: 17vw

2. Satır Ekle

Sütun Yapısı

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

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarını yapın.

• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki boşluk ayarlarını değiştirin.

• Üst boşluk:
  • Masaüstü: -15vw
  • Tablet: -36vw
  • Telefon: -40vw
• Üst ve Alt Dolgu:
  • Masaüstü: 0vw
  • tablet: 9vw
  • Telefon: 12vw

Özel CSS

Satırın ana öğesine tek bir CSS kodu satırı ekleyerek satır ayarlarını tamamlayın. Bu, görüntüleri bir arada tutmaya yardımcı olacaktır.

• Ana Öğe: ekran: esnek;

display: flex;

Sütun 1'e Görüntü Modülü Ekle

Resim eklemek

Sol yarım resmi sütun 1'e ekleyin.

• Resim:
  • Masaüstü: 960 piksel genişliğindeki görüntü
  • Tablet + Telefon: 600 piksel genişliğindeki resim

boyutlandırma

Görüntü modülünü tam genişlikte yapın.

• Tam Genişliği Zorla: evet

Sütun 2'ye Görüntü Modülü Ekle

Resim eklemek

Sağdaki yarım resmi 2. sütuna ekleyin.

• Resim:
  • Masaüstü: 960 piksel genişliğindeki görüntü
  • Tablet + Telefon: 600 piksel genişliğindeki resim

boyutlandırma

Bu görüntü modülünü de tam genişlikte yapın.

• Tam Genişliği Zorla: evet

3. Satır Ekle

Sütun Yapısı

Bir sonraki sıraya! Aşağıdaki sütun yapısını seçin:

boyutlandırma

Satırın boyutunu aşağıdaki gibi ayarlayın:

• Oluk Genişliği: 4
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Ardından, aralığı ayarlayın.

• Üst boşluk:
  • Masaüstü: -38vw
  • Tablet + Telefon: -14vw

Sütun 1 Ayarları

aralık

Modülleri eklemeden önce sütunlardaki aralığı ayarlayın. Sütun 1 ile başlayın.

• Sol Dolgu:
  • Masaüstü: 7vw
  • Tablet + Telefon: 12vw
• Sağ Dolgu:
  • Masaüstü: 15vw
  • Tablet + Telefon: 12vw

Sütun 2 Ayarları

aralık

Ardından, sütun 2 boşluk ayarlarını yapın

• Sol Dolgu:
  • Masaüstü: 15vw
  • Tablet + Telefon: 12vw
• Sağ Dolgu:
  • Masaüstü: 7vw
  • Tablet + Telefon: 12vw

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Sütun 1'e bir metin modülü ekleyin ve seçtiğiniz bazı H3 içeriğini ekleyin.

Arka plan

Arka plan rengini değiştirin.

• Arka plan rengi
• Renk: Çok Koyu Gri #333333

Başlık Metni

Ardından, başlık metnine stil verin.

• Başlık Metni Düzeyi: H3
• H3 Yazı Tipi: Corben
• H3 Hizalama: Merkez
• H3 Yazı Tipi Rengi: Kapalı Beyaz #f7f7f7
• H3 Yazı Tipi Boyutu:
  • Masaüstü: 2.2vw
  • Tablet: 6.4vw
  • Telefon: 7vw
• H3 Harf Aralığı: 3 piksel

aralık

Daha sonra bazı özel boşluk değerleri ekleyin.

• Üst Dolgu:
  • Masaüstü + Tablet: 0.2vw
  • Telefon: 1vw
• Alt Dolgu:
  • Masaüstü: 0.5vw
  • Tablet: 1.2vw
  • Telefon: 1vw

Sınır

Bazı yuvarlatılmış köşeler ekleyerek modülün ayarlarını tamamlayın.

• Yuvarlatılmış Köşeler: Dört köşenin tümü 1vw

Metin Modülünü Çoğalt ve Sütun 2'ye Sürükle

Şimdi metin modülünü çoğaltın ve 2. sütuna sürükleyin.

İçeriği değiştir

Elbette, yinelenen metin modülündeki içeriği değiştirmeniz gerekecektir.

Eylem Çağrısı Modülünü Sütun 1'e Ekle

İçerik Ekle

1. sütundaki metin modülünün altına, seçtiğiniz içerikle bir harekete geçirici mesaj modülü ekleyin.

• Başlık
• Buton
• Vücut

Link ekle

CTA'nın düğmesine bir bağlantı ekleyerek devam edin.

Arka plan

Ve tablete ve cep telefonuna bir arka plan rengi ekleyin.

• Arka plan rengi:
  • Tablet + Telefon: Kapalı Beyaz #f7f7f7

Başlık Metni

Tasarım sekmesinde H4 metin ayarlarına stil verin.

• Başlık Metni Düzeyi: H4
• H4 Yazı Tipi: Açık Sans
• H4 Renk: Çok Koyu Gri #333333
• H4 Metin Boyutu:
  • Masaüstü: 1.4vw
  • Tablet: 4.5vw
  • Telefon: 7vw
• H3 Harf Aralığı: 2px
• H3 Çizgi Yüksekliği: 1.5em

Gövde metni

Sonraki gövde metni ayarlarını değiştirin.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Hizalama: Orta
• Gövde Metni Rengi: Çok Koyu Gri #333333
• Gövde Yazı Tipi Boyutu:
  • Masaüstü: 0.9vw
  • Tablet: 3vw
  • Telefon: 4vw
• Gövde Çizgisi Yüksekliği: 1.8em

Buton

Düğmeye de stil verin.

• Düğme Metin Boyutu:
  • Masaüstü: 1vw
  • Tablet: 2.2vw
  • Telefon: 3.8vw
• Düğme Yazı Tipi Rengi: Çok Koyu Gri #333333
• Düğme Arka Plan Rengi:
  • Tablet + Mobil: Taze Yeşil #b7e778
• Düğme Kenar Genişliği:
  • Masaüstü: 1 piksel
• Düğme Kenar Rengi:
  • Masaüstü: Çok Koyu Gri #333333
• Düğme Sınır Yarıçapı: 1vw

aralık

Ve bazı özel boşluk değerleri ekleyin.

• Üst boşluk:
  • Masaüstü + Tablet: -2vw
  • Telefon: 3vw
• Sol ve Sağ Dolgu:
  • Masaüstü: 0vw
  • Tablet + Telefon: 4vw

Sınır

Son olarak, kenarlığı farklı ekran boyutlarına göre şekillendirin.

• Yuvarlatılmış Köşeler: 1vw tüm köşeler
• Kenar Stilleri:
  • Tablet + Telefon: dört taraf
• Sınır Genişliği:
  • Tablet + Telefon: 1 piksel
• Sınır rengi:
  • Tablet + Telefon: Çok Koyu Gri #333333

Eylem Çağrısı Modülünü Çoğalt ve Sütun 2'ye Sürükle

Eylem çağrısı modülünü çoğaltın ve 2. sütuna sürükleyin.

İçeriği değiştir

Tasarımı tamamlamak için, yinelenen harekete geçirici mesaj modülündeki içeriği değiştirin ve işiniz bitti!

Ön izleme

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

masaüstü

Mobil

Çözüm

Bu gönderide, Divi ile bölünmüş görüntü ürün bilgisi bölümünün nasıl oluşturulacağını gösterdik. Görüntü düzenleme yazılımı kullanarak bölünmüş görüntülerin nasıl oluşturulacağını açıkladık ve Divi tasarımımızdaki dosyaları kullanmaya devam ettik. Bu tasarımın, kendi ürün görsellerinizle yaratıcı olmanız için size ilham vereceğini umuyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!