Divi'de Alternatif Metin Alt Çizgi Stilleri Nasıl Uygulanır?

Metin altını çizme stilleri her zaman oldukça sınırlayıcı olmuştur. Web'deki metnin altını çizmenin en yaygın yöntemi, "metin-dekorasyonu: altı çiz" CSS özelliğini kullanmaktır. Divi, bu tür alt çizgiyi Divi Builder Module ayarlarında dağıtmanıza ve stillendirmenize bile izin verir. Ancak bu standart altını çizme yöntemi, stil ve tarayıcılar arası destek söz konusu olduğunda sınırlamalarla gelir.

Çoğu durumda, metnin altını çizmenin karmaşık olması gerekmez. Örneğin, sitenizdeki tüm bağlantıların tıklanabilir olduklarını göstermek için altını çizmek, herhangi bir alternatif yönteme ihtiyaç duymayan standart bir uygulamadır. Ancak, bir sonraki seviyeye altını çizmek istiyorsanız, bu gönderi yardımcı olabilir.

Bu eğitimde, Divi'deki metninize bazı alternatif metin altını çizme stillerini nasıl uygulayacağınız konusunda size yol göstereceğim. Metnin altını çizmek için Divi'nin yerleşik seçeneklerini kullanarak size standart yöntemi göstereceğim. Ayrıca, metnin altını çizmek için alternatif bir yöntem olarak alt kenarlıkların nasıl kullanılacağını da göstereceğim. Alt kenarlık kullanmak yalnızca stil üzerinde daha fazla kontrol sahibi olmanızı sağlamakla kalmaz, aynı zamanda tüm tarayıcılarda da desteklenir.

Başlayalım.

Metin Süslemeli Metnin Altını Çizme (ortak yöntem)

Metnin altını çizmenin en yaygın ve basit yolu, metin dekorasyonu CSS özelliğini kullanmaktır. Aslında Divi, bir modülün yerleşik seçenekleri içinde bu yöntemi kullanarak metni kolayca biçimlendirmenize olanak tanır. Metin Yazı Tipi Stili seçeneğini arayın ve altı çizili metin dekorasyonunu yerleştirmek için “ U ” simgesini seçin. Alt çizgi yazı tipi stili seçildiğinde, alt çizginin rengini ve stilini özelleştirme seçeneğiniz de olacaktır.

Bu, gerçek metin renginden farklı bir alt çizgi rengine sahip olmanızı sağlar.

Ve aşağıdaki alt çizgi stilleri arasından seçim yapabilirsiniz:

• Sağlam
• Çift
• Noktalı
• kesikli
• Dalgalı

Gövde metninin içindeki bağlantıların altı çizili stilini bile hedefleyebilirsiniz. Bu, Metin Modülünü kullanırken size tasarım üzerinde daha fazla kontrol sağlar. Metin tasarımı kategorisi geçişi altındaki Bağlantı Yazı Tipi sekmesini seçmeniz yeterlidir. Bağlantı Yazı Tipi Stili için “Altı Çizili”yi seçin. Ardından, bağlantı alt çizgi rengini ve stilini buna göre özelleştirebilirsiniz.

Metin Dekorasyonu Altı Çizili Stil Sınırlamaları

Çizginin Genişliğini ve Konumunu Ayarlama Yeteneği Yok

Ne yazık ki, Divi'nin yerleşik ayarlarını kullanarak text-decoration: underline css özelliğini eklerken, çizginin genişliğini veya çizginin konumunu ayarlama seçeneği yoktur. Çizginin genişliği yazı tipi boyutuyla ilgilidir, bu nedenle yazı tipi boyutunu artırdıkça artacaktır. Ve alt çizginin konumu taban çizgisinde olduğu için, alt çizgiler (taban çizgisinin altına düşen küçük harfler) çizginin önüne geçecek ve özellikle çok sayıda alt çizgisi olan kelimelerde ("Tipografi" gibi) bazı tutarsızlıklara neden olacaktır. .

Tüm büyük harfli metni kullanıyorsanız, bu sınırlama bir sorun olmayabilir, çünkü endişelenecek herhangi bir alt öğeniz olmayacaktır. Alt çizgi genişliğini ve alt çizgi konumunu ayarlamak için destek olsaydı güzel olurdu, ancak şimdilik şansımız yok.

Tarayıcı Desteği Yok

Internet Explorer text-decoration-style veya text-decoration-color özelliğini desteklemez, bu nedenle alt çizgi stili (çift, noktalı, kesikli vb...) ve alt çizgi rengi özelleştirilemez. Safari, text-decoration-style özelliğini de desteklemez, ancak alt çizgi rengini değiştirebilirsiniz.

Bu destek eksikliği Divi ile sınırlı değil. Özel CSS bile size yardımcı olmaz.

Alt Kenarlık Kullanarak Metnin Altını Çizme

Metin stillerinin altını çizmek için alternatif bir çözüm arıyorsanız bence en iyi seçenek alt kenarlık kullanmaktır. İşte bunu yapmak için bazı iyi nedenler:

• Bir kenarlık, alt çizginizi şekillendirmek için sekiz farklı kenarlık stilini destekler: noktalı, kesikli, düz, çift, oluk, çıkıntı, ek ve dış.
• Yazı tipi boyutundan bağımsız olarak bir kenarlığın genişliğini (kalınlığını) özelleştirebilirsiniz.
• Kenarlıkları metne daha yakın veya daha uzak olacak şekilde konumlandırabilirsiniz.
• Kenarlıklara istediğiniz rengi ekleyebilirsiniz.
• Kenar Stilleri TÜM tarayıcılar tarafından desteklenir.

Alt Çizgi için Alt Kenarlıkları Kullanmaya İlişkin Sınırlamalar

• Blok öğelerinde tek satırlık metinle sınırlıdır. Ancak bunun etrafında yollar var (aşağıya bakın).
• Tamamen inişlerin altına yerleştirildi ve konumu doğru bir şekilde elde etmek biraz zor (ancak yapılabilir).

Blok ve Satır İçi Öğeler Arasındaki Farkı Anlama

Kenar altını çizmenin nasıl çalıştığını anlamak için blok ve satır içi öğeler arasındaki farkı bilmeniz gerekir.

Blok elemanları

Blok öğeleri, kapsayıcısının tam genişliğini otomatik olarak kaplayacak (özel bir genişlik ayarlanmadıkça) ve yeni bir satırda başlayacaktır. Web siteleri (Divi ile oluşturulanlar dahil) blok öğelerle doludur.

Ortak blok öğelerinin bazı örnekleri şunları içerir:

• Divi Bölümleri, Satırlar, Modüller (div)
• gövde metni veya paragraflar (p)
• başlıklar (h1, h2, h3, h4, h5, h6)
• listeler (ol, ul)

Blok öğelerine bir alt kenarlık eklerken, kenarlık tüm bloğun altına oturacaktır. Bu nedenle, iki veya daha fazla satıra ayrılan bir metin paragrafınız (p) veya bir başlığınız (h1) varsa, alt kenarlık metnin tek tek satırlarına değil, yalnızca bloğun altına uygulanacaktır.

Metin birden çok satıra bölündüğünde h1 başlık bloğu öğesine alt kenarlık eklemenin nasıl göründüğüne dair bir örnek.

css h1 etiketini hedeflemesine rağmen, satır yalnızca blok öğesine uygulanır. Bu nedenle, çizgi yalnızca en alta uygulanır ve her satıra ayrı ayrı uygulanmaz.

Satır İçi Öğeler

Blok öğelerinin aksine, satır içi öğeler birden çok satıra bölünebilir. Bu nedenle, bir satır içi öğeye bir alt kenarlık eklerseniz (örneğin bir bağlantı gibi), bağlantı yeni bir satıra ayrılsa bile alt kenarlığın alt çizgisi uygulanır. Ayrıca, alt kenar alt çizgisini konumlandırmak için harika olan gövde metninin satır yüksekliğini etkilemeden satır içi öğelerin dolgusunu ayarlayabilirsiniz.

Aşağıda, alt kenarlık altı çizgileri olan bazı bağlantılara (varsayılan olarak satır içi öğelerdir) bir örnek verilmiştir.

Basitçe söylemek gerekirse, satır içi öğeler, birden çok satıra bölünürken alt kenar çizgilerine sahip olabilir ve blok öğeleri yapamaz.

Tek Bir Metin Satırına Alt Kenarlık Altı Çizgisi Nasıl Eklenir (bir blok öğesi)

