Evidenziare un testo wordpress
Scrittura normale: TESTO NON EVIDENZIATO
Scrittura evidenziata: TESTO EVIDENZIATO
Spiegazione passo dopo passo per creare un testo evidenziato è la seguente:
- Inserire il modulo del paragrafo per scrivere un testo
- Scrivere il testo desiderato
- Modificare il testo come meglio opportuno usando tutti gli strumenti che wordpress mette a disposizione
Adesso un esempio di come fare
Apriamo il blocco di wordpress cliccando il tasto +
Successivamente si apre un pop-up per la scelta dei blocchi e clicchiamo su paragrafo
Inseriamo il testo: TESTO DI PROVA NON ANCORA EVIDENZIATO
Modifichiamo il testo di prova: TESTO DI PROVA NON ANCORA EVIDENZIATO ad esempio in grasseto cliccando il tasto “B”
Modifichiamo il colore e/o la tipografia del testo di prova utilizzando gli strumenti “colore” e “tipografia” presenti alla nostra destra sotto la sezione “blocco”.
Dopo aver effettuato le modifiche al testo (se necessarie)
Andiamo ad effettuare la modifica per evidenziare il testo
Il nostro testo da evidenziare è: TESTO IN EVIDENZA
(non modificato)
Il nostro testo da evidenziare è: TESTO IN EVIDENZA
(Modificato)
Per evidenziare TESTO IN EVIDENZA dobbiamo:
Cliccare sui tre pallini e si aprirà una tendina (vedi immagine), poi clicchiamo su Modifica in HTML
Dopo aver cliccato su Modifica in Html si apre questa schermata con scritto:
<p>Il nostro testo da evidenziare è: TESTO IN EVIDENZA<P>
MODIFICHE DA EFFETTURARE CON IL LINGUAGGIO HTML
Il nostro testo da evidenziare è: TESTO IN EVIDENZIA (non modificato)
HTML
<p>Il nostro testo da evidenziare è: TESTO IN EVIDENZA</p>
VISIVAMENTE IL RISULTATO È
Il nostro testo da evidenziare è: TESTO IN EVIDENZA
Aggiungere il codice che segue per evidenziare la frase "TESTO IN EVIDENZA":
<mark style="background-color:#0693E3">TESTO IN EVIDENZA</mark>
background-color:#0693E3 (è il colore dell'evidenziatore), basta cambiare il codice #.... per scegliere il colore desiderato
Adesso andiamo a modificare il codice in questo modo:
<p>Il nostro testo da evidenziare è: <mark style="background-color:#0693E3">TESTO IN EVIDENZA</mark></p>
Il risultato sarà il seguente:
Il nostro testo da evidenziare è: TESTO IN EVIDENZA
Il nostro testo da evidenziare è: TESTO IN EVIDENZA (modificato)
HTML
<p class="has-vivid-red-color has-text-color" style="font-size:25px;font-style:normal;font-weight:300">Il nostro testo da evidenziare è: TESTO IN EVIDENZA</p>
VISIVAMENTE IL RISULTATO È
Il nostro testo da evidenziare è: TESTO IN EVIDENZA
Aggiungere il codice che segue per evidenziare la frase "TESTO IN EVIDENZA":
<mark style="background-color:#0693E3">TESTO IN EVIDENZA</mark>
background-color:#0693E3 (è il colore dell'evidenziatore), basta cambiare il codice #.... per scegliere il colore desiderato
Adesso andiamo a modificare il codice in questo modo:
<p class="has-vivid-red-color has-text-color" style="font-size:25px;font-style:normal;font-weight:300">Il nostro testo da evidenziare è: <mark style="background-color:#0693E3">TESTO IN EVIDENZA</mark></p>
Il risultato sarà il seguente:
Il nostro testo da evidenziare è: TESTO IN EVIDENZA
“IMPORTANTISSIMO RICORDARSI“
di aggiungere il codice che segue per evidenziare la frase “TESTO IN EVIDENZA”:
<mark style="background-color:#0693E3">TESTO IN EVIDENZA</mark>
Se invece non hai bisogno di scegliere il colore dell’evidenziatore basta aggiungere
il seguente codice
<mark>TESTO IN EVIDENZA</mark>
Il risultato sarà il seguente:
TESTO IN EVIDENZAIl tag <mark> genera un colore predefinito per testo ed evidenziazione in base al browser utilizzato. In genere la quasi totalità dei browser utilizza il nero per il testo e giallo per l’evidenziazione.
È tuttavia possibile personalizzare tali colori
- usando il linguaggio HTML come da “esempio sopra mostrato” clicca qui ?
- usando il CSS modificando lo stile del tema vedi sotto ?
Esempio CSS:
mark {
background-color: #FF6900;
color: #000066;
}
background-color: #FF6900 colora l’evidenziato (in questo caso arancione)
color: #000066 colora il testo (in questo caso blu scuro)
