Ana İçeriğe Geç

Divi'de güzel bir sütun çarpışma bölümü nasıl oluşturulur

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Divi'nin kaydırma efektleri, oluşturduğunuz web sitelerine tonlarca yeni tasarım olanağı getirir. Eklemeyi seçtiğiniz ince etkileşimler, web sitenizin genel görünümünü geliştirmeye gerçekten yardımcı olabilir. Kaydırma efektlerini senkronize ettiğiniz anda her şey daha da iyi hale gelir. Bu eğitimde, parşömen üzerindeki sütunlarla çarpışan güzel bir kahraman bölümünün oluşturulmasını özellikle yöneteceğiz. Kahraman bölümü tasarımı, kaydırma üzerindeki iki farklı sütunu birleştirerek kopyayı vurgulamaya yardımcı olur. 

Olası Sonuç

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca bir göz atalım.

Divi bölümü çarpışması

Kahraman Bölümü'nün düzenini yeniden oluşturun

Yeni bölüm ekle

Arka plan rengini özelleştirme

Ü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
Divi bölümü yapılandırması

aralık

Ayrıca varsayılan üst ve alt dolguyu tüm bölümlerden kaldırın.

  • Üst dolgu: 0 piksel
  • Alt doldurma: 0px
Divi aralığı yapılandırması

Yeni bir satır ekle

Sütun yapısı

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

Divi sütunlarının düzeni

boyutlandırma

Henüz modül eklemeden, çizgi parametrelerini açın ve boyutlandırma parametrelerini uygun şekilde değiştirin:

  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 1
  • Sütun yüksekliklerini eşitle: Evet
  • Genişlik:% 100
  • Maksimum genişlik:% 100
Divi satır aralığı yapılandırması

aralık

Ardından, varsayılan üst ve alt dolguların tümünü kaldırın.

  • Üst dolgu: 0 piksel
  • Alt doldurma: 0px
Divi satır aralığı

taşmaları

Ve sıranın taşmalarını gizleyin.

  • Yatay taşma: gizli
  • Dikey taşma: gizli
Divi görünürlük hattı yapılandırması

Sütun 1 ayarları

aralık

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

  • Üst dolgu: 15vw
  • Alt doldurma: 10vw
  • Sol dolgu: 5vw
  • Sağ dolgu: 5vw
Divi satır sütun aralığı yapılandırması

Z Endeksi

Ayrıca sütunun z dizinini artırın.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

  • Z Endeksi: 12
Göreli konum divi

Sütun 2 ayarları

Arka plan resmi

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

  • Arka Plan Resim Boyutu: Kapak
  • Arka plan resminin konumu: Merkez
  • Arka plan görüntüsünü tekrarlayın: tekrar yok
  • Arka plan resimlerini karıştırma: Normal
Divi sütun arka planı

1 metin modülünü 1 sütununa ekle

H1 içeriği ekle

1. sütundaki ilk metin modülünden başlayarak modüller eklemenin zamanı geldi. İstediğiniz H1 içeriğini ekleyin.

Serbest yardım divi

H1 metin ayarları

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

  • Başlık yazı tipi: Işıktaki gölgeler
  • Başlık yazı tipi ağırlığı: kalın
  • Üstbilgi Metin Rengi: # 000000
  • Başlık Metin Boyutu: 6vw (masaüstü), 11vw (tablet), 13vw (telefon)
  • Başlık Harf Aralığı: -2px
  • Kafa hattı yüksekliği: 1.2em
Divi yazı tipi yapılandırması

aralık

Ayrıca bir üst kenar boşluğu ekleyin.

  • Üst kenar boşluğu: 10vw
Metin aralığı yapılandırması

2 metin modülünü 1 sütununa ekle

İçerik ekle

İstediğiniz açıklama içeriğine sahip başka bir metin modülü ekleyin.

Metin sütunu 1 divi ekle

Metin ayarları

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

  • Metin yazı tipi: Açık Sans
  • Metin rengi: # 1e1e1e
  • Metin boyutu: 0.9vw (masaüstü), 1.9vw (tablet), 3vw (telefon)
  • Metin satır yüksekliği: 2,4 em
Divi metin yazı tipi özelleştirme

aralık

Ve farklı ekran boyutlarında özel kenar boşluğu değerleri ekleyin.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • Üst marj: 4vw (masaüstü), 8vw (tablet), 12vw (telefon)
  • Alt kenar boşluğu: 4vw (masaüstü), 8vw (tablet), 12vw (telefon)
Divi metin aralığı yapılandırması

1 sütununa bir düğme modülü ekleyin

Bir kopya ekle

Bu sütunda ihtiyacımız olan bir sonraki ve son modül bir düğme modülüdür. Seçtiğinizin bir kopyasını ekleyin.

Divi düğme modülü ekle

Düğme ayarları

