Divi'nin Dönüştürme Seçenekleriyle Polaroid Kahraman Bölümü Oluşturma

Yaratıcı kahraman bölümleri, web sitelerini unutulmaz ve özel kılar. Bu polaroid kahraman bölümü tasarımı, eski bir yolculuk tutkusu hissini uyandırır. Sütun dönüştürme seçenekleri kullanılarak, polaroidler bir masaya yayılmış gibi istediğiniz şekilde düzenlenebilir.

Bu polaroid kahraman bölümü tasarımını kendi kare görüntülerinizle yeniden oluşturabilirsiniz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

masaüstü

Mobil

Polaroid Kahraman Bölüm Tasarımını ÜCRETSİZ İndirin

Ücretsiz polaroid kahraman bölümü tasarımına el atmak 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!

Youtube Kanalımıza Abone Olun

Yeniden Oluşturmaya Başlayalım

Yeni Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın.

Alt Bölücü

Nane yeşili alt bölücü ekleyin.

• Bölücü Yerleştirme: Alt
• Bölücü Stili: #12
• Bölücü Rengi: Nane Yeşili #d2f2d0
• Bölücü Yüksekliği: 23vw

aralık

Bölümün aralığını ayarlayın.

• Üst Marj: 7vw
• Alt Kenar Boşluğu: 0px
• Üst ve Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Bölümünüze yeni bir satır ekleyerek devam edin. Aşağıdaki sütun yapısını seçin:

boyutlandırma

Şimdi, satırın boyutunu ayarlayın.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: 90vw
• Maksimum Genişlik: %100

aralık

Ardından, boşluk ayarlarında üst ve alt dolguyu ayarlayın.

• Üst ve Alt Dolgu: 0px

Görüntülemek

Sütunları daha küçük ekran boyutlarında yan yana tutmak için satırın ana öğesine bir satır CSS kodu ekleyin.

• Özel CSS – Ana Öğe: display: flex;

display: flex;

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

Kare Resim Yükle

1. sütuna bir resim modülü ekleyin ve bir kare resim yükleyin.

hizalama

Şimdi, modül hizalamasını ayarlayın.

• Modül Hizalaması: Merkez

boyutlandırma

Ardından modülü tam genişlikte yapın.

• Tam Genişliği Zorla: Evet

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

İçerik Ekle

Bir metin modülü ekleyin ve biraz içerik ekleyin. "Polaroid" kelimesini kullanacağız.

Metin

Metin yazı tipine stil verin.

• Metin Yazı Tipi: Advent Pro
• Metin Hizalama: Merkez
• Metin Rengi: Çok Koyu Gri #474747
• Yazı Boyutu:
  • Masaüstü: 1vw
  • Tablet + Telefon: 2vw
• Metin Harf Aralığı: 0.1vw
• Metin Satır Yüksekliği: 1.8em

boyutlandırma

Boyutlandırma ayarlarında genişlik için '%100' kullanın.

• Genişlik: %100

aralık

Şimdi aralığı ayarlayın.

• Üst Marj: 1vw

Modülleri İki Kez Klonlayın ve Kopyaları Kalan Sütunlara Yerleştirin

Yinelenenlerin Resmini ve Kopyasını Değiştir

Her yinelenen görüntü modülündeki görüntüleri değiştirin. Tasarımınız gerektiriyorsa, metin içeriğini de değiştirin.

Sütun 1 Ayarları

Arka plan

Satırın 1. sütun ayarlarını açarak devam edin. Polaroid efekti oluşturmak için arka planı beyaza ayarlayın.

• Arka Plan Rengi: Beyaz #ffffff

aralık

Daha geniş polaroid alt kenarlığı oluşturmak için biraz alt dolgu ekleyin.

• Alt Dolgu: 2vw

Sınır

Polaroid görselini bitirmek için bir kenarlık ekleyin.

• 4-Yan Bordür Genişliği: 1vw
• Üst Kenar Genişliği: 2vw
• Sağ Kenar Genişliği: 2vw
• Alt Kenar Genişliği: 1vw
• Sol Kenar Genişliği: 2vw
• Kenar Rengi: Beyaz #ffffff

Kutu Gölge

İnce bir kutu gölgesi ekleyerek sütun 1 ayarlarını tamamlayın.

