Ana İçeriğe Geç

Divi'de animasyonlu bir kahraman 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]

Çoğu web sitesinde artık kanıtlanması gerekmeyen bir "Kahramanlar" bölümü vardır. Rolü sadece öne çıkmak değil, aynı zamanda var olan eylem çağrısını pekiştiren çeşitli unsurlara bölünmesidir. Anlaşılması kolay, yapılandırılmış bölünmüş içerik kahraman bölümleri çok popülerdir ve farklı web sitesi türleri tarafından sıklıkla kullanılır.

Masaüstü için bölünmüş içerikli kahraman bölümleri oluştururken kulağa basit geliyorsa, görünüşe her zaman aldanamazsınız. Bu öğreticinin kullanışlı olacağı yer burasıdır. Yalnızca mobil cihazlarda değil, ekran boyutundan bağımsız olarak da güzel görünecek, oldukça etkileşimli bir mobil bölünmüş kahraman bölümü yeniden oluşturacağız. Ayrıca 2019 tasarım stiline mükemmel bir şekilde uyması için harika animasyonları birleştiriyoruz. Bu öğreticinin, kendi bölünmüş içerikli mobil kahraman bölümlerinizi oluşturmanız için size ilham vereceğini umuyoruz.

Gidelim!

anket

Öğreticiye dalmadan önce, bu öğreticiyi tamamladıktan sonra neler alabileceğinize bir göz atalım.

Örnek tasarım tasarım divi

Arayüz tasarımı

Yeni bölüm ekle

aralık

Yeni bir sayfa oluşturarak veya mevcut bir sayfayı açarak başlayın. Yeni bir normal bölüm ekleyin, aralık ayarlarına gidin ve tüm varsayılan üst ve alt dolgu kenar boşluklarını kaldırın.

  • En iyi dolgu malzemesi: 0px
  • Dolgu Tabanı: 0px

Parametre bölümü diviYeni bir satır ekle

Sütunun yapısı

Yeni bir satır eklemeye ve aşağıdaki sütun yapısını kullanmaya devam edeceğiz:

Çift sütunlu bir bölüm ekleyinArka plan rengi

Daha fazla modül eklemeden hat ayarlarını açın ve tamamen siyah bir arka plan rengi ekleyin.

  • Arka plan rengi: #000000

Divi hattı parametreleri

Sütun 1 Arka Plan Rengi

Ayrıca ilk sütuna siyah arka plan rengi ekleyin.

  • Sütun 1 Arka Plan Rengi: #000000

Ayarlar satırı divi sütun 1Sütun 2 Arka Plan Rengi

İkinci sütun için aynı şey.

  • Sütun 2 Arka Plan Rengi: #000000

2. Sütunun arka planı

boyutlandırma

Ardından boyutlandırma ayarlarına gidin ve satır ve sütunlarının ekranın tüm genişliğini kaplamasına izin verin.

  • Bu satırı tam genişlik yap: Evet
  • Özel bir oluk genişliği kullanın: Evet
  • Oluk genişliği: 1
  • Sütun yüksekliklerini eşitle: Evet

Divi hat boyutlandırma tasarım yapılandırmasıaralık

Ayrıca çizginin tüm varsayılan üst ve alt kenar boşluklarını da kaldırırız.

  • Üstte doldurma: 0px
  • Dolgu Tabanı: 0px
  • Döşeme Sağ: 1vw

Divi satır dolgusunu yapılandırınekran

Son olarak, iki sütunun daha küçük ekranlarda yan yana görünmesini sağlayacağız. Bunu yapmak için, satırın Gelişmiş sekmesine tek bir CSS kodu satırı eklememiz gerekecek.

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]

display: flex;

Ana öğe css ayarları

1. sütuna bir görüntü modülü ekleyin

Görüntü alanını boş bırakın

Artık ihtiyacımız olan tüm modüllere sahibiz! İlk sütundaki görüntü modülüyle başlamalısınız. Resim alanına bir resim yüklemek yerine, resmi sonraki adımlarda arka plan ayarlarına yükleyeceğiz, bu nedenle varsayılan olarak eklenen resmi kaldırmamız gerekiyor. Böylece, görüntünün konumlandırılma şekli ve sıramızda ne kadar yer kapladığı ile oynayabiliriz.