Burada, Metin Modülü yerleşik ayarlarını kullanarak tek bir metin satırına nasıl alt kenarlık ekleyeceğinize dair bir örnek verilmiştir. Metni tek bir satırla sınırlayacağınız için bu seçenek başlıklar için en iyi sonucu verir.

Bir sütun satırıyla yeni bir bölüm oluşturun. Ardından, aşağıdaki içeriğe sahip bir metin modülü ekleyin:

Underlining Typography

Ardından metin modülü ayarlarını aşağıdaki gibi güncelleyin:

• Metin metni Boyut: 46px (masaüstü), 40px (tablet), 26px (telefon)
• Metin Satır Yüksekliği: 1.8em
• Genişlik: 517 piksel (masaüstü), 450 piksel (tablet), 293 piksel (telefon)
• Alt Kenar Genişliği: 2px
• Alt Kenar Rengi: #0c71c3
• Alt Kenarlık Stili: Noktalı

Gördüğünüz gibi, kenarlık genişlik, renk ve stil kullanılarak şekillendirilebilir. Modüle alt kenarlık uygulandığı için modülün genişliğini metin ile aynı genişlikte ayarlamak gerekir. Bu nedenle, metin boyutunu ve modül genişliğini buna göre değiştirmeniz gerekecektir.

Satırlara Ayrılan Blok Öğelerine (başlıklar gibi) Alt Kenarlık Altı Çizgisi Nasıl Eklenir

Daha önce belirtildiği gibi, başlıklar (h1, h2, h3, vb…) gibi blok öğeleri, her satır sonunda alt kenarlığın satır içinde uygulanmasına izin vermez. Bunu aşmak için metnimizi bir span etiketi ile sarmamız yeterlidir. Yayılma, bu öğelere stil eklemek için satır içi öğeleri (bir metin grubu gibi) birlikte gruplandırmanıza olanak tanır. Dolayısıyla, bir h1 etiketine (bir blok elemanı) alt kenarlık yapmak istiyorsak, metni ek bir span etiketi ile h1 etiketinin içine sarabiliriz. Ardından, span etiketine alt kenarlık altı çizgi stilini ekleyebiliriz. Bu, başka bir satıra geçse bile h1 etiket metninin (veya bölümlerinin) altını çizmemize izin verecektir.

Özel CSS kullanarak birden çok metin satırına bölünen öğeleri (başlıklar gibi) engellemek için nasıl alt kenarlık ekleyeceğinize dair bir örnek.

İlk olarak, bir sütun satırı olan yeni bir bölüm ekleyin. Ardından satıra bir metin modülü ekleyin. İçerik kutusunda, varsayılan sahte metni aşağıdakiyle değiştirin:

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

Bir alt kenar alt çizgisi ekleyeceğimiz için h1 başlık satırı yüksekliğini şu şekilde artıralım:

Ardından, gelişmiş sekmenin altına aşağıdaki Özel CSS Kimliğini ekleyin:

CSS Kimliği: sınır altı çizili

Ardından sayfa ayarları modunu açın ve aşağıdaki Özel CSS'yi ekleyin:

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

Bu alt kenarlık stili, yayılma etiketi içindeki öğelere uygulanıyor. Span etiketi satır içi bir öğe olduğundan, alt çizgi her satırdaki metne uygulanacaktır.

