Ana İçeriğe Geç

Divi'deki başlıklarınıza metin bloğu animasyonu nasıl eklenir

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]

Başlığınız, ana sayfanızın en önemli bölümlerinden biridir. Bu genellikle ilk gördüğünüz şeydir ve bu nedenle ilk izlenimi belirleyen şeydir. Diğer herhangi bir ilk izlenim gibi, iyi olmasını istersiniz. Şimdi, başlığınızı sunmanın yaratıcı bir yolunu arıyorsanız, bu eğiticiden keyif alacaksınız çünkü size başlığınıza CSS metin bloğu animasyonlarını nasıl ekleyeceğinizi göstereceğiz ve ayrıca düzen JSON dosyasını ücretsiz olarak indirebilirsiniz!

anket

Eğiticiye geçmeden önce, farklı ekran boyutlarında sonuca bir göz atalım.

Animasyonlu başlık önizleme divi öğreticisi

Tasarım başlayalım

1. bölüm ekle

Gradyan arka planı

Yeni bir sayfaya veya üzerinde çalıştığınız sayfaya normal bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını uygulayın:

  • Renk 1: # f0f2b
  • Renk 2: # c10b1a
  • Gradyan türü: doğrusal
  • Gradyan yönü: 63 derece
Divi bölümlerinin yapılandırması

aralık

Bölüm tasarımı sekmesine geçin ve aşağıdaki özel üst ve alt dolgu değerlerini farklı ekran boyutlarına uygulayın:

  • Üst dolgu: 7vw (masaüstü), 20vw (tablet), 25vw (telefon)
  • Alt dolgu: 7vw (masa), 20vw (tablet), 25vw (telefon)
Divi bölüm aralığı yapılandırması

Sınır

Ayrıca bölüme bir kenarlık ekleyin.

  • Sınır genişliği: 2vw (üst, sol, sağ)
  • Alt kenar genişliği: 0vw
  • Kenarlık rengi: #ffffff
Divi bölümü sınır 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ütun düzeni yapılandırması

boyutlandırma

Çizgi parametrelerini açın ve boyutlandırma parametrelerini uygun şekilde değiştirin:

  • Genişlik:% 100
  • Maksimum genişlik:% 100
Divi sütun genişliği yapılandırması

Sütuna metin modülü ekleme

H1 içeriği ekle

Ardından, seçtiğiniz H1 başlığına sahip bir metin modülü ekleyin.

1. sütun divi'ye bir metin modülü ekleyin

H1 başlığındaki her kelimeye Div etiketi ekleme

Başlık kopyanızın metin sekmesine geçin ve başlığınızdaki her kelimeye farklı bir div ekleyin. CSS kimliği her kelime için farklı olmalıdır.

hazır
-de
İnşa etmek
Güzel
Web siteleri?

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]

Divi metin modülü etiketleri ekleyin

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: Work Sans
  • Başlık yazı tipi ağırlığı: orta
  • Üstbilgi Metin Rengi: #ffffff
  • Başlık Metin Boyutu: 4vw (masaüstü), 5vw (tablet), 6vw (telefon)
  • Kafa hattı yüksekliği: 1,4 em
Parametre başlığı 1 divi

aralık

Ardından farklı ekran boyutlarında marj değerlerini değiştirin.

  • Sol kenar boşluğu: 20vw (masa ve tablet), 15vw (telefon)
  • Sağ kenar boşluğu: 35vw (masaüstü), 20vw (tablet), 15vw (telefon)
Divi metin modülü aralık yapılandırması

Sütuna kod modülü ekleme

CSS kodunu girin

Metin bloğu animasyonunun başlığımıza uygulanması için biraz CSS koduna ihtiyacımız olacak. Bu CSS kodunu yeni bir kod modülüne ekleyeceğiz.

<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>

Css divi kodunu yapıştır

aralık

Modül tasarımı sekmesine geçin ve tüm varsayılan alt dolguyu kaldırın.

  • Alt kenar boşluğu: 0px
Divi modülü sihirbazlarını özelleştirin

Sütuna bir düğme modülü ekleme

Bir kopya ekle

İhtiyacımız olan bir sonraki modül bir düğme modülü. Seçtiğiniz bir kopyasını girin.

Boton divi modülünün bir kopyasını oluşturun

Düğme ayarları

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

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]

  • 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