Modül düğmelerinin parametrelerini aşağıdaki gibi değiştirin:

  • Düğme için özel stiller kullan: Evet
  • Düğme metni boyutu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
  • Düğme metni rengi: #ffffff
  • Düğme arka plan rengi: # 000000
  • Düğme kenarlığı genişliği: 0 piksel
  • Düğme kenarlığı yarıçapı: 100 piksel
Özel stil düğmesi divi
  • Düğme yazı tipi: Olmadan aç
Yazı tipi düğmesi parametre ayarları

aralık

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

  • Üst dolgu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
  • Alt dolgu: 1vw (masa), 2vw (tablet), 3vw (telefon)
  • Sol doldurma: 3vw (masaüstü), 5vw (tablet), 7vw (telefon)
  • Sağ dolgu: 3vw (masa), 5vw (tablet), 7vw (telefon)
Divi düğme aralığı

2 sütununa bir metin modülü ekleyin

İçerik ekle

İkinci sütunda ihtiyacımız olan tek modül bir metin modülüdür. Seçtiğiniz içeriği girin.

Metin sütunu 2 divi

Metin ayarları

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

  • Metin yazı tipi: ışıktaki gölgeler
  • Metin rengi: rgba (0,0,0,0,25)
  • Metin boyutu: 9vw (masaüstü), 14vw (tablet ve telefon)
  • Metin harf aralığı: -3 piksel
  • Metin satırının yüksekliği: 1em
  • Metin hizalama: merkez (ofis), sol (tablet ve telefon)
Jane doe metin sütunu 2 divi

aralık

Ayrıca özel dolgu değerleri ekleyin.

  • Üst dolgu: 5vw (masa),
  • Alt dolgu: 60vw (tablet ve telefon)
  • Sol dolgu: 5vw (tablet ve telefon)
Divi metin aralığı

Kaydırma animasyonlarını uygulama

Bölüm

Tırmanış ve iniş

Tüm modlarınız yerleştirildikten sonra, kaydırma efektlerini uygulama zamanı! Önce bölüm parametrelerini açın ve aşağıdaki ölçeklendirme efektini kullanın:

  • Sclaing'i yukarıdan aşağıya etkinleştir
  • Başlangıç ​​ölçeği:% 100 (% 49'a kadar)
  • Orta ölçek:
    • Ofis:% 70 (% 100)
    • Tablet ve telefon:% 100 (% 100)
  • Son ölçek:
    • Ofis:% 70
    • Tablet ve telefon:% 100
Kaydırma efekti animasyon divi

Sütun 1

Yatay hareket

1. sütundaki ayarları açarak devam edin ve aşağıdaki yatay hareket efektini kullanın:

  • Yatay hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti: 0
  • Ortalama ofset:
    • Ofis: 0 (% 65'de)
    • Tablet ve telefon: 0 (% 93)
  • Bitiş ofseti:
    • Ofis: 6
    • Tablet ve telefon: 0
Divi yatay hizalaması

Tırmanış ve iniş

Ayrıca, sütuna bir yukarı ve aşağı ölçekleme efekti uygulayın.

  • Yukarı ve aşağı ölçeklemeyi etkinleştirin: Evet
  • Başlangıç ​​ölçeği:
    • Ofis:% 10
    • Tablet ve telefon:% 100
  • Orta ölçek:
    • Ofis:% 90
    • Tablet ve telefon:% 100
  • Son ölçek:% 100
sütunlarla çarpışan kahramanlar bölümü

Sütun 2

Yatay hareket

Ardından sütun 2'deki parametreleri açın ve aşağıdaki yatay hareket parametrelerini kullanın:

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

  • Yatay hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti: 0
  • Ortalama ofset:
    • Ofis: 0 (% 53'de)
    • Tablet ve telefon: 0 (% 56)
  • Bitiş ofseti:
    • Ofis: -6 (% 53'de)
    • Tablet ve telefon: 0 (% 100)
Yatay animasyon divi

İçeri ve dışarı solmaya

Fade in ve fade out efekti ekleyerek sütun ayarlarını tamamlayın.

  • Solmaya giriş ve çıkışı etkinleştir: Evet
  • Başlangıç ​​opaklığı:% 100 (% 47'de)
  • Ortalama opaklık:
    • Ofis:% 0 (% 47)
    • Tablet ve telefon:% 100 (% 47)
  • Şeffaflığın sonu:
    • Ofis:% 0
    • Tablet ve telefon:% 100
Hareket animasyonu divi

Son düşünceler

Bu makalede, bir sütun çarpışan kahraman bölümü oluşturmak için Divi'nin kaydırma efektlerini nasıl yaratıcı bir şekilde kullanacağınızı gösterdik. Ziyaretçiler sayfayı kaydırır kaydırmaz, iki farklı sütun ve bunların öğeleri birleşmeye başlar. Bu da, kopyayı daha da vurgulamanıza izin verecektir.

Diğer Kaynaklar

Divi WordPress temanızla daha fazlasını yapmanıza izin verecek bir içerik listesi.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş