Divi’de alternatif metin nasıl uygulanır
Metnin alt çizgisi stili her zaman çok sınırlayıcıdır. Web’deki metnin altını çizmek için en yaygın yöntem, CSS “Metin-Decoration: Under Line” özelliğini kullanmaktır. Divi, Divi Oluşturucu modülünü ayarlamada bu tür alt hatları uygulamanıza ve organize etmenize bile izin verir. Ancak bu standart alt hat yönteminin stil ve çapraz tarayıcı desteği açısından sınırlamaları vardır. Gerçekten de, çoğu durumda, metnin altını çizmek karmaşık olması gerekmez. Örneğin, bağlantının tıklanabileceğini göstermek için sitenizdeki tüm bağlantıların altını çizin, herhangi bir alternatif yöntem gerektirmeyen standart bir uygulamadır. Ancak, bir sonraki seviyenin altını çizmek istiyorsanız, bu yazı yardımcı olabilir.
Bu öğreticide, Divi’deki metninize bazı alternatif metin satırları uygulayarak size rehberlik edeceğim. Metnin altını çizmek için Divi’nin varsayılan seçeneklerini kullanarak standart yöntemi göstereceğim. Ayrıca, metnin altını çizmek için alternatif bir yöntem olarak alt sınırın nasıl kullanılacağını da göstereceğim. Alt sınırı kullanmak sadece stil üzerinde daha fazla kontrol sağlamakla kalmaz, aynı zamanda tüm tarayıcılarda da desteklenir. Başlayalım. Metni metin dekorasyonu (genel yöntem) ile altını çizin metnin altını çizmenin en yaygın ve kolay yolu metin dekorasyonunun CSS özelliğini kullanmaktır. Aslında, DIVI bu yöntemi kullanarak metin düzenlemenize olanak tanır. Sadece metin yazı tipi stili seçeneğini arayın ve alt çizgi metin dekorasyonunu uygulamak için “U” simgesini seçin. Alt çizgi yazı tipi kuvveti seçildikten sonra, alt satırın rengini ve stilini ayarlama seçeneğiniz de olacaktır.
Çift
Noktalı
Koparmak
Pürtüklü görünüm
İçindekiler metnindeki bağlantının alt çizgi stilini bile hedefleyebilirsiniz. Bu, metin modülünü kullanırken tasarım üzerinde daha büyük bir kontrol sağlar. Metin Tasarım Kategorisi’ni geçişin altındaki yazı tipi bağlantısı sekmesini seçin. Yazı tipi stili bağlantısı için “alt çizgiyi” seçin. Ardından, uygun bağlantı hattının rengini ve stilini ayarlayabilirsiniz. Çizgi tarzı metin dekorasyonunun sınırları, metin dekorasyonunun metnini eklerken, hattın genişliğini ve konumunu ayarlama yeteneğine sahip değildir: Varsayılan Divi ayarlarını kullanarak CSS’nin altını çizer, çizginin veya çizginin konumu. Çizginin genişliği yazı tipi boyutu ile ilgilidir, böylece yazı tipi boyutunu artırdıkça artacaktır. Ve alt çizgi konumu zemin çizgisinde olduğu için, iniş (zemin hattının altına düşen küçük harf), özellikle birçok türev (“tipografi” gibi) kelimelerle bazı tutarsızlıklara neden olan çizgileri bloke eder. Türevler hakkında endişelenmenize gerek yok çünkü tüm büyük harfli metni kullanıyorsanız bu sınır sorun olmayabilir. Alt çizginin genişliğini ve alt çizginin konumunu ayarlamak için destek olsaydı güzel olurdu, ancak şimdilik daha az şanslıyız. İnternet Explorer tarayıcı desteği yok, metin-dekorasyon tarzı veya metin-dekorasyon-renk özelliğini desteklemez, böylece alt çizgi kuvveti (çift, noktalı, kırık, vb.) Ve alt çizginin rengi olamaz Düzeltilebilir. Safari ayrıca metin dekorasyon stilinin özelliğini desteklemez, ancak sonuçların rengini değiştirebilirsiniz. Destek eksikliği Divi ile sınırlı değildir. Özel CSS bile size yardımcı olmaz. Metnin altını çizin Alt sınırı kullanarak metin stilinin altını çizmek için alternatif bir çözüm arıyorsanız, bence en iyi seçenek alt sınırı kullanmaktır. İşte bunu yapmak için bazı iyi nedenler: Bir sınır, alt çizginizi organize etmek için sekiz farklı sınır stilini destekler: noktalı, kırık, sağlam, çift, arsa, sırt, böcek ve erken.
Yazı tipi boyutuna bağlı olarak genişlik (kalınlık) sınırını ayarlayabilirsiniz.
Sınırı metinden daha yakın veya daha fazla olacak şekilde konumlandırabilirsiniz.
Sınır için istediğiniz rengi ekleyebilirsiniz.
Sınır stilleri tüm tarayıcılar tarafından desteklenir.
Sınırlama altını çizmek için alt sınırı kullanır
Blok öğesindeki bir metin satırı ile sınırlıdır. Ancak bunun üstesinden gelmenin yolları vardır (aşağıya bakınız).
Tamamen soyundan yerleştirilmiş ve doğru pozisyonu elde etmek oldukça zor (ancak yapılabilir).
Blok ve satır öğeleri arasındaki farkı anlama Sınır çalışmasının çizgilerini anlamak için, blok ve seçilebilir elemanlar arasındaki farkı bilmeniz gerekir. Blok elemanları blok elemanları, kabın tam genişliğine otomatik olarak ulaşacaktır (özel olarak düzenlenmiş genişlik olmadıkça ) ve yeni satırlarda başlayın. Web sitesi (Divi ile oluşturulanlar dahil) blok unsurlarla doludur. Genel blok öğelerinin bazı örnekleri şunlardır:
Divi bölümü, satır, modül (div)
İçerik veya paragraf metni (P)
Başlık (H1, H2, H3, H4, H5, H6)
Liste (OL, UL)
Elemanları bloke etmek için alt sınırı eklerken, sınır tüm bloğun altında olacaktır. Dolayısıyla, iki veya daha fazla sıraya ayrılan bir metin (P) veya başlık (H1) paragrafınız varsa, alt sınır tek tek metin satırına değil, yalnızca bloğun altına uygulanır.
Aşağıda, metin birkaç satıra ayrıldığında H1 başlık bloğu öğesine alt sınırın nasıl ekleneceğinin bir örneği verilmiştir.
CSS, H1 etiketini hedef alsa da, çizgi yalnızca blok öğesine uygulanır. Bu nedenle çizgi sadece her satıra ayrı ayrı değil, sadece alt kısma uygulanır. Çizginin bir kısmı blok öğesi gibi değildir, bir öğe çizgisi birkaç satıra ayrılabilir. Dolayısıyla, eleman hattına (örneğin bir bağlantı gibi) alt limiti eklerseniz, bağlantı yeni bir satıra girse bile alt satır uygulanır. Buna ek olarak, alt çizgiyi konumlandırmak için çok iyi olan içerik metin çizgisinin yüksekliğini etkilemeden eleman hattının yatağını ayarlayabilirsiniz.
Aşağıdakiler, sonuçta olan birkaç bağlantının (varsayılan olarak çizgi öğelerinde) örnekleri verilmiştir.
Basitçe söylemek gerekirse, birkaç çizgiye girerken bir öğe çizgisi alt satıra sahip olabilir ve blok elemanları yapamaz. Sonuç olarak bir metin satırına (blok öğesi) nasıl eklenir Aşağıda, metin modülünün varsayılan ayarlarını kullanarak bir metin satırına alt limiti nasıl ekleyeceğinizin bir örneğidir. Bu seçenek başlıklar için en iyi şekilde çalışır çünkü metni tek bir satırla sınırlandırırsınız. Bir satır sütunla yeni bir parça oluşturun. Ardından aşağıdaki içerikle metin modülünü ekleyin: altını çizme tipografisi Ardından metin modülü ayarlarını aşağıdaki gibi güncelleyin:
Boyut metni metin: 46px (masaüstü), 40px (tablet), 26px (cep telefonu) Yüksek çizgi metin: 1.8em
Genişlik: 517 piksel (masaüstü), 450 piksel (tablet), 293 piksel (cep telefonu)
Alt sınır genişliği: 2px
Alt sınır rengi: #0c71c3
Alt Sınır Kuvvetleri: Noktalı
Gördüğünüz gibi, sınır genişlik, renk ve stil kullanılarak düzenlenebilir. Alt sınır modüle uygulandığından, modülün genişliğini aynı metin genişliğine sahip ayarlamak gerekir. Bu nedenle, uygun modülün metninin boyutunu ve genişliğini değiştirmeniz gerekir.
Alt sınırın alt çizgisini daha önce belirtildiği gibi çizgilerle ayıran blok öğesine (başlık gibi) nasıl eklenir, başlık (H1, H2, H3, vb.) Gibi blok elemanları izin vermez Her satır duraklamasında sıraya uygulanacak alt sınır. Bunun etrafında çalışmak için metnimizi span etiketleriyle sarıyoruz. Aralık, öğeye bir kuvvet eklemek için satırları (bir grup metin gibi) birlikte gruplamanıza olanak tanır. Bu nedenle, H1 etiketinin (blok öğesi) alt sınırı istiyorsak, metni H1 etiketine ek açıklama etiketleriyle sarabiliriz. Ardından, SPAN etiketine alt satır kuvvetini ekleyebiliriz. Bu, başka bir satıra girse bile H1 etiket metninin (veya bir kısmının) altını çizmemize izin verecektir. İşte birkaç satıra bölünmüş elemanları (başlık gibi) bloke etmek için alt sınırı nasıl ekleyeceğinizin bir örneğidir. Özel CSS kullanarak metin. İlk olarak, bir satır sütunla yeni bir parça ekleyin. Ardından metin modülünü satıra ekleyin. İçerik kutusunda, varsayılan yapay metni aşağıdakilerle değiştirin:
Bu, bir span etiketi ile stille alt çizgisi altını çizen alt sınıra sahip bir başlıktır.
Alt sınırın alt çizgisini ekleyeceğimiz için, H1 başlık hattının yüksekliğini aşağıdaki gibi artıralım:
Ardından, Gelişmiş sekmesinin altına aşağıdaki CSS CSS kimliğini ekleyin:
Kimlik CSS: Sınırlar
Daha sonra sermaye belirleme sermayesini açın ve aşağıdaki özel CSS’yi ekleyin:. Border-Underline Span {
Sınır dip: 2px kesik #0c71c3;
Dolgu: 0.1m 0;
Bu alt sınır düzenlemesi, aralık etiketindeki öğelere uygulanır. Ve açıklık etiketi bir öğe satırı olduğundan, sonuçta her satırdaki metne uygulanacaktır. Sınır tabakaları isteklerinize göre özelleştirilebilir. İlk değer (2px), sınırın kalınlığını (veya genişliğini) düzenler. İkinci değer (noktalı) sınır kuvvetini düzenler. Unutmayın, aşağıdaki sınır stilini de kullanabilirsiniz: Bağlantı kesme, bağlantı kesme, çift, akış, perakende, ekleme ve başlangıç. Ve üçüncü değer (#0c71c3) sınır rengini düzenler. Ayrıca, doğru mesafeyi elde etmek için metin modülünün varsayılan seçeneğinde metin satırının yüksek değeri ile birlikte özel CSS dolgusunu da değiştirebilirsiniz. Bir span etiketine ihtiyacınız yoksa ve tüm H1 etiketlerini bir öğe satırına dönüştürmek istiyorsanız, bu CSS’yi sayfa ayarlarında kullanabilirsiniz: Border-Underline H1 { Sınır dip: 2px kesik #0c71c3;
Dolgu: 0.1m 0;
Ekran: satır içi;
}
Bu CSS’nin H1 etiketlerini hedeflediğini unutmayın. Alt sınır kuvvetine ve dolguya ek olarak, “Ekran: Satır içi”, H1 etiketini H1 metninin birkaç satırda bir alt satıra sahip olmasını sağlayan satır içi bir öğeye dönüştürür. Divi’deki satır çizgisine alt satır eklemek, özel bir CSS kullanarak Divi’deki çizgilerinizin metnine alt sınırı nasıl ekleyeceğinizin bir örneğidir. Önce bir satır bir sütunla yeni bir parça oluşturun ve metin modülünü satıra ekleyin. Ardından, içerik metnine birkaç bağlantı eklemek için WYSIWYG düzenleyicisini kullanın, böylece yapmanız gereken birkaç bağlantınız. Ardından, Gelişmiş sekmesinin altına aşağıdaki gibi özel bir CSS sınıfı ekleyin: CSS Sınıfı: Sınırlar
Şimdi sayfa ayarlarını açın ve metin modülündeki tüm bağlantılara alt limiti uygulamak için aşağıdaki özel CSS’yi ekleyin. .Border-Underline A {Border-Demet: 1px Katı #333333;
Dolgu: 0.1m 0;
}
Sınır mülkleri isteklerinize göre özelleştirilebilir. İlk değer (1px), sınırın kalınlığını (veya genişliğini) düzenler. İkinci (katı) değer sınır kuvvetini düzenler. Unutmayın, aşağıdaki sınır stilini de kullanabilirsiniz: Bağlantı kesme, bağlantı kesme, çift, akış, perakende, ekleme ve başlangıç. Ve üçüncü değer (#333333) sınır rengini düzenler. Dolayısıyla, alt çizgiyi noktalı bir stil ve farklı bir renk ile 2 piksel genişliğe sahip istiyorsanız, değeri şöyle bir şeyle değiştirebilirsiniz: sınır dipsi: 2px kesik #0c71c3;
Dolgu değerleri, alt çizgiyi dikey olarak konumlandıracak şekilde de ayarlanabilir. Metinden başka bir satır istiyorsanız, dolgu değerini aşağıdakiler gibi bir şeye artırabilirsiniz: dolgu: 0.3em 0; Bu özel dolguyu, doğru mesafeyi elde etmek için metin modülünün varsayılan seçeneğinde metin satırının yükseklik değeri ile birlikte de kullanabilirsiniz. Bağlantı bir öğe hattı olduğu için, alt çizgi çizgiyi bölen bağlantıda kalır. Bölücü peki ya? Bir metin dizisinin (blok öğeleri) altını çizerek gerçekten yaratıcı olmak istiyorsanız, her zaman divi bölücü modülünü kullanabilirsiniz. Bölücü modülü, kuvvet, yükseklik, genişlik, arka plan, sınır, kutu gölgesi ve daha fazlası gibi birçok doğuştan gelen seçeneğe sahiptir. Daha özel bir ekran için böcekleri birbirine bile yığabilirsiniz. Aşağıda, metnin gradyan arka plana sahip bir çift satırla altını çizmek için kullanılan bölücü modülünün hızlı bir örneğidir. Bölme modülünü doğrudan metninizi içeren metin modülünün altına ekleyin. Sonra aşağıdakileri güncelleyin: Sol renk gradyan arka plan: #2B87da
Doğru renk gradyan arka plan: #29c4a9
Gradyan Türü: Doğrusal
Gradyan yönü: 90 derece Renk: #ffffff Bölücü ağırlığı: 2px Yükseklik: 2 piksel Genişlik: 400 piksel (bu, yukarıdaki metnin genişliğine göre ayarlanmalıdır)
Pilding Custom: 5px üst, 5 piksel aşağıda
Son zihin Umarım bu öğretici size Divi’deki metnin alt çizgisini eklemek için yararlı bir alternatif sunar. “Metin dekorasyonu: alt çizgiyi” kullanmanın genel yöntemi en kolay çözümdür, ancak sınırlamaları bir engel olabilir. Sonuç olarak, gerçekten hattın stili ve yerleşimi üzerinde biraz daha fazla kontrol sağlıyor. Ve özel CSS açıkça karmaşık değildir ve ihtiyaçlarınıza göre kolayca değiştirilebilir. Bu nedenle, metninizin bir sonraki seviyeye geçmesini istiyorsanız, bu yardımcı olacaktır. Her zamanki gibi, yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