• Kutu Gölgesi: #1

Sütun 1 Ayarlarını Genişlet

Sütun ayarlarını genişletmek için stilleri genişlet seçeneğini kullanın.

• Ana satır ayarları penceresine dönün ve ilk sütun sekmesinin sağındaki üç noktayı tıklayın.
• 'Öğe stillerini genişlet'i seçin ve 'bu satır boyunca' seçeneğini belirleyin.

Sütun 1 Dönüştürme Stilleri

Şimdi, ilk sütundaki dönüştürme ayarlarını yapın.

• Dönüştür Çevir: x ekseni -11vw, y ekseni -6vw
• Dönüştür Döndür: 341 derece, 1. seçenek

Sütun 2 Dönüştürme Stilleri

Ardından, ikinci sütun için dönüştürme ayarlarını yapın.

• Dönüştür Çevir: x ekseni -22w, y ekseni 0vw
• Dönüştür Döndür: 10 derece, 1. seçenek

Sütun 3 Dönüştürme Stilleri

Son olarak, üçüncü sütun için dönüştürme ayarlarını yapın.

• Dönüşüm Ölçeği: Her iki eksende %68
• Dönüştür Çevir: x ekseni -46w, y ekseni 12vw
• Dönüştür Döndür: 31 derece, 1. seçenek

Yeni Bölüm Ekle

Arka plan

Yeni bir bölüm ekleyin ve bölüme nane yeşili bir arka plan uygulayın.

• Arka Plan Rengi: Nane Yeşili #d2f2d0

Alt Bölücü

Bölüme bir alt bölücü verin.

• Bölücü Yerleştirme: Alt
• Bölücü Stili: #12
• Bölücü Rengi: Beyaz #ffffff
• Bölücü Yüksekliği: 23vw

aralık

Varsayılan üst dolguyu kaldırın.

• Üst Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

3 sütunlu yeni bir satır ekleyerek devam edin.

Satır Stillerini Kopyala ve Yapıştır

Tel kafes görünümünü kullanarak, ilk bölümdeki satır stillerini kopyalayıp yapıştırın

• İlk olarak, ilk bölümün içindeki satır menüsünün sağındaki üç noktayı tıklayın. 'Satır stillerini kopyala'yı seçin.
• Ardından ikinci bölümdeki satır menüsünün sağındaki üç noktayı tıklayın. 'Satır stillerini yapıştır'ı seçin.

Sütun Ayarlarını Kopyala ve Yapıştır

Şimdi, ilk satırdaki sütun ayarlarını kopyalayın ve yeni satırdaki 1. ve 2. sütunlara yapıştırın.

• İlk olarak, ilk satırdaki satır ayarlarını açın.
• İkinci olarak, ilk sütun sekmesinin sağ tarafındaki üç noktayı tıklayın ve 'öğe stillerini kopyala'yı seçin.
• Ardından, yeni satıra ilerleyin ve ayarlar sekmesini açın.
• Son olarak, ilk sütunun sağ tarafındaki üç noktayı tıklayın ve 'öğe stillerini yapıştır' seçeneğini seçin.

Sütun 1 Dönüştürme Stilleri

Şimdi, 1. sütundaki dönüştürme stillerini ayarlayın.

• Dönüştürme Ölçeği: Her iki eksende %75
• Dönüştür Çevir: x ekseni -8w, y ekseni -14vw
• Dönüştür Döndür: 35 derece 1. seçenek

Sütun 2 Dönüştürme Stilleri

Ardından, 2. sütundaki dönüştürme stillerini değiştirin.

• Dönüştür Çevir: x ekseni -17w, y ekseni 2vw
• Dönüştür Döndür: 346 derece 1. seçenek

Görüntü Modülleri Ekle

Görüntü Modüllerini Çoğalt ve Sürükle

Şimdi, iki görüntü modülünü çoğaltmak ve sürüklemek için tel kafes görünümüne dönün.

• İlk olarak, ilk bölümdeki ilk görüntü modülünü iki kez çoğaltın.
• Ardından, bunları ikinci bölümün birinci ve ikinci sütunlarına sürükleyin.
• Yeni bir kare görüntü için her modüldeki görüntüyü değiştirin.

