Divi ile Parşömen Üzerinde Güzel Bir Sütun Çarpışan Kahraman Bölümü Nasıl Oluşturulur

Divi'nin kaydırma efektleri, oluşturduğunuz web sitelerine bir sürü yeni tasarım olanağı getiriyor. Eklemeyi seçtiğiniz ince etkileşimler, web sitenizin genel görünümünü ve hissini yükseltmeye gerçekten yardımcı olabilir. Kaydırma efektlerini senkronize ettiğiniz anda her şey daha da iyi hale geliyor. Bu eğitimde, özellikle kaydırmada güzel bir sütun çarpışan kahraman bölümü oluşturmayı ele alacağız. Kahraman bölümü tasarımı, kaydırma üzerinde iki farklı sütunu birleştirir ve bu da kopyanın vurgulanmasına yardımcı olur. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

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

masaüstü

Mobil

Sütun Çarpışan Kahraman Bölüm Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz sütun çarpışan kahraman bölümü 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.

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!

Kahraman Bölümü Bölüm Düzenini Yeniden Oluştur

Yeni Bölüm Ekle

Arka plan rengi

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #f4f2f7

aralık

Tüm bölümlerin varsayılan üst ve alt dolgusunu da kaldırın.

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

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ı buna göre değiştirin:

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

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

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

taşmalar

Ve satırın taşmalarını gizleyin.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Sütun 1 Ayarları

aralık

Ardından, sütun 1 ayarlarını açın ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 15vw
• Alt Dolgu: 10vw
• Sol Dolgu: 5vw
• Sağ Dolgu: 5vw

Z İndeksi

Sütunun z dizinini de artırın.

• Z İndeksi: 12

Sütun 2 Ayarları

Arka plan görüntüsü

Sütun 2 ayarlarını açarak devam edin ve seçtiğiniz bir arka plan resmini yükleyin.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Normal

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

H1 İçeriği Ekle

Sütun 1'deki ilk Metin Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bazı H1 içeriğini ekleyin.

H1 Metin Ayarları

Modülün tasarım sekmesine gidin ve H1 metin ayarlarını buna göre değiştirin:

• Başlık Yazı Tipi: Işığa Gölgeler
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Rengi: #000000
• Başlık Metni Boyutu: 6vw (Masaüstü), 11vw (Tablet), 13vw (Telefon)
• Başlık Harf Aralığı: -2px
• Yön Çizgisi Yüksekliği: 1.2em

aralık

Biraz üst kenar boşluğu da ekleyin.

• Üst Marj: 10vw

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

İçerik Ekle

Seçtiğiniz bazı açıklama içeriğine sahip başka bir Metin Modülü ekleyin.

Metin Ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #1e1e1e
• Metin Boyutu: 0.9vw (Masaüstü), 1.9vw (Tablet), 3vw (Telefon)
• Metin Satırı Yüksekliği: 2.4em

aralık

Ve farklı ekran boyutlarına bazı özel kenar boşlukları değerleri ekleyin.

• Üst Marj: 4vw (Masaüstü), 8vw (Tablet), 12vw (Telefon)
• Alt Kenar Boşluğu: 4vw (Masaüstü), 8vw (Tablet), 12vw (Telefon)

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

Kopya Ekle

Bu sütunda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Modülün düğme ayarlarını aşağıdaki gibi değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel

• Düğme Yazı Tipi: Sans'ı Aç

aralık

Ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyerek düğme ayarlarını tamamlayın.

• Ü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)

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

İçerik Ekle

İkinci sütunda ihtiyacımız olan tek modül bir Metin Modülü. Seçtiğiniz bazı içeriği girin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Işığa Gölgeler
• Metin Rengi: rgba(0,0,0,0.25)
• Metin Boyutu: 9vw (Masaüstü), 14vw (Tablet ve Telefon)
• Metin Harf Aralığı: -3px
• Metin Satırı Yüksekliği: 1em
• Metin Hizalama: Orta (Masaüstü), Sol (Tablet ve Telefon)

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 5vw (Masaüstü),
• Alt Dolgu: 60vw (Tablet ve Telefon)
• Sol Dolgu: 5vw (Tablet ve Telefon)

Kaydırma Animasyonlarını Uygula

Bölüm

Yukarı ve Aşağı Ölçekleme

Tüm modülleriniz yerleştirildikten sonra, kaydırma efektlerini uygulama zamanı! Önce bölüm ayarlarını açın ve aşağıdaki yukarı ve aşağı ölçekleme efektini kullanın:

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir
• Başlangıç ​​Ölçeği: %100 (%49'da)
• Orta Ölçek:
  • Masaüstü: %70 (%100'de)
  • Tablet ve Telefon: %100 (%100'de)
• Bitiş Ölçeği:
  • Masaüstü: %70
  • Tablet ve Telefon: %100

Sütun 1

Yatay Hareket

Sütun 1 ayarlarını açarak devam edin ve aşağıdaki yatay hareket efektini kullanın:

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 0
• Orta Ofset:
  • Masaüstü: 0 (%65'te)
  • Tablet ve Telefon: 0 (%93'te)
• Bitiş Ofseti:
  • Masaüstü: 6
  • Tablet & Telefon: 0

Yukarı ve Aşağı Ölçekleme

Sütuna da yukarı ve aşağı ölçeklendirme efekti uygulayın.

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: Evet
• Başlangıç ​​Ölçeği:
  • Masaüstü: %10
  • Tablet ve Telefon: %100
• Orta Ölçek:
  • Masaüstü: %90
  • Tablet ve Telefon: %100
• Bitiş Ölçeği: %100

2. sütun

Yatay Hareket

Ardından, sütun 2 ayarlarını açın ve aşağıdaki yatay hareket ayarlarını kullanın:

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 0
• Orta Ofset:
  • Masaüstü: 0 (%53'te)
  • Tablet ve Telefon: 0 (%56'da)
• Bitiş Ofseti:
  • Masaüstü: -6 (%53'te)
  • Tablet ve Telefon: 0 (%100'de)

İçeri ve Dışarı Soluk

Bir solma ve sönme efekti ekleyerek sütun ayarlarını tamamlayın.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %100 (%47'de)
• Orta Opaklık:
  • Masaüstü: %0 (%47'de)
  • Tablet ve Telefon: %100 (%47'de)
• Opaklığı Sonlandırma:
  • Masaüstü: %0
  • Tablet ve Telefon: %100

Ö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

Son düşünceler

Bu gönderide, sütun çarpışan bir kahraman bölümü oluşturmak için Divi'nin kaydırma efektlerini yaratıcı bir şekilde nasıl kullanacağınızı gösterdik. Ziyaretçiler sayfayı kaydırır kaydırmaz, iki farklı sütun ve öğeleri birleşmeye başlayacaktır. Bu da, kopyayı daha da vurgulamanıza izin verecektir. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.