Divi ile Basit Bir Metin Çerçevesi Nasıl Oluşturulur
Yayınlanan: 2019-08-24Metin çerçeveleri, web sitenize, okuyucuların yararlı içerik parçacıklarıyla ilgisini çeken, kayan bir metin alanı sağlar. Bunlara ayrıca kayan yazı (veya haber kaydı) adı verilir ve genellikle bir sayfanın üstünde veya altında sürekli bir haber güncellemesi akışı göstermek için kullanılır. . Genellikle kaydırma animasyonu, bilgilerin tekrar tekrar görüntülenmesi için bir döngüde tek bir içerik satırıyla yapılır. Ne yazık ki, html <marquee> etiketi eski olduğundan, bugünlerde çerçeveler oluşturmak için CSS ve JavaScript'e güveniyoruz. Ancak Divi ile özel kod hakkında endişelenmenize gerek kalmadan basit bir seçim çerçevesi oluşturabilirsiniz.
Bu eğitimde, Divi ile basit bir metin çerçevesi oluşturmanın ne kadar kolay olduğunu anlatacağız. Fareyle üzerine gelindiğinde kayan metin animasyonunun nasıl duraklatılacağını ve başlıklarınız için benzersiz bir tasarım öğesi olarak büyük bir metin çerçevesinin nasıl ekleneceğini bile ele alacağız.
Başlayalım.
Gizlice Bakış
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.
Ü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.
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!
Youtube Kanalımıza Abone Olun
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için aşağıdakilere sahip olmanız gerekir:
- Divi Teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Bölüm 1: Divi'de Basit Metin Çerçevesi Oluşturma
Bu ilk örnek için, bir metin satırı için basit bir metin çerçevesi oluşturacağız. Bunu yapmak için, bir satıra taşmanın gizlendiği maksimum genişlik vereceğiz. Ardından, metin satırını içeren bir metin modülüne döngüsel bir slayt animasyonu ekleyeceğiz, böylece satır boyunca kayan bir kayan yazı gibi tekrar tekrar görüntülenecektir.
İşte nasıl yapılacağı.
İlk olarak, bir sütun satırı olan normal bir bölüm oluşturun.
Ardından, bir modül eklemeden önce, satırı sabit bir genişlik, bir kutu gölgesi ve bir kenarlık yarıçapı ile aşağıdaki gibi güncelleyin:
- Maksimum Genişlik: 200 piksel
- Dolgu: 10 piksel üst, 10 piksel alt
- Yuvarlak Köşeler: 10px
- Kutu Gölgesi: ekran görüntüsüne bakın
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Metin Modülünü Ekleyin
Satır bittiğinde, satıra yeni bir metin modülü ekleyin.
Ardından gövde içeriğini tek bir metin satırıyla güncelleyin. Şimdilik metin satırının başka bir satıra bölünmediğinden emin olun.
- Gövde: “Bu bir cümledir”
Metin Modülü Tasarımı
Metin modülü tasarım ayarlarını aşağıdaki gibi güncelleyin:
- Kenar boşluğu: -%100 sol, %100 sağ
Bu, metin modülünü satırın solu dışında konumlandırır. Satırda taşma görünürlüğü gizli olduğundan, modül, biz onu görünüme getirmek için animasyon ekleyene kadar gizlenecektir.
- Animasyon Stili: Slayt
- Animasyon Yönü: Sağ
- Animasyon Süresi: 5000ms
- Animasyon Yoğunluğu: %100
- Animasyon Opaklığı Başlatma: %100
- Animasyon Hız Eğrisi: Doğrusal
- Animasyon Tekrarı: Döngü
Sonuç
Şimdi sonucu kontrol edelim.
Daha Uzun Metin Satırları Oluşturma
Yukarıdaki basit metin kayan yazı tasarımında, metin satırının genişliğini satırın aynı genişliğiyle sınırladık. Ancak, aynı satır genişliğinde daha uzun bir metin satırı oluşturmak istiyorsak, ayarları biraz değiştirmemiz gerekecek.
İlk olarak, metin modülünde ve gövde metnini aşağıdakiyle değiştirin:
<p>This is a sentence in a marquee with a <a href="#">link</a></p>
Daha Uzun Metin Satırına Yerleştirmek için Daha Fazla Genişlik ve Kenar Boşluğu Ekleyin
Fark edebileceğiniz gibi, metin artık bir yerine üç satıra bölünüyor.
Bu nedenle, kenar boşluğunu ve animasyon yoğunluğunu ayarlamamız gerekiyor.
- Genişlik: %207
- Marj: -%207 sol, %207 sağ
- Animasyon Yoğunluğu: %75
Buradaki püf noktası, genişliği artırmak ve kenar boşluğu değerlerini güncellemektir, böylece tek satırlık metin için yeterli alan sağlarsınız. Ardından, döngü animasyonu arasında büyük bir kesinti olmayacak şekilde animasyon yoğunluğunu ayarlayın.
Sonuç
İşte nihai sonuç.
Hover'da Seçim Çerçevesi Metin Animasyonunu Duraklatma
Bu kayan yazı bir bağlantı içerdiğinden, kullanıcıların bağlantı hareket halindeyken gerçekten tıklamaları zor olacaktır. Ancak, animasyonu fareyle üzerine geldiğinde duraklatacak metin modülüne küçük bir css parçacığı ekleyebiliriz.
Hover'da Animasyonu Duraklatmak için bir CSS Parçacığı Ekleme
css snippet'ini eklemek için, metin modülü ayarlarını açın ve vurgulu sekmesinin altındaki ana öğeye aşağıdaki özel CSS'yi ekleyin:
animation-play-state: paused;
Son sonuç
Şimdi nihai sonucu kontrol edin. İmleç metnin üzerine geldiğinde metin animasyonunun nasıl duraklatılacağına ve kullanıcının bağlantıyı tıklamasına izin vereceğine dikkat edin.
Bölüm 2: Divi'de Duyarlı Tasarım Öğesi Olarak Metin Çerçevesi Oluşturma
Artık Divi'de basit bir metin çerçevesinin nasıl oluşturulacağını anladığımıza göre, aynı konsepti duyarlı bir metin çerçevesi tasarım öğesi oluşturmak için de alabiliriz. Bu, başlıklar veya bölüm başlıkları için benzersiz animasyon tasarımları oluşturmak için iyi çalışır.
Bunu yapmak için Divi'nin Job Recruiter Ana Sayfası hazır düzenini kullanacağız.
Hazır Düzeni Ekleyin
Sayfanıza düzeni 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 penceresinden işe alımcı düzen paketini seçin. Ardından ana sayfa düzenini kullanmak için tıklayın.
Düzen ile Ekstra İçeriği Sil
Düzen sayfaya yüklendikten sonra, tel kafes görünüm modunu dağıtın ve tam genişlikli başlık ve doğrudan altındaki bölüm hariç düzenin tüm içeriğini silin.
Metin Seçim Çerçevesi Animasyonu Oluşturma
Gördüğünüz gibi, “kiralanmış” 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 modülünü duyarlı bir metin çerçevesi tasarım öğesine dönüştüreceğiz. Metin çerçevesini duyarlı hale getirmenin anahtarı, satır ve metin modülünün tarayıcı penceresinin tüm genişliğini kapladığından emin olmaktır. Bunu %100 genişlik kullanarak yapabiliriz. Daha sonra metin boyutu için vw uzunluk birimini kullanabiliriz. Bu, metnin tarayıcı genişlikleriyle güzel bir şekilde ölçeklenmesini sağlayacaktır. Bundan sonra, daha önce basit metin kayan yazı örneğimizi yapmak için kullandığımız ilkeleri uygulayacağız.
İşte nasıl yapılacağı.
Satır Ayarlarını Güncelle
Daha önce de belirtildiği gibi, bu duyarlı metin seçim çerçevesi tasarımının çalışması 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ını sağlar. Hazır düzenimiz zaten %100 genişliğe sahip bir satıra sahip olduğundan, hiçbir şey yapmamıza gerek yok.
Ancak, ayarların geri kalanını aşağıdaki gibi ayarlamamız gerekiyor.
- Marj: -24vw alt
- Dönüştür Y eksenini çevir: -24vw
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Negatif alt kenar boşluğu, transform translate kullanarak satırı yukarı hareket ettirdiğimizde kalan negatif boşluktan kurtulmaktır. Ve metin kayan yazı efektimiz için satırın taşmasını gizlememiz gerekiyor.
Metin Modülü Metin Tasarımını Güncelle
Şimdi tek yapmanız gereken, metin modülünü büyük bir metin çerçevesi tasarım öğesine dönüştürmek için güncellememiz.
Metin modülünü açın ve aşağıdakileri güncelleyin:
- Metin Metin Rengi: rgba(255,255,255,0.16)
- Metin Metin Boyutu: 36vw
- Kenar boşluğu: -%100 sol, %100 sağ
Metin boyutu bir vw uzunluk birimi kullanıyor, böylece metin tarayıcının genişliğiyle güzel bir şekilde ölçeklenecek.
Metin Modülüne Animasyon Ekleme
- Animasyon Stili: Slayt
- Animasyon Yönü: Sol
- Animasyon Süresi: 10000ms
- Animasyon Yoğunluğu: %100
- Animasyon Hız Eğrisi: Doğrusal
- Animasyon Tekrarı: Döngü
Son tasarım
Şimdi son tasarımı kontrol edin.
Son düşünceler
Metin çerçeveleri, web tasarımında sahip olmak için uygun bir araç olabilir. Onlar da kesinlikle haber etiketleri olarak işlev görmekle sınırlı değildir. Ayrıca web tasarımınıza güzel bir animasyon öğesi ekleyebilirler. Ve en iyi yanı, Divi'nin onları her türlü güzel şekilde yaratmayı ve tasarlamayı kolaylaştırmasıdır. Umarım bu eğitim, ihtiyacınız olan zaman geldiğinde bazı basit metin çerçeveleri oluşturmanıza yardımcı olur.
Yorumlarda sizden haber bekliyorum.
Şerefe!