Metin büyük harfleri, ekranınıza kayan bir metin kutusu sağlar. Site Web yararlı alıntılarla okuyucuların ilgisini çeken içindekiler. Bunlar aynı zamanda kayan yazılar (veya haber kayan yazıları) olarak da adlandırılır ve genellikle sayfanın üstünde veya altında sürekli bir haber güncellemesi akışı görüntülemek için kullanılır. . Genellikle kaydırma animasyonu tek bir satırla yapılır. içindekiler bilgilerin tekrar tekrar görüntülenmesi için bir döngü içinde. Ne yazık ki <marquee>Html etiketi artık kullanılmadığından, bu günlerde kayan çerçeve oluşturmak için CSS ve JavaScript'e güveniyoruz. Ancak Divi ile özel kod hakkında endişelenmeden basit bir seçim dikdörtgeni oluşturabilirsiniz.

Bu eğitimde Divi ile basit bir seçim metni oluşturmanın ne kadar kolay olduğunu açıklayacağız. Fareyle üzerine gelindiğinde kayan metin animasyonunu nasıl duraklatacağımızı ve başlıklarınız için benzersiz bir tasarım öğesi olarak büyük kaydırmalı metni nasıl ekleyeceğinizi bile göreceğiz.

Başlayalım.

anket

Başlamak için neye ihtiyacınız var?

Başlamak için aşağıdakilere ihtiyacınız var:

1. Le Divi teması yüklü ve aktif
2. Ön uçta sıfırdan oluşturmak için oluşturulmuş yeni bir sayfa (görsel kurucu)

Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Anlayış Başlangıcı

Bu ilk örnek için, bir metin satırı için basit bir metin dikdörtgeni oluşturacağız. Bunu yapmak için, taşma gizlenmiş olarak bir satıra maksimum genişlik vereceğiz. Ardından, metin satırını içeren bir metin modülüne döngüsel slayt animasyonu ekleyeceğiz, böylece bir dikdörtgen gibi tekrar tekrar satıra kayacak.

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

Sütun satırlı normal bir bölüm oluşturarak başlayın.

Ardından, bir modül eklemeden önce satırı şu şekilde sabit bir genişlik, gölge kutusu ve yarıçapla güncelleyin:

• Maksimum genişlik: 200px
• Döşeme: Üstte 10px, altta 10px
• 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ü ekle

Satır tamamlandığında, satıra yeni bir metin modülü ekleyin.

Daha sonra güncelleyin içindekiler gövdenin tek satırlık bir metinle. Şimdilik metin satırının başka bir satıra bölünmediğinden emin olun.

• Organ: "Bu bir cümledir"

Metin modülü tasarımı

Metin modülü tasarım parametrelerini aşağıdaki gibi güncelleyin:

• Marj: Solda% -100, sağda% 100

Bu, metin modülünü satırın solunun dışında konumlandırır. Hattın gizli görünürlüğü gizlendiğinden, modül, biz onu görünür kılmak için animasyon ekleyene kadar gizlenecektir.

• Animasyon Stili: Slayt
• Animasyon yönü: Sağ
• Animasyon süresi: 5000 ms
• Animasyon yoğunluğu:% 100
• Animasyon Başlangıç ​​opaklığı:% 100
• Hız eğrisinin animasyonu: linear
• Animasyonu tekrarla: Döngü

Sonuç

Şimdi sonucu görelim.

Daha uzun metin satırları oluşturma

Yukarıdaki basit seçim metin tasarımında, metin satırının genişliğini satır ile aynı genişlikte sınırladık. Bununla birlikte, aynı genişlikte daha uzun bir metin satırı oluşturmak istiyorsak, ayarları biraz değiştirmemiz gerekecek.

İlk önce, metin modülünde ve metnin gövdesini aşağıdaki ile değiştirin:

Bu, bağlantılı bir aşamadır

En uzun metin satırına sığması için daha fazla genişlik ve kenar boşluğu ekleyin

Fark edebileceğiniz gibi, metin bir yerine üç satıra bölünmüştür.

Bu nedenle, animasyonun kenar boşluğunu ve yoğunluğunu ayarlamamız gerekiyor.

• Genişlik:% 207
• Marj: Solda% -207, sağda% 207
• 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 bir metin satırı için yalnızca yeterli alan kalır. Ardından animasyonun yoğunluğunu, döngü animasyonu arasında büyük bir kesinti olmayacak şekilde ayarlayın.

Sonuç

İşte son sonuç.

Fareyle üzerine gelindiğinde seçim metni animasyonunu duraklat

Bu seçim çerçevesi bir bağlantı içerdiğinden, kullanıcıların hareket ederken bağlantıya tıklamaları zor olacaktır. Bununla birlikte, metin modülüne fareyle üzerine gelindiğinde animasyonu duraklatacak küçük bir css parçacığı ekleyebiliriz.

Fareyle üzerine gelindiğinde animasyonu duraklatmak için CSS parçacığı ekleyin

Css parçacığını eklemek için metin modülü ayarlarını açın ve aşağıdaki özel CSS kodunu ana öğeye ekleyin fareyle üzerine gelme sekmesinin altında :

animasyon oynatma durumu: duraklatıldı;

Nihai sonuç

Şimdi son sonucu kontrol edin. İmleç metnin üzerine geldiğinde metin animasyonunun durduğunu ve kullanıcının bağlantıyı tıklamasına izin verdiğini unutmayın.

Hepsi bu eğitim için, umarım size Divi'de kayan bir metin eklemeyi öğretmiştir.