Jak zastosować alternatywne style podkreślenia tekstu w Divi

Style podkreślania tekstu zawsze były dość ograniczające. Najpopularniejszą metodą podkreślania tekstu w Internecie jest użycie właściwości CSS „text-decoration: underline”. Divi pozwala nawet na wdrożenie i stylizację tego typu podkreślenia w ustawieniach modułu Divi Builder. Ale ta standardowa metoda podkreślania ma ograniczenia, jeśli chodzi o styl i obsługę różnych przeglądarek.

Oczywiście w większości przypadków podkreślenie tekstu nie musi być skomplikowane. Na przykład podkreślanie wszystkich linków w witrynie, aby pokazać, że można je kliknąć, jest standardową aplikacją, która niekoniecznie wymaga alternatywnych metod. Ale jeśli chcesz przenieść podkreślanie na wyższy poziom, ten post może pomóc.

W tym samouczku omówię, jak zastosować alternatywne style podkreślenia tekstu do tekstu w Divi. Pokażę ci standardową metodę za pomocą wbudowanych opcji Divi do podkreślania tekstu. Pokażę Ci również, jak używać dolnych ramek jako alternatywnej metody podkreślania tekstu. Korzystanie z dolnej krawędzi nie tylko daje większą kontrolę nad stylem, ale jest również obsługiwane we wszystkich przeglądarkach.

Zacznijmy.

Podkreślanie tekstu za pomocą dekoracji tekstu (powszechna metoda)

Najpopularniejszym i najprostszym sposobem podkreślenia tekstu jest użycie właściwości CSS dekoracji tekstu. W rzeczywistości Divi umożliwia łatwe stylizowanie tekstu za pomocą tej metody w ramach wbudowanych opcji modułu. Po prostu poszukaj opcji Styl czcionki tekstu i wybierz ikonę „ U ”, aby zastosować dekorację z podkreśleniem tekstu. Po wybraniu stylu podkreślenia będziesz mieć również możliwość dostosowania koloru i stylu podkreślenia.

Pozwala to uzyskać kolor podkreślenia inny niż rzeczywisty kolor tekstu.

Możesz wybierać spośród następujących stylów podkreślenia:

• Solidny
• Podwójnie
• Kropkowany
• przerywany
• Falisty

Możesz nawet ustawić podkreślenie linków w tekście głównym. Daje to większą kontrolę nad projektem podczas korzystania z modułu tekstowego. Po prostu wybierz zakładkę Czcionka łącza pod przełącznikiem kategorii projektowania tekstu. W przypadku stylu czcionki łącza wybierz „Podkreślenie”. Następnie możesz odpowiednio dostosować kolor i styl podkreślenia łącza.

Ograniczenia stylu dekoracji tekstu i podkreślenia

Brak możliwości dostosowania szerokości i położenia linii

Niestety przy dodawaniu właściwości text-decoration: underline css przy użyciu wbudowanych ustawień Divi nie ma możliwości dostosowania szerokości linii lub położenia linii. Szerokość linii zależy od rozmiaru czcionki, więc będzie się zwiększać wraz ze zwiększaniem rozmiaru czcionki. A ponieważ położenie podkreślenia znajduje się na linii bazowej, dolne litery (małe litery, które spadają poniżej linii bazowej) staną na drodze linii, powodując pewne niespójności, szczególnie w przypadku słów, które mają wiele zstępujących (takich jak „Typografia”) .

To ograniczenie może nie stanowić problemu, jeśli używasz całego tekstu pisanego wielkimi literami, ponieważ nie musisz się martwić o żadne znaki malejące. Byłoby fajnie, gdyby było wsparcie dla regulacji szerokości i położenia podkreślenia, ale na razie nie mamy szczęścia.

Brak obsługi przeglądarki

Internet Explorer nie obsługuje właściwości text-decoration-style ani text-decoration-color, więc nie można dostosować stylu podkreślenia (podwójne, kropkowane, kreskowane itp.) oraz koloru podkreślenia. Safari również nie obsługuje właściwości text-decoration-style, ale możesz zmienić kolor podkreślenia.

