Come applicare stili di sottolineatura del testo alternativi in ​​Divi

Gli stili di sottolineatura del testo sono sempre stati piuttosto limitanti. Il metodo più comune per sottolineare il testo sul web consiste nell'utilizzare la proprietà CSS “text-decoration: sottolineato”. Divi ti consente persino di distribuire e modellare questo tipo di sottolineatura all'interno delle impostazioni del modulo Divi Builder. Ma questo metodo standard di sottolineatura presenta dei limiti quando si tratta di stile e supporto cross-browser.

Certo, nella maggior parte dei casi, la sottolineatura del testo non deve essere complicata. Ad esempio, sottolineare tutti i link sul tuo sito per mostrare che sono cliccabili è un'applicazione standard che non necessita necessariamente di metodi alternativi. Ma, se stai cercando di portare la sottolineatura al livello successivo, questo post può aiutarti.

In questo tutorial, ti illustrerò come applicare alcuni stili di sottolineatura del testo alternativi al tuo testo in Divi. Ti mostrerò il metodo standard usando le opzioni integrate di Divi per sottolineare il testo. E ti mostrerò anche come utilizzare i bordi inferiori come metodo alternativo per sottolineare il testo. L'uso di un bordo inferiore non solo ti dà un maggiore controllo sullo stile, ma è anche supportato su tutti i browser.

Iniziamo.

Sottolineare il testo con la decorazione del testo (metodo comune)

Il modo più comune e diretto per sottolineare il testo è utilizzare la proprietà CSS di decorazione del testo. In effetti, Divi ti consente di modellare il testo usando questo metodo facilmente all'interno delle opzioni integrate di un modulo. Cerca semplicemente l'opzione Stile carattere testo e seleziona l'icona " U " per distribuire la decorazione del testo sottolineato. Una volta selezionato lo stile del carattere di sottolineatura, avrai anche la possibilità di personalizzare il colore e lo stile della sottolineatura.

Ciò consente di avere un colore di sottolineatura diverso dal colore del testo effettivo.

E puoi scegliere tra i seguenti stili di sottolineatura:

• Solido
• Doppio
• punteggiato
• tratteggiato
• Ondulato

Puoi anche scegliere come target lo stile di sottolineatura dei collegamenti all'interno del corpo del testo. Questo ti dà un maggiore controllo sul design quando usi il modulo di testo. Seleziona semplicemente la scheda Link Font sotto l'interruttore della categoria di progettazione del testo. Per lo stile del carattere del collegamento, scegli "Sottolineato". Quindi puoi personalizzare il colore e lo stile della sottolineatura del collegamento di conseguenza.

Limitazioni dello stile di sottolineatura della decorazione del testo

Manca la capacità di regolare la larghezza e la posizione della linea

Sfortunatamente, quando si aggiunge la proprietà di decorazione del testo: sottolinea css utilizzando le impostazioni integrate di Divi, non è possibile regolare la larghezza della linea o la posizione della linea. La larghezza della linea è rilevante per la dimensione del carattere, quindi aumenterà all'aumentare della dimensione del carattere. E poiché la posizione della sottolineatura si trova sulla linea di base, i discendenti (lettere minuscole che scendono al di sotto della linea di base) interferiranno con la linea causando alcune incongruenze soprattutto con parole che hanno molti discendenti (come "Tipografia") .

Questa limitazione potrebbe non essere un problema se si utilizza tutto il testo in maiuscolo perché non ci saranno discendenti di cui preoccuparsi. Sarebbe bello se ci fosse il supporto per la regolazione della larghezza della sottolineatura e della posizione della sottolineatura, ma per ora siamo sfortunati.

Manca il supporto del browser

Internet Explorer non supporta la proprietà text-decoration-style o la proprietà text-decoration-color, quindi lo stile di sottolineatura (doppio, punteggiato, tratteggiato, ecc...) e il colore di sottolineatura non possono essere personalizzati. Safari non supporta nemmeno la proprietà di stile di decorazione del testo, ma puoi cambiare il colore della sottolineatura.

Questa mancanza di supporto non è limitata a Divi. Anche il CSS personalizzato non ti aiuterà.

Sottolineare il testo usando un bordo inferiore

Se stai cercando una soluzione alternativa per sottolineare gli stili di testo, l'opzione migliore secondo me è usare un bordo inferiore. Ecco alcuni buoni motivi per farlo:

• Un bordo supporta otto diversi stili di bordo per modellare la tua sottolineatura, tra cui: punteggiato, tratteggiato, solido, doppio, scanalatura, cresta, inserto e inizio.
• È possibile personalizzare la larghezza (spessore) di un bordo indipendentemente dalla dimensione del carattere.
• Puoi posizionare i bordi in modo che siano più vicini o più lontani dal testo.
• Puoi aggiungere qualsiasi colore ai bordi che desideri.
• Gli stili di bordo sono supportati da TUTTI i browser.

Limitazioni all'uso dei bordi inferiori per la sottolineatura

• Limitato a una singola riga di testo sugli elementi del blocco. Ma ci sono modi per aggirare questo (vedi sotto).
• Posizionato completamente sotto i discensori e un po' difficile da ottenere la posizione giusta (ma fattibile).

