Ana İçeriğe Geç

Divi ile renkli bir metin arka plan kaydırma animasyonu 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]

Bir metin arka planı kaydırma animasyonu oluşturmak, bir kullanıcı sayfayı kaydırırken web sitenizin metnine renkli animasyonlu dokular eklemenin benzersiz bir yoludur. Divi ile, birkaç temel tekniği öğrendikten sonra süreç şaşırtıcı derecede kolaydır.

Bu eğitimde, renkli metin arka plan kaydırma animasyonuna sahip 3 benzersiz tasarım oluşturmak için yalnızca Divi'nin yerleşik ayarlarının gücünü kullanacağız. Yepyeni bir görünüm için her tasarımın karanlık bir versiyonunu nasıl oluşturacağınızı bile göstereceğiz.

Başlayalım!

Olası Sonuç

Bugün inşa edeceğimiz tasarımlara bir göz atın.

Tasarım 1: Yatay kaydırma efektli metin arka plan gradyanı

Bu ilk tasarım, ekran filtreli bir metin modülünün arkasında renkli bir ayırma modülünü canlandıran yatay bir kaydırma efektine sahip olacak.

Sütun ekle

Başlamak için varsayılan bölüme tek sütunlu bir satır ekleyin.

Divi sütun düzenini seçin

Metin modülü ekle

Ardından sütuna yeni bir metin modülü ekleyin.

Divi metin modülü ekle

içindekiler

Sütunun içeriği için, içerik alanına aşağıdaki HTML kodunu yapıştırın:

Parça kodunu kaydedin

Metni biçimlendirme

Ardından metin tasarımını aşağıdaki gibi güncelleyin:

  • Arka Plan Rengi: #ffffff
  • Metin Yazı Tipi Stili: TT
  • Metin rengi: # 000000
  • Metin boyutu: 100 piksel (masaüstü), 40 piksel (telefon)
  • Metin harf aralığı: 0.15em
  • Metin satırının yüksekliği: 1em
  • Metnin hizalanması: orta
  • Başlık Yazı Tipi: Merriweather
  • Başlık yazı tipi ağırlığı: kalın
  • Başlık yazı tipi stili: TT
  • Üstbilgi Metni Hizalama: Merkez
  • Üstbilgi Metin Rengi: # 000000
  • Üstbilgi Metin Boyutu: 200px (Masaüstü), 80px (Telefon)
  • Başlık harfi aralığı: 0.15em
  • Başlık satırının yüksekliği: 1em

Dolgu ve filtre

Şimdi metin modülüne biraz dolgu ve ekran filtresi eklememiz gerekiyor. Arka plan renklerinin / modlarının metnin arkasında gösterilmesine izin veren bu tasarımın çalışması için filtreye ihtiyaç vardır.

Dolguyu ve filtreyi eklemek için aşağıdakileri güncelleyin:

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]

  • dolgu: 15 piksel yüksek, 20 piksel düşük
  • Karışım Modu: Ekran

Not: Ekran harmanlama modu en iyi beyaz arka plan üzerinde siyah metinle çalışır. Siyah bir arka plan üzerinde beyaz metin kullanmak istersek, Çarpma harmanlama modunu kullanırdık.

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

Üst ve alt ayırıcı

Metin modülümüz tamamlandığında, ek bir tasarım öğesi için bazı ayırıcılar (metin modülünün üstünde ve altında) ekleyelim.

Alt ayırıcı ekle

Metin modülünün altına yeni bir ayırma modülü ekleyin.

Divi ayırıcı modülü ekle
Daha yüksek ayırma ayarları

Ayırıcı ayarlarını açın ve ayırıcıyı görüntülemek için HAYIR'ı seçin.

divi metin arka plan kaydırma efektleri

Ardından arka planı güncelleyin ve ayırıcıya aşağıdaki gibi metin modülüyle aynı karışım modunu verin:

  • Sol degrade arka plan rengi: # 000000
  • Sağdaki degrade arka plan rengi: #ffffff
  • Gradyan Yönü: 90deg
  • Başlama Konumu:% 48
  • Bitiş Pozisyonu:% 0
  • Karışım Modu: Ekran
Renk ayırıcı yapılandırması

Ardından, telefon ekranındaki bölücünün yüksekliğini şu şekilde güncelleyin:

  • Yükseklik: 15 piksel (telefon)
