Divi ile basit bir metin çadırı nasıl yapılır
Text Tent, web sitenize yararlı içerik snippet’lerine sahip okuyucuları içeren bir metin yükseltme alanı sağlar. Onlara aynı zamanda işaretler (veya haber işaretleri) denir ve genellikle sayfanın üstünde veya altında istikrarlı haber güncelleme akışı göstermek için kullanılır. Genellikle kaydırma animasyonu, bilgilerin tekrar tekrar görüntülenmesi için bir dairede bir içerik satırıyla yapılır. Ne yazık ki, html modası geçmiş, bu yüzden bugün yapmak için CSS ve JavaScript’e güveniyoruz. Ancak, Divi ile özel kodlar hakkında endişelenmek zorunda kalmadan basit bir çadır yapabilirsiniz.
Bu öğreticide, Divi ile basit bir metin çadırı yapmanın ne kadar kolay olduğu konusunda size rehberlik edeceğiz. Hatta yüzerken kaydırma metninin animasyonunu ve başlığınız için benzersiz bir tasarım öğesi olarak büyük bir metin çadırının nasıl ekleneceğini nasıl duraklatacağız. Başlayalım. Gizlice göz atma
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
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. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Bölüm 1: Divi’de basit bir metin çadırı yapın
Bu ilk örnek için, bir metin satırı için basit bir metin çadırı yapacağız. Bunu yapmak için, gizli taşma ile maksimum genişlik satırını vereceğiz. Ardından, metin satırını içeren metin modülüne animasyonlu bir slayt döngüsü ekleyeceğiz, böylece slayt tekrar tekrar bir çadır gibi görünen satırı geçer. İşte nasıl yapılacağı. İlk olarak, bir satır sütun içeren normal bir bölüm oluşturun.
Ardından, modülü eklemeden önce, hattı sabit bir genişlik, kutunun gölgesi ve sınır yarıçapı aşağıdaki gibi güncelleyin: Maksimum genişlik: 200px
Dolgu: 10 piksel üst, 10 piksel aşağıda
Yuvarlak açı: 10 piksel
Gölge Kutusu: Ekran yakalamaya bakın
Yatay taşma: gizli
Dikey Taşma: Satır tamamlandıktan sonra metin modülüne eklenir, satıra yeni bir metin modülü ekleyin.
Ardından içerik içeriğini bir metin satırıyla güncelleyin. Şimdilik, metin satırının başka satırlara girmediğinden emin olun. Beden: “Bu ifade” Metin Modülü Tasarım Güncelleme Metin Modülü Tasarım Ayarları aşağıdaki gibi:
Marj:% -100 sol,% 100 sağ
Bu, metin modülünü satırın sol solunun dışına konumlandırır. Hatta gizli bir taşma görünürlüğü olduğundan, onu görüntülemek için animasyon ekleyene kadar modül gizlenir.
Animasyon Stili: Slayt
Animasyonlu yön: doğru Animasyon Süresi: 5000ms
Animasyon yoğunluğu:% 100
Animasyon Opaklık Başlar:% 100
Animasyon Hız Eğrisi: Doğrusal
Animasyon tekrarlama: döngü
Sonuçlar şimdi sonuçlara bakalım.
Yukarıdaki basit metin çadır tasarımında daha uzun bir metin çizgisi yaparak, metin çizgisinin genişliğini aynı sıra genişliğiyle sınırladık. Ancak, satırın aynı genişliğine sahip daha uzun bir metin çizgisi yapmak istiyorsak, ayarları biraz değiştirmemiz gerekir. İlk olarak, metin modülünde ve içerik metnini aşağıdakilerle değiştirin:
Bu, bağlantı
Animasyon yoğunluğu:% 75
Buradaki hile, genişliği artırmak ve marj değerini güncellemektir, böylece bir metin satırı için yeterli alan sağlarsınız. Ardından, tekrarlama animasyonu arasında büyük bir duraklama olmayacak şekilde animasyonun yoğunluğunu ayarlayın. Aşağıdaki sonuçlar nihai sonuçtur.
Daired Marquee’nin metin animasyonu yönlendirilir çünkü bu çadır bir bağlantı içermektedir, kullanıcıların hareket ederken bağlantıya gerçekten tıklaması zor olacaktır. Ancak, imleci yönlendirirken animasyonu duraklatacak metin modülüne küçük CSS parçaları ekleyebiliriz. CSS görüntüleri eklemek için yüzerken animasyonu duraklatmak için CSS görüntüleri ekleyin, metin modülü ayarlarını açın ve aşağıdaki özel CSS’yi Hover sekmesinin altındaki ana öğelere ekleyin: animasyon-play-state: duraklatıldı;
Nihai sonuç şimdi sonucu görüyor. İmleç metnin üzerinde yüzdüğünde metin animasyonunun nasıl duracağını unutmayın, kullanıcıların bağlantıyı tıklamasına izin verir.
Bölüm 2: Divi’de Duyarlı Tasarım Elemanı olarak Metin Marquee yapmak Artık Divi’de basit bir metin çadırının nasıl yapılacağını anladığımıza göre, duyarlı metin tasarım öğeleri oluşturmak için aynı kavramı alabiliriz. Bu, başlıklar veya bölüm başlıkları için benzersiz bir animasyon tasarımı oluşturmak için iyi çalışacaktır. Bunu yapmak için, önceden hazırlanmış ana sayfa düzeni Divi çalışma işverenlerini kullanacağız. Sayfanıza düzen eklemek için önceden hazırlanmış düzeni ekleyin, Divi üreticisinin altındaki Ayarlar menüsünü açın ve artı sembolünü tıklayın. Kütüphaneden yük açılır penceresinden İş İşe Alım Düzeni Paketini seçin. Ardından ana sayfa düzenini kullanmak için tıklayın. Düzen sayfaya yüklendikten sonra, çerçeve görüntü görüntüleme modunu uyguladıktan ve aşağıdaki tam geniş başlık ve doğrudan bölüm hariç tüm düzen içeriğini silmeden ekstra içeriği kaldırın. “Kullanılan” kelime, ikinci bölümde metin modülünde büyük metin tasarım öğeleri olarak kullanılmıştır. Metin modülünü duyarlı bir metin tasarım öğesi olarak değiştireceğiz. Duyarlı bir seçim çerçevesi metni yapmanın anahtarı, tarayıcı penceresinin tam genişliğine ulaşmasını sağlamaktır. Bunu%100 genişlik kullanarak yapabiliriz. Ardından VW uzunluğu ünitesini metin boyutu için kullanabiliriz. Bu, tarayıcının genişliği ile iyi bir metin ölçeği oluşturacaktır. Bundan sonra, önceki basit metin çadır örneklerimizi yapmak için kullandığımız prensibi uygulayacağız. İşte nasıl yapılacağı. Hat ayarlarını güncelleyin Daha önce belirtildiği gibi, duyarlı metin çadır tasarımı işlevleri için satır% 100 olmalıdır. Bu, metin modülümüzün tarayıcının genişliğine göre VW uzunluğu birimini kullanmasını sağlar. Önceden yapılan düzenimizin zaten%100 genişliğe sahip bir satırı olduğundan, hiçbir şey yapmamıza gerek yok. Ancak, kalan ayarları aşağıdaki gibi ayarlamamız gerekir. Marj: -24vw aşağıda Dönüşüm Y eksenini çevirin: -24vw
Yatay taşma: gizli Dikey taşma: gizli
Negatif alt marj, tercüman dönüşümleri kullanarak satırı her hareket ettirdiğimizde kalan negatif alanı ortadan kaldırmaktır. Ve metin çadırımızın etkisi için satır taşmasını gizlememiz gerekiyor. Metni Güncelle Tasarım Yapmanız gereken geçerli metin modülü, metin modülünü büyük bir metin çadır tasarım öğesine dönüştürmek için güncellemektir. Aşağıdaki metin modülünü açın ve aşağıdakileri güncelleyin: Metin Renk Metni: RGBA (255,255,255,0.16)
Metin Boyutu: 36VW
Marj:% -100 sol,% 100 sağ
Metnin boyutu, metnin tarayıcının genişliği ile iyi boşaltılacak şekilde VW uzunluğu birimini kullanır. Metin modülüne animasyon ekle
Animasyon Stili: Slayt
Animasyonlu Yön: Sol
Animasyon Süresi: 10000ms
Animasyon yoğunluğu:% 100 Animasyon Hız Eğrisi: Doğrusal
Animasyon tekrarlama: döngü
Son tasarım şimdi son tasarımı kontrol edin.
Metnin metninin son zihni, web tasarımında sahip olmak için rahat bir araç olabilir. Ayrıca haber işaretleri olarak işlev görmeleri ile sınırlı değildir. Ayrıca web tasarımınıza iyi bir animasyon öğesi ekleyebilirler. Ve en iyi yanı, Divi’nin çeşitli güzel yollarla yapmayı ve tasarlamayı kolaylaştırmasıdır. Umarım bu öğretici, ihtiyacınız olduğunda basit bir metin yapmanıza yardımcı olur. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
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. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Bölüm 1: Divi’de basit bir metin çadırı yapın
Bu ilk örnek için, bir metin satırı için basit bir metin çadırı yapacağız. Bunu yapmak için, gizli taşma ile maksimum genişlik satırını vereceğiz. Ardından, metin satırını içeren metin modülüne animasyonlu bir slayt döngüsü ekleyeceğiz, böylece slayt tekrar tekrar bir çadır gibi görünen satırı geçer. İşte nasıl yapılacağı. İlk olarak, bir satır sütun içeren normal bir bölüm oluşturun.
Ardından, modülü eklemeden önce, hattı sabit bir genişlik, kutunun gölgesi ve sınır yarıçapı aşağıdaki gibi güncelleyin: Maksimum genişlik: 200px
Dolgu: 10 piksel üst, 10 piksel aşağıda
Yuvarlak açı: 10 piksel
Gölge Kutusu: Ekran yakalamaya bakın
Yatay taşma: gizli
Dikey Taşma: Satır tamamlandıktan sonra metin modülüne eklenir, satıra yeni bir metin modülü ekleyin.
Ardından içerik içeriğini bir metin satırıyla güncelleyin. Şimdilik, metin satırının başka satırlara girmediğinden emin olun. Beden: “Bu ifade” Metin Modülü Tasarım Güncelleme Metin Modülü Tasarım Ayarları aşağıdaki gibi:
Marj:% -100 sol,% 100 sağ
Bu, metin modülünü satırın sol solunun dışına konumlandırır. Hatta gizli bir taşma görünürlüğü olduğundan, onu görüntülemek için animasyon ekleyene kadar modül gizlenir.
Animasyon Stili: Slayt
Animasyonlu yön: doğru Animasyon Süresi: 5000ms
Animasyon yoğunluğu:% 100
Animasyon Opaklık Başlar:% 100
Animasyon Hız Eğrisi: Doğrusal
Animasyon tekrarlama: döngü
Sonuçlar şimdi sonuçlara bakalım.
Yukarıdaki basit metin çadır tasarımında daha uzun bir metin çizgisi yaparak, metin çizgisinin genişliğini aynı sıra genişliğiyle sınırladık. Ancak, satırın aynı genişliğine sahip daha uzun bir metin çizgisi yapmak istiyorsak, ayarları biraz değiştirmemiz gerekir. İlk olarak, metin modülünde ve içerik metnini aşağıdakilerle değiştirin:
Bu, bağlantı
Dikkat edebileceğiniz gibi daha uzun metin satırını barındırmak için daha fazla genişlik ve marj ekleyin, metin artık bir tane değil üç satıra ayrılmıştır.
Bu nedenle, animasyonun marjını ve yoğunluğunu ayarlamamız gerekir.
Animasyon yoğunluğu:% 75
Buradaki hile, genişliği artırmak ve marj değerini güncellemektir, böylece bir metin satırı için yeterli alan sağlarsınız. Ardından, tekrarlama animasyonu arasında büyük bir duraklama olmayacak şekilde animasyonun yoğunluğunu ayarlayın. Aşağıdaki sonuçlar nihai sonuçtur.
Daired Marquee’nin metin animasyonu yönlendirilir çünkü bu çadır bir bağlantı içermektedir, kullanıcıların hareket ederken bağlantıya gerçekten tıklaması zor olacaktır. Ancak, imleci yönlendirirken animasyonu duraklatacak metin modülüne küçük CSS parçaları ekleyebiliriz. CSS görüntüleri eklemek için yüzerken animasyonu duraklatmak için CSS görüntüleri ekleyin, metin modülü ayarlarını açın ve aşağıdaki özel CSS’yi Hover sekmesinin altındaki ana öğelere ekleyin: animasyon-play-state: duraklatıldı;
Nihai sonuç şimdi sonucu görüyor. İmleç metnin üzerinde yüzdüğünde metin animasyonunun nasıl duracağını unutmayın, kullanıcıların bağlantıyı tıklamasına izin verir.
Bölüm 2: Divi’de Duyarlı Tasarım Elemanı olarak Metin Marquee yapmak Artık Divi’de basit bir metin çadırının nasıl yapılacağını anladığımıza göre, duyarlı metin tasarım öğeleri oluşturmak için aynı kavramı alabiliriz. Bu, başlıklar veya bölüm başlıkları için benzersiz bir animasyon tasarımı oluşturmak için iyi çalışacaktır. Bunu yapmak için, önceden hazırlanmış ana sayfa düzeni Divi çalışma işverenlerini kullanacağız. Sayfanıza düzen eklemek için önceden hazırlanmış düzeni ekleyin, Divi üreticisinin altındaki Ayarlar menüsünü açın ve artı sembolünü tıklayın. Kütüphaneden yük açılır penceresinden İş İşe Alım Düzeni Paketini seçin. Ardından ana sayfa düzenini kullanmak için tıklayın. Düzen sayfaya yüklendikten sonra, çerçeve görüntü görüntüleme modunu uyguladıktan ve aşağıdaki tam geniş başlık ve doğrudan bölüm hariç tüm düzen içeriğini silmeden ekstra içeriği kaldırın. “Kullanılan” kelime, ikinci bölümde metin modülünde büyük metin tasarım öğeleri olarak kullanılmıştır. Metin modülünü duyarlı bir metin tasarım öğesi olarak değiştireceğiz. Duyarlı bir seçim çerçevesi metni yapmanın anahtarı, tarayıcı penceresinin tam genişliğine ulaşmasını sağlamaktır. Bunu%100 genişlik kullanarak yapabiliriz. Ardından VW uzunluğu ünitesini metin boyutu için kullanabiliriz. Bu, tarayıcının genişliği ile iyi bir metin ölçeği oluşturacaktır. Bundan sonra, önceki basit metin çadır örneklerimizi yapmak için kullandığımız prensibi uygulayacağız. İşte nasıl yapılacağı. Hat ayarlarını güncelleyin Daha önce belirtildiği gibi, duyarlı metin çadır tasarımı işlevleri için satır% 100 olmalıdır. Bu, metin modülümüzün tarayıcının genişliğine göre VW uzunluğu birimini kullanmasını sağlar. Önceden yapılan düzenimizin zaten%100 genişliğe sahip bir satırı olduğundan, hiçbir şey yapmamıza gerek yok. Ancak, kalan ayarları aşağıdaki gibi ayarlamamız gerekir. Marj: -24vw aşağıda Dönüşüm Y eksenini çevirin: -24vw
Yatay taşma: gizli Dikey taşma: gizli
Negatif alt marj, tercüman dönüşümleri kullanarak satırı her hareket ettirdiğimizde kalan negatif alanı ortadan kaldırmaktır. Ve metin çadırımızın etkisi için satır taşmasını gizlememiz gerekiyor. Metni Güncelle Tasarım Yapmanız gereken geçerli metin modülü, metin modülünü büyük bir metin çadır tasarım öğesine dönüştürmek için güncellemektir. Aşağıdaki metin modülünü açın ve aşağıdakileri güncelleyin: Metin Renk Metni: RGBA (255,255,255,0.16)
Metin Boyutu: 36VW
Marj:% -100 sol,% 100 sağ
Metnin boyutu, metnin tarayıcının genişliği ile iyi boşaltılacak şekilde VW uzunluğu birimini kullanır. Metin modülüne animasyon ekle
Animasyon Stili: Slayt
Animasyonlu Yön: Sol
Animasyon Süresi: 10000ms
Animasyon yoğunluğu:% 100 Animasyon Hız Eğrisi: Doğrusal
Animasyon tekrarlama: döngü
Son tasarım şimdi son tasarımı kontrol edin.
Metnin metninin son zihni, web tasarımında sahip olmak için rahat bir araç olabilir. Ayrıca haber işaretleri olarak işlev görmeleri ile sınırlı değildir. Ayrıca web tasarımınıza iyi bir animasyon öğesi ekleyebilirler. Ve en iyi yanı, Divi’nin çeşitli güzel yollarla yapmayı ve tasarlamayı kolaylaştırmasıdır. Umarım bu öğretici, ihtiyacınız olduğunda basit bir metin yapmanıza yardımcı olur. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