Comprendere la differenza tra elementi a blocchi e in linea

Per capire come funziona la sottolineatura del bordo, devi conoscere la differenza tra gli elementi a blocchi e quelli in linea.

Elementi di blocco

Gli elementi del blocco si estenderanno automaticamente sull'intera larghezza del relativo contenitore (a meno che non sia impostata una larghezza personalizzata) e inizieranno su una nuova riga. I siti web (compresi quelli creati con Divi) sono pieni di elementi di blocco.

Alcuni esempi di elementi di blocco comuni includono:

• Divi Sezioni, Righe, Moduli (div)
• corpo del testo o dei paragrafi (p)
• titoli (h1, h2, h3, h4, h5, h6)
• liste (ol, ul)

Quando si aggiunge un bordo inferiore agli elementi del blocco, il bordo si troverà sotto l'intero blocco. Quindi, se hai un paragrafo di testo (p) o un'intestazione (h1) che si divide in due o più righe, il bordo inferiore verrà applicato solo alla parte inferiore del blocco, non alle singole righe di testo.

Ecco un esempio di come appare l'aggiunta di un bordo inferiore a un elemento del blocco di intestazione h1 quando il testo si divide in più righe.

Anche se il css ha come target il tag h1, la linea viene applicata solo all'elemento block. Pertanto la linea viene applicata solo al fondo e non a ciascuna linea individualmente.

Elementi in linea

A differenza degli elementi di blocco, gli elementi in linea possono essere suddivisi su più righe. Quindi, se aggiungi un bordo inferiore a un elemento in linea (come un collegamento, ad esempio), la sottolineatura del bordo inferiore verrà applicata anche se il collegamento si interrompe in una nuova riga. Inoltre, puoi regolare il riempimento degli elementi in linea senza influenzare l'altezza della linea del corpo del testo, il che è ottimo per posizionare la sottolineatura del bordo inferiore.

Ecco un esempio di alcuni collegamenti (che sono elementi in linea per impostazione predefinita) che hanno un bordo inferiore sottolineato.

In poche parole, gli elementi in linea possono avere la sottolineatura del bordo inferiore quando si suddividono in più righe e gli elementi di blocco no.

Come aggiungere la sottolineatura del bordo inferiore a una singola riga di testo (un elemento di blocco)

Ecco un esempio di come aggiungeresti un bordo inferiore a una singola riga di testo utilizzando le impostazioni integrate del modulo di testo. Questa opzione funziona meglio per le intestazioni poiché limiterai il testo a una singola riga.

Crea una nuova sezione con una riga di una colonna. Quindi aggiungi un modulo di testo con il seguente contenuto:

Underlining Typography

Quindi aggiorna le impostazioni del modulo di testo come segue:

• Dimensione del testo del testo: 46px (desktop), 40px (tablet), 26px (telefono)
• Altezza riga di testo: 1,8 em
• Larghezza: 517 px (desktop), 450 px (tablet), 293 px (telefono)
• Larghezza bordo inferiore: 2px
• Colore bordo inferiore: # 0c71c3
• Stile bordo inferiore: punteggiato

Come puoi vedere, il bordo può essere stilizzato usando larghezza, colore e stile. Poiché il bordo inferiore viene applicato al modulo, è necessario adattare la larghezza del modulo alla stessa larghezza del testo. Quindi, dovrai modificare la dimensione del testo e la larghezza del modulo di conseguenza.

Come aggiungere la sottolineatura del bordo inferiore su elementi di blocco (come i titoli) che si dividono su righe

Come accennato in precedenza, gli elementi di blocco come le intestazioni (h1, h2, h3, ecc...) non consentono di applicare il bordo inferiore in linea su ogni interruzione di riga. Per aggirare questo problema, possiamo semplicemente avvolgere il nostro testo con un tag span. Uno span ti permette di raggruppare elementi in linea (come un gruppo di testo) insieme per aggiungere uno stile a quegli elementi. Quindi, se vogliamo un bordo inferiore a un tag h1 (un elemento di blocco), possiamo avvolgere il testo all'interno del tag h1 con un tag span aggiuntivo. Quindi possiamo aggiungere lo stile di sottolineatura del bordo inferiore al tag span. Questo ci consentirà di sottolineare il testo del tag h1 (o parti di esso) anche quando si interrompe su un'altra riga.

Ecco un esempio di come aggiungeresti un bordo inferiore per bloccare elementi (come i titoli) che si dividono in più righe di testo utilizzando CSS personalizzati.

Innanzitutto, aggiungi una nuova sezione con una riga di una colonna. Quindi aggiungi un modulo di testo alla riga. Nella casella del contenuto, sostituisci il testo fittizio predefinito con il seguente:

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

Poiché aggiungeremo una sottolineatura del bordo inferiore, aumentiamo l'altezza della linea di intestazione h1 come segue:

Quindi aggiungi il seguente ID CSS personalizzato nella scheda Avanzate:

ID CSS: bordo-sottolineatura