Divi ayırıcı yapılandırması

Üst ayırıcı ekle

Üst bölücüyü oluşturmak için, önceki alt bölücüyü çoğaltın ve katman görüntüleme alanını kullanarak metin modülünün üzerine sürükleyin.

Divi ayırıcı ekleme

Ardından renkleri degrade arka plan üzerinde ters çevirin.

Gradyan arka planı ekleme

Satır parametrelerini güncelleme

Üst ve alt ayırıcılarımız yerleştirildikten sonra, hat parametrelerini aşağıdaki gibi güncelleyin:

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]

  • Oluk genişliği: 1 (modüller arasındaki düşük kenar boşluklarını kaldırmak için)
  • Maksimum genişlik: 600 piksel (masaüstünde ve tablette tutarlı bir tasarım tutmak için)
  • Çizgi hizalama: merkez
  • Dolgu: 0 piksel yüksek, 0 piksel düşük
  • Yatay taşma: gizli
  • Dikey taşma: gizli
Divi satırı parametresini özelleştirin

Animasyonlu metnin arka plan rengi için bir ayırıcı oluşturun

Bu ilk tasarımın son öğesi, kaydırma üzerindeki metnin arka plan rengini canlandırmak için kullanacağımız bölücüdür. Bunu yapmak için, alt bölücünün altına yeni bir ayırma modülü ekleyin.

Ayırıcı yerleştirme

Ardından ayırıcıyı görüntülemek için HAYIR'ı seçin.

Divi ayırıcıyı göster

Arka plan ayırıcı ayarları

Ayırıcıyı aşağıdaki gibi degrade arka planla güncelleyin:

  • Sol degrade arka plan rengi: # e02b20
  • Doğru arka plan gradyan rengi: # 8300e9
  • Gradyan Yönü: 90deg
  • Başlama Konumu:% 30
  • Bitiş Pozisyonu:% 70
Divi arka bölücü

Ayırıcının yüksekliğinin, metin modülündeki tüm metnimizi ve üst ve alt ayırıcıları renklendirecek kadar yüksek olmasını istiyoruz. Bu tasarım için yüksekliği 400px olarak ayarlayın.

  • Yükseklik: 400px
Bölücü bölücü yüksekliği

Ardından, bölücüye, onu diğer modüllerin doğrudan üzerine konumlandırması için mutlak bir konum verin. Bölücüyü diğer modüllerin arkasına yerleştirmek için Z endeksini kullanın.

  • Pozisyon: Mutlak
  • Z endeksi: -1
Dizin ayırıcı
Arka plan bölücü kaydırma efektleri

Ayırıcı konumundayken tek yapmamız gereken ayırıcıyı Divi'nin kaydırma efektlerini kullanarak metnin arkasına taşımaktır. Bu tasarım için, kaydırmaya sadece yatay hareket ekleyeceğiz.

Aşağıdaki öğeleri güncelleyin:

Yatay hareket sekmesinin altında ...

ofis

  • Yatay hareketi etkinleştir: EVET
  • Başlangıç ​​ofseti: 6 (% 20'de)
  • Ortalama ofset: 0 (% 40 -% 60'da)
  • Son ofset: -6 (% 80'de)

telefon

  • Başlangıç ​​ofseti: 3
  • Bitiş ofseti: -3

Ayrıca, klibin ortasındaki hareket efekti için tetiği ayarladığınızdan emin olun:

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

  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Animasyon yapılandırması

Bölüm aralığı ekle

Tasarımı sınamak üzere geçici bir kaydırma alanı oluşturmak için bölüme aşağıdakileri ekleyin:

  • Kenar boşluğu: 80vh yukarıda, 80vh aşağıda
Yapılandırma boyutu bölümü divi

Son düşünceler

Bu makalede gösterilen metin arka plan animasyon tasarımları, kaydırma üzerine ekleme hareketi olmadan statik bir tasarım olarak gerçekten iyi çalışır. Bununla birlikte, ek kaydırma efektleri tasarımı gerçekten tamamen yeni bir seviyeye taşır. Daha fazla renk ve efekt denemekten çekinmeyin!

Yorumlarda sizden haber almak için sabırsızlanıyorum.

Sağlığınıza!

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