Divi düğme modülü parametresi
  • Düğme yazı tipi: Work Sans
Divi düğme yazı tipini değiştir

aralık

Ardından aralık ayarlarına gidin ve farklı ekran boyutlarında özel kenar boşluğu ve dolgu değerleri uygulayın.

  • Üst kenar boşluğu: 3vw (ofis),
  • Sol kenar boşluğu: 20vw (masa ve tablet), 15vw (telefon)
  • Üst dolgu: 1.2vw (masaüstü), 2vw (tablet), 4vw (telefon)
  • Alt dolgu: 1.2vw (masa), 2vw (tablet), 4vw (telefon)
  • Sol doldurma: 1.8vw (masaüstü), 3vw (tablet), 6vw (telefon)
  • Sağ dolgu: 1.8vw (masa), 3vw (tablet), 6vw (telefon)
Divi düğme aralığı yapılandırması

Animasyon

Animasyon ayarlarını da özelleştirin.

  • Animasyon Stili: Flip
  • Animasyon yönü: aşağı
  • Animasyon gecikmesi: 2000 ms
  • Animasyon yoğunluğu:% 100
  • Animasyon başlangıç ​​şeffaflığı:% 100
  • Animasyon hız eğrisi: kolay giriş
  • Animasyon tekrarı: bir kez
Divi metin modülü animasyon özelleştirme

2. bölüm ekle

Bir öncekinin hemen altına yeni bir normal bölüm ekleyerek devam edin.

Yeni bir divi bölümü ekle

aralık

Bölüm ayarlarını açın ve varsayılan üst dolguyu kaldırın.

  • Üst dolgu: 0 piksel
Divi bölüm aralığını yapılandırma

Yeni bir satır ekle

Sütun yapısı

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

Yeni bir bölüm divi sütunu ekle

boyutlandırma

Daha fazla modül eklemeden, hat parametrelerini açın ve hattın kesit kabının tüm genişliğini işgal etmesine izin verin.

  • Genişlik:% 100
  • Maksimum genişlik:% 100
Boyutlandırma bölümü divi

Sütuna metin modülü ekleme

İçerik ekle

Ardından, istediğiniz açıklama içeriğine sahip bir metin modülü ekleyin.

Divi modülü metin ayarları

Arka plan rengi

Beyaz bir arka plan rengi ekleyin.

  • Arka Plan Rengi: #ffffff
Divi yazı tipi rengi yapılandırma

Metin ayarları

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

  • Metin yazı tipi: Work Sans
  • Metin rengi: # 9b9b9b
  • Metin boyutu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
  • Metin satırının yüksekliği: 2.6em
Divi başlık yazı tipi yapılandırması

aralık

Ayrıca farklı ekran boyutlarında özel aralık değerleri 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]

  • Üst marj: -5vw (masaüstü), -20vw (tablet), -27vw (telefon)
  • Sol kenar boşluğu: 20vw (masa), 13vw (tablet), 8vw (telefon)
  • Sağ kenar boşluğu: 20vw (masaüstü), 13vw (tablet), 8vw (telefon)
  • Üst dolgu: 5vw (masaüstü), 7vw (tablet ve telefon)
  • Alt dolgu: 5vw (masa), 7vw (tablet ve telefon)
  • Sol doldurma: 3vw (masaüstü), 5vw (tablet), 6vw (telefon)
  • Sağ dolgu: 3vw (masa), 5vw (tablet), 6vw (telefon)
Divi modülü bölüm aralığı yapılandırması

Gölge kutusu

Ve ince bir kutu gölgesi uygulayarak modül ayarlarını tamamlayın. Bu kadar!

  • Kutu Gölge Bulanıklığı Gücü: 50px
  • Gölge rengi: rgba (0,0,0,0,1)
Gölge yapılandırma divi metin modülü

anket

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

Nihai sonuç divi öğreticisi

Son düşünceler

Bu yazıda, başlığınıza CSS metin bloğu animasyonlarını nasıl ekleyeceğinizi gösterdik. Başlığınızın görünür olmasını ve baştan okunmasını sağlamak önemlidir, başlığınıza animasyon eklemek kesinlikle yardımcı olabilir! Ayrıca layout JSON dosyasını ücretsiz olarak indirebildiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.

Çeviri: ElegantThemes

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