Metin Modülleri Ekle

Metin Modüllerini Çoğalt ve Sürükle

Resimlerden sonra aynısını metin modülleri ile yapın. İlk bölümden kopyalayın ve ikinci bölüme sürükleyin.

• Tel çerçeve görünümünde, ilk bölümdeki ilk sütundaki metin modülünü iki kez çoğaltın.
• Şimdi yeni metin modüllerini ikinci bölümdeki 1. ve 2. sütunlara sürükleyin.
• İçeriği değiştirmek istiyorsanız, şimdi yapın.

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

İçerik Ekle

Üçüncü sütundaki artı sembolüne tıklayın ve bir metin modülü ekleyin. Biraz H2 ve paragraf içeriği ekleyin.

Metin

Metni aşağıdaki gibi stillendirin.

• Metin Yazı Tipi: Advent Pro
• Metin Hizalama: Merkez
• Metin Rengi: Koyu Gri #848484
• Yazı Boyutu:
  • Masaüstü: 1vw
  • Tablet + Telefon: 1.9vw
• Metin Harf Aralığı: 0.1vw
• Metin Satır Yüksekliği:
  • Masaüstü: 1.2em
  • Tablet + Telefon: 1.3em

Başlık Metni

Şimdi, H2 metnini biçimlendirin.

• Başlık: H2
• H2 Yazı Tipi: Adamina
• H2 Yazı Ağırlığı: Kalın
• H2 Yazı Tipi Rengi: Çok Koyu Gri #444444
• H2 Yazı Tipi Boyutu:
  • Masaüstü: 2vw
  • Tablet + Telefon: 3vw
• H2 Harf Aralığı: 4px
• H2 Çizgi Yüksekliği:
  • Masaüstü: 1.7vw
  • Tablet + Telefon: 1.5vw

boyutlandırma

Ardından, boyutu ayarlayın.

• Genişlik:
  • Masaüstü: %60
  • Tablet: %91
  • Telefon: %100
• Modül Hizalaması: Merkez

aralık

Son olarak, aralığı ayarlayın.

• Üst Marj: -12vw

Sütun 3'e Düğme Modülü Ekle

Kopya Ekle

Metnin altındaki artı sembolüne tıklayın ve bir düğme modülü ekleyin. Düğmeye biraz kopya ekleyin.

hizalama

Düğme hizalamasını değiştirin.

• Hizalama: Merkez

Özel Düğme Stilleri

Düğmeyi buna göre şekillendirin.

• Düğme Metin Boyutu:
  • Masaüstü: 1vw
  • Tablet: 2.4vw
  • Telefon: 2.3vw
• Düğme Kenar Genişliği: 0px
• Düğme Metin Rengi: Siyah #000000
• Düğme Harf Aralığı: 4px
• Düğme Yazı Tipi: Advent Pro
• Düğme Yazı Ağırlığı: Kalın

aralık

Bir üst kenar boşluğu değeri uygulayın.

• Üst Marj: 2vw

Sütun 3'e Bölücü Modülü Ekle

görünürlük

Düğmenin altına bir ayırıcı ekleyin ve aşağıdaki gibi stil verin.

• Görünürlük: Evet

Hat

Ayırıcıya parlak yeşil bir renk verin.

• Çizgi Rengi: #55f252

boyutlandırma

Ayırıcının boyutlandırma ayarlarını değiştirin ve işiniz bitti!

• Bölücü Ağırlığı
  • Masaüstü: 7 piksel
  • Tablet + Telefon: 4px
• Genişlik:
  • Masaüstü: %10
  • Tablet + Telefon: %30
• Modül Hizalaması: Merkez

Ön izleme

Polaroid kahraman bölümünün farklı ekran boyutlarındaki bitmiş tasarımına tekrar bir göz atalım.

masaüstü

Mobil

Bu bir Sargı!

Bu yazıda, Divi'nin dönüştürme seçeneklerini kullanarak bir polaroid kahraman bölümünü nasıl yeniden oluşturacağınızı gösterdik. Bu, sayfanızın kahraman bölümünde birden fazla görsel sergilemenin harika bir yoludur. Bu tasarımın kendi yaratıcı kahraman bölümü tasarımlarınıza ilham vereceğini umuyoruz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun.