Bu eğitim, birkaç gün önce yaptığımız bir eğitime ek olarak gelir. Bir sütuna kayan metnin nasıl ekleneceğini gerçekten gösterdik. Divi. Bugün size bir "süper kahraman" bölümü (d için kullanılan ifade) eklemek için aynı tekniği nasıl kullanacağınızı göstereceğiz.yazmak dikkat çekmek ve belirli öğeleri vurgulamak için tasarlanmış geniş bir web sayfası alanı).
Başlayalım.
Önceden tanımlanmış düzeni ekle
Düzeni sayfanıza eklemek için oluşturucunun altındaki ayarlar menüsünü açın Divi ve artı sembolüne tıklayın. Kitaplıktan Yükle açılır penceresinde, Job Recruiter Layout Pack'i seçin. Ardından ana sayfa düzenini kullanmak için tıklayın.
Mizanpajla ek içerikler kaldırın
Sunum sayfaya yüklendikten sonra tel çerçeve görünümünü dağıtın ve tümünü kaldırın. içindekiler Tam genişlikte başlık ve hemen altındaki bölüm dışında sunumun.
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ğı.
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.
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
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.
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ü
Son tasarım
Şimdi, son tasarımını kontrol et.
Son düşünceler
Metin kutuları web tasarımı için kullanışlı bir araç olabilir. Yalnızca kayan yazı olarak çalışmakla sınırlı değiller. Ayrıca web tasarımınıza ilginç bir animasyon öğesi de ekleyebilirler. Ve en iyi kısmı da şu ki Divi her türlü güzel şeyi yaratmayı ve tasarlamayı kolaylaştırır. Umarım bu eğitim, ihtiyaç duyduğunuzda basit seçim metinleri oluşturmanıza yardımcı olur.
Yorumlarda sizden haber almayı umuyoruz.
Sağlığınıza!