Divi line görüntü modülü ekleArka plan rengi ekle

Görüntü modülünün arka plan ayarlarına gidin ve bir arka plan rengi ekleyin. Bir sonraki adımda, bu arka plan rengini ve bir arka plan görüntüsünü, görüntüyü koyulaştırmak için bir karışım efekti kullanarak birleştireceğiz.

  • Arka plan rengi: #686868

Divi modülü görüntü arka plan ayarlarıArka plan resmi ekle

İstediğiniz bir arka plan görüntüsünü ekleyin ve arka plan ayarlarını uygun şekilde değiştirin:

  • Arka Plan Resim Boyutu: Kapak
  • Arka plan resminin konumu: merkez
  • Arka plan resmini tekrarla: Tekrar yok
  • Arka plan resmi karışımı: çarpma

Divi modülü görüntü arka plan yapılandırması

boyutlandırma

Üzerinde çalıştığımız satır için eşit büyüklükte iki sütun kullandık, ancak sonuç aynı değil. Eklenen her modülün boyutunu, farklı bir sütun yapısı kullanıyormuşuz gibi görünmesi için manuel olarak değiştireceğiz. Bunu yapmamızın nedeni (sadece başka bir sütun yapısı seçmek yerine) her şeyi duyarlı hale getirmektir.

 Küçük ekranlarda. Görüntü modülünün boyutlandırma parametrelerine erişin ve genişliğini değiştirin.

  • Genişlik:% 88
  • Modülün hizalanması: sol

Görüntü modülü aralık genişliği yapılandırmasıaralık

Şimdi boşluk ayarlarında resmimizin boyutuna karar vermemiz gerekiyor. Ayrıca, ekran boyutundan bağımsız olarak tasarımımızın tamamen duyarlı kalmasını sağlamak için bu değerler için bir ekran birimi kullanıyoruz.

  • Üst dolgu: 26.3vw (masaüstü), 48vw (tablet), 72vw (telefon)
  • Altta Döşeme: 26.3vw (masaüstü), 48vw (tablet), 72vw (telefon)

Görüntü modülü kenar boşluğu yapılandırması

Animasyon

Son olarak, Resim modülüne bir slayt animasyonu ekleyeceğiz. Animasyonu uyguladıktan sonra, görüntünün ilk sütuna girene kadar görünmeye başlamayacağını fark edeceksiniz. İkinci sütunun arka plan rengi, sola sürüklenirken Görüntü Modülünün üst kısmında kalır.

  • Animasyon Stili: Slayt
  • Animasyonu Tekrarla: Bir Kez
  • Animasyon yönü: sol
  • Animasyon Süresi: 1450ms
  • Yoğunluk Animasyonu:% 60
  • Animasyon Başlangıç ​​opaklığı:% 100

Divi görüntü modülü animasyon ayarı

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

Bir kopya ekle

1. sütunda ihtiyacımız olan bir sonraki modül, bir düğme modülüdür. Seçtiğiniz bir kopyasını girin.

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]

Divi modülü düğme ayarıDüğme ayarları

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

  • Düğme için özel stiller kullan: Evet
  • Düğme metni boyutu: 1.5vw (masaüstü), 2.5vw (tablet), 4vw (telefon)
  • Düğme metni rengi: #ffffff
  • Düğme arka plan rengi: #e02b20
  • Düğme kenarlığının genişliği: 0px
  • Düğmenin kenarlığının yarıçapı: 1px
  • Düğme Yazı Tipi: Poppins
  • Yazı tipi ağırlığı: Kalın

Divi düğme stili yapılandırması

aralık

Ayrıca aralık değerlerini de değiştirin.

  • Üst marj: -3.3vw (masaüstü), -6vw (tablet), -9.1vw (telefon)
  • Sol Dolgu: 8vw
  • Döşeme Sağ: 8vw

Divi düğme modülü aralık ayarları

Gölge kutusu

Ve sayfada derinlik oluşturmak için ince bir gölge ekleyin.

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

Divi düğme modülü gölge ayarı

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

H1 içeriği ekle

İkinci sütunda! İhtiyacımız olan ilk modül bir metin modülüdür. Seçtiğiniz herhangi bir H1 içeriğini ekleyin.