Ten brak wsparcia nie ogranicza się do Divi. Nawet niestandardowy CSS Ci nie pomoże.

Podkreślanie tekstu za pomocą dolnej krawędzi

Jeśli szukasz alternatywnego rozwiązania do podkreślania stylów tekstu, moim zdaniem najlepszą opcją jest użycie dolnej krawędzi. Oto kilka dobrych powodów, aby to zrobić:

• Obramowanie obsługuje osiem różnych stylów obramowania do stylizacji podkreślenia, w tym: kropkowany, przerywany, pełny, podwójny, rowek, grzbiet, wstawka i początek.
• Możesz dostosować szerokość (grubość) obramowania niezależnie od rozmiaru czcionki.
• Możesz umieścić obramowanie bliżej lub dalej od tekstu.
• Możesz dodać dowolny kolor do granic.
• Style obramowania są obsługiwane przez WSZYSTKIE przeglądarki.

Ograniczenia używania dolnych obramowań do podkreślania

• Ograniczone do pojedynczego wiersza tekstu na elementach blokowych. Ale są sposoby na obejście tego (patrz poniżej).
• Umieszczony całkowicie poniżej zjazdów i trochę trudny do uzyskania właściwej pozycji (ale wykonalny).

Zrozumienie różnicy między elementami blokowymi a wbudowanymi

Aby zrozumieć, jak działa podkreślanie obramowania, musisz znać różnicę między elementami blokowymi i wbudowanymi.

Elementy blokowe

Elementy blokowe automatycznie zajmują całą szerokość swojego kontenera (chyba że ustawiona jest niestandardowa szerokość) i rozpoczynają się w nowej linii. Strony internetowe (w tym te zbudowane z Divi) są pełne elementów blokowych.

Oto kilka przykładów typowych elementów blokowych:

• Sekcje Divi, wiersze, moduły (div)
• tekst lub akapity (p)
• nagłówki (h1, h2, h3, h4, h5, h6)
• listy (ol, ul)

Podczas dodawania dolnej granicy do elementów blokowych, ramka będzie znajdować się pod całym blokiem. Więc jeśli masz akapit tekstu (p) lub nagłówek (h1), który dzieli się na dwie lub więcej linii, dolna granica zostanie zastosowana tylko do dolnej części bloku, a nie do poszczególnych linii tekstu.

Oto przykład tego, jak wygląda dodawanie dolnej krawędzi do elementu bloku nagłówka h1, gdy tekst dzieli się na wiele wierszy.

Mimo że CSS kieruje się znacznikiem h1, linia jest stosowana tylko do elementu blokowego. Dlatego linia jest nakładana tylko na sam dół, a nie na każdą linię z osobna.

Elementy wbudowane

W przeciwieństwie do elementów blokowych, elementy śródliniowe mogą być podzielone na wiele wierszy. Jeśli więc dodasz dolne obramowanie do elementu śródliniowego (jak na przykład link), podkreślenie dolnego obramowania zostanie zastosowane nawet wtedy, gdy link przełamie się do nowej linii. Możesz także dostosować dopełnienie elementów śródliniowych bez wpływu na wysokość linii tekstu podstawowego, co doskonale nadaje się do pozycjonowania podkreślenia dolnego obramowania.

Oto przykład niektórych linków (które domyślnie są elementami śródliniowymi), które mają podkreślenie dolnej krawędzi.

Mówiąc najprościej, elementy inline mogą mieć podkreślenie dolnej krawędzi podczas dzielenia na wiele linii, a elementy blokowe nie.

Jak dodać podkreślenie dolnej krawędzi do pojedynczego wiersza tekstu (element blokowy)

Oto przykład, w jaki sposób można dodać dolną krawędź do pojedynczej linii tekstu za pomocą wbudowanych ustawień modułu tekstowego. Ta opcja działa najlepiej w przypadku nagłówków, ponieważ ograniczysz tekst do jednej linii.