border-bottom özelliği istediğiniz gibi özelleştirilebilir. İlk değer (2px) sınırın kalınlığını (veya genişliğini) belirler. İkinci değer (kesikli), kenarlığın stilini belirler. Unutmayın, şu kenarlık stillerini de kullanabilirsiniz: kesikli, noktalı, çift, oluk, çıkıntı, iç kısım ve çıkış. Ve üçüncü değer (#0c71c3), kenarlığın rengini belirler. Boşluğu da tam olarak elde etmek için, metin modülü yerleşik seçeneklerindeki metin satırı yüksekliği değeriyle birlikte özel dolgu css'i de ayarlayabilirsiniz.

Span etiketine ihtiyacınız yoksa ve h1 etiketinin tamamını satır içi öğeye dönüştürmek istiyorsanız, bunun yerine sayfa ayarlarında bu CSS'yi kullanabilirsiniz:

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

Bu css'nin h1 etiketini hedeflediğine dikkat edin. Alt kenarlık ve dolgu stillerine ek olarak, "display: inline", h1 etiketini, h1 metninin birden çok satırda altı çizili olmasına izin veren bir satır içi öğeye dönüştürür.

Divi'de Satır İçi Bağlantılara Alt Kenarlık Altı Çizgisi Ekleme

Özel CSS kullanarak Divi'deki satır içi bağlantı metninize nasıl alt kenarlık ekleyeceğinize dair bir örnek. Önce tek sütunlu bir satırla yeni bir bölüm oluşturun ve satıra bir metin modülü ekleyin.

Ardından, çalışmak için bazı bağlantılarınız olması için gövde metnine bazı bağlantılar eklemek için wysiwyg düzenleyicisini kullanın.

Ardından, Gelişmiş sekmesinin altına aşağıdaki gibi özel bir CSS sınıfı ekleyin:

CSS Sınıfı: kenarlık altı çizili

Şimdi sayfa ayarlarını açın ve metin modülünün içindeki tüm bağlantılara alt kenarlığı uygulamak için aşağıdaki özel CSS'yi ekleyin.

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

border-bottom özelliği istediğiniz gibi özelleştirilebilir. İlk değer (1px), sınırın kalınlığını (veya genişliğini) ayarlar. İkinci değer (katı), sınırın stilini belirler. Unutmayın, şu kenarlık stillerini de kullanabilirsiniz: kesikli, noktalı, çift, oluk, çıkıntı, iç kısım ve çıkış. Ve üçüncü değer (#333333) kenarlığın rengini belirler.

Bu nedenle, 2 piksel genişliğinde, kesikli stilde ve farklı bir renkte bir alt kenarlık altı çizgisi istiyorsanız, bu değerleri şuna benzer bir şeyle değiştirebilirsiniz:

border-bottom: 2px dashed #0c71c3;

Doldurma değeri, sınır alt çizgisini dikey olarak konumlandırmak için de ayarlanabilir. Dolayısıyla, satırın metinden daha aşağıda olmasını istiyorsanız, dolgu değerini aşağıdaki gibi bir değere yükseltebilirsiniz:

padding: 0.3em 0;

Boşluğu da tam olarak almak için bu özel dolguyu, metin modülü yerleşik seçeneklerindeki metin satırı yüksekliği değeriyle birlikte de kullanabilirsiniz.

Ve bağlantılar satır içi öğeler olduğundan, sınır altı çizgi, satırlar arasında bölünen bağlantılarda kalır.

Bölücüler ne olacak?

Tek satırlık metinlerin (blok öğeleri) altını çizerek gerçekten yaratıcı olmak istiyorsanız, Divi'nin ayırıcı modülünü her zaman kullanabilirsiniz. Ayırıcı modül, stil, yükseklik, genişlik, arka planlar, kenarlık, kutu gölgesi ve daha fazlası gibi birçok yerleşik seçeneğe sahiptir. Hatta daha özel görünümler için bölücüleri üst üste istifleyebilirsiniz.

Degrade arka plana sahip çift çizgili metnin altını çizmek için kullanılan bölücü modülün hızlı bir örneği.

Metninizi içeren bir metin modülünün altına doğrudan bir ayırıcı modül ekleyin. Ardından aşağıdakileri güncelleyin:

• Arka Plan Gradyanı Sol Renk: #2b87da
• Arka Plan Gradyanı Sağ Renk: #29c4a9
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 90deg
• Renk: #ffffff
• Bölücü Ağırlığı: 2px
• Yükseklik: 2 piksel
• Genişlik: 400 piksel (bunun yukarıdaki metnin genişliğine göre ayarlanması gerekir)
• Özel Dolgu: 5 piksel üst, 5 piksel alt

Son düşünceler

Umarım bu eğitim size Divi'de metin altını çizme stilleri eklemek için yararlı bir alternatif sunar. "Metin-dekorasyonu: altını çiz"i kullanan yaygın yöntem, açık ara en kolay çözümdür, ancak sınırlamalar bir sürükleme olabilir. Alt kenarlık altı çizgi yöntemi, çizgilerin stili ve yerleşimi üzerinde size biraz daha fazla kontrol sağlar. Ve özel CSS kesinlikle hantal değildir ve ihtiyaçlarınıza göre kolayca değiştirilebilir. Bu nedenle, altı çizili metninizi bir sonraki düzeye taşımak istiyorsanız, bu yardımcı olacaktır.

Her zaman olduğu gibi, yorumlarda sizden haber bekliyorum.

Şerefe!