Divi metin modülü yapılandırması

H1 Metin Ayarları

Ardından Tasarım sekmesine gidin ve H1 metin ayarlarını değiştirin.

  • Yazı tipi: Poppins
  • Başlık metni rengi: #ffffff
  • Metin Başlığı Boyutu: 4vw (masaüstü), 5vw (tablet), 6vw (telefon)

Parametre modülü ayar diviaralık

Aralık değerlerini de değiştirin.

  • Üst kenar boşluğu: 12vw
  • Sol kenar boşluğu: -20vw
  • Sağ kenar boşluğu: 17vw (masaüstü), 15vw (tablet), 1vw (telefon)

Divi metin modülü kenar boşluklarının yapılandırılması

Animasyon

Ve ince bir animasyon ekleyin.

  • Animasyon Stili: Slayt
  • Animasyonu Tekrarla: Bir Kez
  • Animasyon Yönü: Aşağı
  • Animasyon Süresi: 1450ms
  • Yoğunluk Animasyonu:% 10
  • Animasyon Başlangıç ​​opaklığı:% 100

Conifgurer animasyon modülü metin divi

2 sütununa bir bölme modülü ekleme

görünürlük

İkinci sütunda ihtiyacımız olan bir sonraki modül, bir bölme modülüdür. "Ayırıcıyı göster" seçeneğinin etkinleştirildiğinden emin olun.

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

Divi ayırıcısını gösterRenk

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

  • Renk: #e02b20

Divi ayırıcı modül stil sekmesiAnimasyon

Daha sonra bölme modülüne bir animasyon ekleyin.

  • Animasyon Stili: Slayt
  • Animasyonu Tekrarla: Bir Kez
  • Animasyon Yönü: Sağ
  • Animasyon Süresi: 1450ms
  • Yoğunluk Animasyonu:% 83
  • Animasyon Başlangıç ​​opaklığı:% 100

Divi modül ayırıcı animasyonu

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

İçerik ekle

İkinci sütunda ihtiyacımız olan bir sonraki ve son modüle geçelim! Seçtiğiniz bir açıklama ekleyin.

Ç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]

Divi metin modülü ekle

Metin ayarları

Ardından Tasarım sekmesindeki metin ayarlarına gidin ve buna göre bazı değişiklikler yapın:

  • Metin Yazı Tipi: Poppins
  • Metnin yazı tipi ağırlığı: Işık
  • Metin rengi: #919191
  • Metin boyutu: 0.9vw (masaüstü), 1.8vw (tablet), 2.2vw (telefon)
  • Metin harflerinin aralığı: 0.1vw
  • Metin satırının yüksekliği: 2.2em

Metin ayarlama modülü metin diviaralık

Ayrıca aralık değerlerini de değiştirin.

  • Üst marj: 9vw (masaüstü), 19vw (tablet), 23vw (telefon)
  • Alt kenar boşluğu: 12vw (masaüstü), 19vw (tablet), 23vw (telefon)
  • Sol kenar boşluğu: -3vw
  • Sağ kenar boşluğu: 20vw (masaüstü), 6vw (tablet), 3vw (telefon)

Divi metin modülü aralık ayarlarıAnimasyon

Ve sonunda, modüle soluk bir animasyon ekleyin; işiniz bitecek!

  • Animasyon Stili: Solmaya
  • Animasyonu Tekrarla: Bir Kez
  • Animasyon Süresi: 1400ms
  • Animasyon gecikmesi: 1000 ms
  • Animasyon Başlangıç ​​opaklığı:% 0

Divi metin modülü ayarları aniamtionSon düşünceler

Bu eğiticide, Divi ile harika bölünmüş içerik kahraman bölümleri oluşturmayı gösterdik. Bölünmüş içerik kahraman bölümleri çok popülerdir ve web'de sıklıkla kullanılır, ancak bunların son derece duyarlı olmalarını sağlamak da önemlidir. Herhangi bir sorunuz veya öneriniz varsa, yorum bıraktığınızdan ve sosyal medyada paylaşmaktan çekinmeyin!

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üş
4 hisseleri
hisse4
cıvıltı
Enregistrer