Utwórz nową sekcję z jednym wierszem kolumny. Następnie dodaj moduł tekstowy o następującej treści:

Underlining Typography

Następnie zaktualizuj ustawienia modułu tekstowego w następujący sposób:

• Rozmiar tekstu: 46px (komputer), 40px (tablet), 26px (telefon)
• Wysokość linii tekstu: 1,8 em
• Szerokość: 517px (komputer), 450px (tablet), 293px (telefon)
• Szerokość dolnej krawędzi: 2px
• Kolor dolnej krawędzi: #0c71c3
• Styl dolnej granicy: kropkowany

Jak widać, obramowanie można stylizować za pomocą szerokości, koloru i stylu. Ponieważ do modułu nakładana jest dolna krawędź, konieczne jest dostosowanie szerokości modułu do tej samej szerokości tekstu. Musisz więc odpowiednio zmodyfikować rozmiar tekstu i szerokość modułu.

Jak dodać podkreślenie dolnej krawędzi na elementach blokowych (takich jak nagłówki), które dzielą się na linie?

Jak wspomniano wcześniej, elementy blokowe, takie jak nagłówki (h1, h2, h3, itp…) nie pozwalają na stosowanie dolnej krawędzi w linii przy każdym podziale wiersza. Aby obejść ten problem, możemy po prostu owinąć nasz tekst tagiem span. Rozpiętość umożliwia grupowanie elementów wbudowanych (takich jak grupa tekstu) w celu dodania stylu do tych elementów. Tak więc, jeśli chcemy mieć dolne obramowanie znacznika h1 (element blokowy), możemy otoczyć tekst wewnątrz znacznika h1 dodatkowym znacznikiem span. Następnie możemy dodać styl podkreślenia dolnej krawędzi do tagu span. Umożliwi nam to podkreślenie tekstu znacznika h1 (lub jego części), nawet gdy przechodzi do innej linii.

Oto przykład, jak dodać dolną krawędź do elementów blokujących (takich jak nagłówki), które dzielą się na wiele wierszy tekstu za pomocą niestandardowego CSS.

Najpierw dodaj nową sekcję z jednym wierszem kolumny. Następnie dodaj moduł tekstowy do wiersza. W polu treści zastąp domyślny tekst pozorowany następującym:

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

Ponieważ zamierzamy dodać podkreślenie dolnej krawędzi, zwiększmy wysokość wiersza nagłówka h1 w następujący sposób:

Następnie dodaj następujący niestandardowy identyfikator CSS na karcie Zaawansowane:

Identyfikator CSS: obramowanie-podkreślenie

Następnie otwórz modalne ustawienia strony i dodaj następujący niestandardowy CSS:

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

Styl dolnego obramowania jest stosowany do elementów w tagu span. A ponieważ tag span jest elementem śródliniowym, podkreślenie zostanie zastosowane do tekstu w każdym wierszu.

