Ana İçeriğe Geç

Animasyonlu metin içeren bir süper kahraman bölgesi 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]

Bu eğitim, birkaç gün önce yaptığımız bir öğreticiye ek olarak gelir. Divi'de bir sütuna kayan metnin nasıl ekleneceğini gerçekten gösterdik. Bugün size bir "süper kahraman" bölümü eklemek için aynı tekniği nasıl kullanacağınızı göstereceğiz (dikkat çekmek ve belirli öğeleri vurgulamak için tasarlanmış bir web sayfasının geniş bir alanını tanımlamak için kullanılan ifade) .

Başlayalım.

Önceden tanımlanmış düzeni ekle

Düzeni sayfanıza eklemek için Divi oluşturucunun altındaki ayarlar menüsünü açın ve artı sembolüne tıklayın. Kitaplıktan Yükle açılır penceresinde, Job Recruiter Düzen Paketini seçin. Ardından ana sayfa düzenini kullanmak için tıklayın.

Model şablonu divi

Mizanpajla ek içerikler kaldırın

Sunum sayfaya yüklendikten sonra, tel kafes görünümünü dağıtın ve tam genişlikte başlık ve hemen altındaki bölüm dışında tüm içeriği sunumdan kaldırın.

Tasarım modifikasyon bölümü divi

Seçim metni animasyonunun oluşturulması

Gördüğünüz gibi, "işe alındı" kelimesi zaten ikinci bölümde bir metin modülünde büyük bir metin tasarım öğesi olarak kullanılıyor. Bu metin modunu duyarlı bir metin hoparlör tasarım öğesine dönüştüreceğiz. Metin dikdörtgenini duyarlı hale getirmenin anahtarı, satır ve metin modülünün tarayıcı penceresinin tüm genişliğine yayılmasını sağlamaktır. Bunu% 100 genişlik kullanarak yapabiliriz. Daha sonra metin boyutu için uzunluk birimi vw'yi kullanabiliriz. Bu, metni tarayıcının genişliğine uygun hale getirecektir. Bundan sonra, basit kayan metin örneğimizi göstermek için daha önce kullandığımız aynı ilkeleri uygulayacağız.

İşte nasıl yapılacağı.

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]

Satırın parametrelerini güncelle

Daha önce belirtildiği gibi, bu duyarlı metin seçiminin çalışabilmesi için satırın% 100 olması gerekir. Bu, metin modülümüzün tarayıcının genişliğine göre vw uzunluk birimlerini kullanmasına izin verir. Önceden tanımlanmış düzenimiz zaten% 100 genişlikte bir çizgiye sahip olduğundan, hiçbir şey yapmamıza gerek yok.

Divi hat modülü genişlik yapılandırması

Ancak, ayarların geri kalanını aşağıdaki gibi ayarlamamız gerekir.

  • Marj: -24vw aşağı
  • Y eksenini tercüme et: -24vw
  • Yatay taşma: gizli
  • Dikey taşma: gizli

Divi hat ayarları yapılandırması

Negatif alt kenar boşluğu, dönüştürme translate komutunu kullanarak satırı her hareket ettirdiğimizde kalan negatif boşluğu kaldırmaktır. Ve seçim metni efektimiz için satır taşmasını gizlememiz gerekiyor.

Metin modülünün metin tasarımını güncelleyin

Artık tek yapmanız gereken, metin modülünü büyük bir metin tasarım öğesine dönüştürmek için güncellemektir.

Metin modülünü açın ve aşağıdakileri güncelleyin:

  • Metin metni rengi: rgba (255,255,255,0.16)
  • Metin metni boyutu: 36vw
  • Marj: Solda% -100, sağda% 100

Metin boyutu bir vw uzunluk birimi kullanır, bu nedenle metin tarayıcının genişliğine tam olarak uyar.

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

Metin modülüne bir animasyon ekleyin

  • Animasyon Stili: Slayt
  • Animasyon yönü: sol
  • Animasyon süresi: 10000 ms
  • Animasyon yoğunluğu:% 100
  • Hız eğrisinin animasyonu: linear
  • Animasyonu tekrarla: Döngü

Divi metin animasyonu yapılandırmasıSon tasarım

Şimdi, son tasarımını kontrol et.

Kiralık animasyon diviSon düşünceler

Metin kutuları, web tasarımı için kullanışlı bir araç olabilir. Yalnızca teleprinter olarak işlev görmeleri ile sınırlı değildirler. Ayrıca, web tasarımınıza ilginç bir animasyon öğesi ekleyebilirler. Ve en iyi yanı, Divi'nin her türlü güzel şeyi yaratmayı ve tasarlamayı kolaylaştırmasıdır. Umarım bu eğitim, ihtiyaç duyduğunuzda basit seçim metinleri oluşturmanıza yardımcı olur.

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

Yorumlarda sizden haber almayı umuyoruz.

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