Divi ile Başlığınıza CSS Metin Blok Animasyonları Nasıl Eklenir

Başlığınız ana sayfanızın en önemli bölümlerinden biridir. Genellikle insanların okuduğu ilk kopyadır, bu da onu ilk izlenimlerini yapar. Diğer herhangi bir ilk izlenim gibi, bunun da iyi olmasını istersiniz. Şimdi, başlığınızı sergilemek için yaratıcı bir yol arıyorsanız, bu gönderiyi beğeneceksiniz. Bu eğitimde, size başlığınıza CSS metin bloğu animasyonlarını nasıl ekleyeceğinizi göstereceğiz ve mizanpajın JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

ÜCRETSİZ Metin Bloğu Animasyon Düzenini İndirin

Ellerinizi serbest metin bloğu animasyon 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!

Yeniden Yaratmaya Başlayalım!

1. Bölüm Ekle

Degrade 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: #ff0f2b
• Renk 2: #c10b1a
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 63deg

aralık

Bölümün tasarım sekmesine gidin 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üstü), 20vw (Tablet), 25vw (Telefon)

Sınır

Bölüme de bir kenarlık ekleyin.

• Kenar Genişliği: 2vw (Üst, Sol, Sağ)
• Alt Kenar Genişliği: 0vw
• Kenar Rengi: #ffffff

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

Satır ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:

• Genişlik: %100
• Maksimum Genişlik: %100

Sütuna Metin Modülü Ekle

H1 İçeriği Ekle

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

H1 Başlığındaki Her Kelimeye Div Etiketleri Ekleme

Başlık kopyanızın metin sekmesine geçin ve başlığınızın her kelimesine farklı bir div ekleyin. CSS kimliğinin her kelime için farklı olması gerekir.

<h1><div id="word-1" class="display-state">Ready</div>
<div id="word-2" class="display-state">to</div>
<div id="word-3" class="display-state">Build</div>
<div id="word-4" class="display-state">Beautiful</div>
<div id="word-5" class="display-state">Websites?</div></h1>

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: Work Sans
• Başlık Yazı Tipi Ağırlığı: Orta
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 4vw (Masaüstü), 5vw (Tablet), 6vw (Telefon)
• Başlık Çizgisi Yüksekliği: 1.4em

aralık

Ardından, farklı ekran boyutlarındaki kenar boşluğu değerlerini değiştirin.

• Sol Kenar Boşluğu: 20vw (Masaüstü ve Tablet), 15vw (Telefon)
• Sağ Kenar Boşluğu: 35vw (Masaüstü), 20vw (Tablet), 15vw (Telefon)

Sütuna Kod Modülü Ekle

CSS Kodu Ekle

Metin bloğu animasyonunu başlığımıza uygulamak 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>

aralık

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

• Alt Kenar Boşluğu: 0px

Sütuna Düğme Modülü Ekle

Kopya Ekle

İhtiyacımız olan bir sonraki modül bir Düğme Modülü. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Modülün tasarım sekmesine gidin ve düğme ayarlarını buna göre 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 Yazı Tipi: İş Sans

aralık

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

• Üst Kenar Boşluğu: 3vw (Masaüstü),
• Sol Kenar Boşluğu: 20vw (Masaüstü ve Tablet), 15vw (Telefon)
• Üst Dolgu: 1.2vw (Masaüstü), 2vw (Tablet), 4vw (Telefon)
• Alt Dolgu: 1.2vw (Masaüstü), 2vw (Tablet), 4vw (Telefon)
• Sol Dolgu: 1.8vw (Masaüstü), 3vw (Tablet), 6vw (Telefon)
• Sağ Doldurma: 1.8vw (Masaüstü), 3vw (Tablet), 6vw (Telefon)

Animasyon

Animasyon ayarlarını da özelleştirin.

• Animasyon Stili: Çevir
• Animasyon Yönü: Aşağı
• Animasyon Gecikmesi: 2000ms
• Animasyon Yoğunluğu: %100
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış
• Animasyon Tekrarı: Bir kez

2. Bölüm Ekle

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

aralık

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

• Üst Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın, bölüm kabının tüm genişliğini kaplamasına izin verin.

• Genişlik: %100
• Maksimum Genişlik: %100

Sütuna Metin Modülü Ekle

İçerik Ekle

Ardından, seçtiğiniz bazı açıklama içeriğine sahip bir Metin Modülü ekleyin.

Arka plan rengi

Beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

Metin Ayarları

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

• Metin Yazı Tipi: İş Sans
• Metin Rengi: #9b9b9b
• Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Metin Satır Yüksekliği: 2.6em

aralık

Farklı ekran boyutlarına da bazı özel boşluk değerleri ekleyin.

• Üst Marj: -5vw (Masaüstü), -20vw (Tablet), -27vw (Telefon)
• Sol Kenar Boşluğu: 20vw (Masaüstü), 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üstü), 7vw (Tablet ve Telefon)
• Sol Dolgu: 3vw (Masaüstü), 5vw (Tablet), 6vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 5vw (Tablet), 6vw (Telefon)

Kutu Gölge

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)

Ö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, 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 olduğundan ve baştan okunduğundan emin olmak önemlidir, başlığınıza bir animasyon eklemek bu konuda kesinlikle yardımcı olabilir! Düzenin 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.