Właściwość border-bottom można dowolnie dostosowywać. Pierwsza wartość (2px) określa grubość (lub szerokość) obramowania. Druga wartość (kreska) określa styl obramowania. Nie zapomnij, że możesz również użyć następujących stylów obramowania: przerywany, kropkowany, podwójny, rowek, grzbiet, wstawka i początek. A trzecia wartość (#0c71c3) ustawia kolor obramowania. Możesz także dostosować niestandardowy CSS dopełniania w połączeniu z wartością wysokości wiersza tekstu we wbudowanych opcjach modułu tekstowego, aby uzyskać odpowiednie odstępy.

Jeśli nie potrzebujesz tagu span i chcesz przekonwertować cały tag h1 na element wbudowany, możesz zamiast tego użyć tego CSS w ustawieniach strony:

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

Zauważ, że ten CSS jest skierowany do tagu h1. Oprócz stylów dolnego obramowania i dopełnienia, „display: inline” zmienia znacznik h1 w element liniowy, który umożliwia podkreślenie tekstu h1 w wielu wierszach.

Dodawanie podkreślenia dolnej krawędzi do łączy wbudowanych w Divi

Oto przykład, jak dodać dolną ramkę do tekstu łącza w wierszu w Divi za pomocą niestandardowego CSS. Najpierw utwórz nową sekcję z jednokolumnowym wierszem i dodaj moduł tekstowy do wiersza.

Następnie użyj edytora wysiwyg, aby dodać kilka linków do tekstu podstawowego, aby mieć kilka linków do pracy.

Następnie dodaj niestandardową klasę CSS na karcie Zaawansowane w następujący sposób:

Klasa CSS: obramowanie-podkreślenie

Teraz otwórz ustawienia strony i dodaj następujący niestandardowy CSS, aby zastosować dolną ramkę do wszystkich linków w module tekstowym.

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

Właściwość border-bottom można dowolnie dostosowywać. Pierwsza wartość (1px) określa grubość (lub szerokość) obramowania. Druga wartość (brył) określa styl obramowania. Nie zapomnij, że możesz również użyć następujących stylów obramowania: przerywany, kropkowany, podwójny, rowek, kalenica, wstawka i początek. A trzecia wartość (#333333) określa kolor obramowania.

Więc jeśli chcesz podkreślić dolną krawędź o szerokości 2 pikseli, z kreskowanym stylem i innym kolorem, możesz zastąpić te wartości czymś takim:

border-bottom: 2px dashed #0c71c3;

Wartość dopełnienia można również dostosować, aby ustawić podkreślenie krawędzi w pionie. Jeśli więc chcesz, aby linia znajdowała się dalej od tekstu, możesz zwiększyć wartość dopełnienia do czegoś takiego:

padding: 0.3em 0;

Możesz również użyć tego niestandardowego dopełnienia w połączeniu z wartością wysokości wiersza tekstu we wbudowanych opcjach modułu tekstowego, aby również uzyskać odpowiednie odstępy.

A ponieważ łącza są elementami wbudowanymi, podkreślenie obramowania pozostaje na łączach, które rozdzielają się w wierszach.

A co z dzielnikami?

Jeśli chcesz być naprawdę kreatywny z podkreślaniem pojedynczych linii tekstu (elementów blokowych), zawsze możesz użyć modułu dzielników Divi. Moduł dzielnika ma wiele wbudowanych opcji, takich jak styl, wysokość, szerokość, tła, obramowanie, cień pudełka i inne. Możesz nawet układać przekładki jeden na drugim, aby uzyskać jeszcze bardziej niestandardowy wygląd.

Oto krótki przykład modułu dzielników używanego do podkreślania tekstu podwójną linią z gradientowym tłem.

Po prostu dodaj moduł rozdzielający bezpośrednio pod modułem tekstowym zawierającym Twój tekst. Następnie zaktualizuj następujące elementy:

• Kolor gradientu tła po lewej stronie: #2b87da
• Prawy gradient tła: #29c4a9
• Typ gradientu: liniowy
• Kierunek gradientu: 90 stopni
• Kolor: #ffffff
• Waga dzielnika: 2px
• Wysokość: 2px
• Szerokość: 400px (należy dostosować do szerokości tekstu powyżej)
• Niestandardowe dopełnienie: 5px góra, 5px dół

Końcowe przemyślenia

Mam nadzieję, że ten samouczek stanowi przydatną alternatywę dla dodawania stylów podkreślania tekstu w Divi. Powszechnie stosowana metoda „dekoracja tekstu: podkreślenie” jest zdecydowanie najłatwiejszym rozwiązaniem, ale ograniczenia mogą być uciążliwe. Metoda podkreślenia dolnej krawędzi daje nieco większą kontrolę nad stylem i rozmieszczeniem linii. A niestandardowy CSS zdecydowanie nie jest uciążliwy i można go łatwo dostosować do własnych potrzeb. Jeśli więc chcesz przenieść podkreślenie tekstu na wyższy poziom, powinno to pomóc.

Jak zawsze czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!