Quindi apri la modale delle impostazioni della pagina e aggiungi il seguente CSS personalizzato:

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

Questo stile del bordo inferiore viene applicato agli elementi all'interno del tag span. E poiché il tag span è un elemento in linea, la sottolineatura verrà applicata al testo su ogni riga.

La proprietà border-bottom può essere personalizzata come preferisci. Il primo valore (2px) imposta lo spessore (o larghezza) del bordo. Il secondo valore (tratteggiato) imposta lo stile del bordo. Non dimenticare che puoi anche utilizzare i seguenti stili di bordo: tratteggiato, punteggiato, doppio, scanalatura, cresta, inserto e inizio. E il terzo valore (#0c71c3) imposta il colore del bordo. Puoi anche modificare il css di riempimento personalizzato in combinazione con il valore dell'altezza della riga di testo nelle opzioni integrate del modulo di testo per ottenere anche la spaziatura giusta.

Se non hai bisogno del tag span e desideri convertire l'intero tag h1 in un elemento in linea, puoi invece utilizzare questo CSS nelle impostazioni della pagina:

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

Nota che questo CSS ha come target il tag h1. Oltre al bordo inferiore e agli stili di riempimento, il "display: inline" cambia il tag h1 in un elemento in linea che consente al testo h1 di essere sottolineato su più righe.

Aggiunta di una sottolineatura del bordo inferiore ai collegamenti in linea in Divi

Ecco un esempio di come aggiungeresti un bordo inferiore al testo del collegamento in linea in Divi utilizzando CSS personalizzato. Per prima cosa crea una nuova sezione con una riga a una colonna e aggiungi un modulo di testo alla riga.

Quindi usa l'editor wysiwyg per aggiungere alcuni collegamenti al corpo del testo in modo da avere alcuni collegamenti con cui lavorare.

Quindi aggiungi una classe CSS personalizzata nella scheda Avanzate come segue:

Classe CSS: bordo-sottolineatura

Ora apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato per applicare il bordo inferiore a tutti i collegamenti all'interno del modulo di testo.

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

La proprietà border-bottom può essere personalizzata come vuoi. Il primo valore (1px) imposta lo spessore (o larghezza) del bordo. Il secondo valore (solido) imposta lo stile del bordo. Non dimenticare che puoi anche utilizzare i seguenti stili di bordo: tratteggiato, punteggiato, doppio, scanalatura, cresta, inserto e inizio. E il terzo valore (#333333) imposta il colore del bordo.

Quindi, se vuoi una sottolineatura del bordo inferiore larga 2 pixel con uno stile tratteggiato e un colore diverso, puoi sostituire quei valori con qualcosa del genere:

border-bottom: 2px dashed #0c71c3;

Il valore di riempimento può anche essere regolato per posizionare la sottolineatura del bordo verticalmente. Quindi, se vuoi che la linea si trovi più in basso rispetto al testo, puoi aumentare il valore di riempimento a qualcosa del genere:

padding: 0.3em 0;

Puoi anche usare questo riempimento personalizzato insieme al valore dell'altezza della riga di testo nelle opzioni integrate del modulo di testo per ottenere anche la spaziatura giusta.

E poiché i collegamenti sono elementi in linea, la sottolineatura del bordo rimane sui collegamenti che si dividono su linee.

E i divisori?

Se vuoi essere davvero creativo con la sottolineatura di singole righe di testo (elementi a blocchi), puoi sempre utilizzare il modulo divisore di Divi. Il modulo divisore ha molte opzioni integrate come stile, altezza, larghezza, sfondi, bordo, ombra del riquadro e altro. Puoi persino impilare i divisori uno sopra l'altro per un aspetto ancora più personalizzato.

Ecco un rapido esempio di modulo divisore utilizzato per sottolineare il testo con una doppia linea con uno sfondo sfumato.

Aggiungi semplicemente un modulo divisore direttamente sotto un modulo di testo contenente il tuo testo. Quindi aggiorna quanto segue:

• Colore sfondo sfumato sinistro: #2b87da
• Colore di sfondo sfumato a destra: # 29c4a9
• Tipo di gradiente: lineare
• Direzione gradiente: 90 gradi
• Colore: #ffffff
• Peso del divisore: 2px
• Altezza: 2px
• Larghezza: 400 px (questo dovrà essere adattato alla larghezza del testo sopra)
• Imbottitura personalizzata: 5px in alto, 5px in basso

Pensieri finali

Spero che questo tutorial ti offra un'utile alternativa all'aggiunta di stili di sottolineatura del testo in Divi. Il metodo comune che utilizza "decorazione del testo: sottolineatura" è di gran lunga la soluzione più semplice, ma le limitazioni possono essere un freno. Il metodo di sottolineatura del bordo inferiore ti dà un po' più di controllo sullo stile e sul posizionamento delle linee. E il CSS personalizzato non è sicuramente ingombrante e può essere facilmente modificato in base alle tue esigenze. Quindi, se vuoi portare la tua sottolineatura di testo al livello successivo, questo dovrebbe aiutarti.

Come sempre, non vedo l'ora di sentirti nei commenti.

Saluti!