Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come evidenziare il testo in WordPress (Guida per principianti)

State cercando un modo per evidenziare il testo in WordPress?

L’evidenziazione del testo può aiutare l’utente a focalizzare l’attenzione su una parte specifica del contenuto. Può essere utile per evidenziare un invito all’azione, un’offerta speciale o semplicemente per dare risalto a frasi specifiche.

In questo articolo vi mostreremo come evidenziare facilmente il testo in un post o in una pagina di WordPress.

Adding text highlight color in WordPress

Perché e quando evidenziare il testo in WordPress

L’evidenziazione del testo è un modo semplice per sottolineare le informazioni importanti nei contenuti. In questo modo, l’attenzione dell’utente viene indirizzata verso i dettagli che non si vogliono perdere.

Ad esempio, mettere in evidenza un’offerta di sconto sul vostro sito WordPress con un colore diverso attirerà l’attenzione del lettore, aiutandovi a generare più vendite.

Ecco un esempio di come potrebbe apparire l’evidenziazione del testo in un post del blog:

Preview for highlighting text in the block editor

Evidenziare il testo con un colore diverso può anche aiutare gli utenti con difficoltà visive o di lettura a navigare e a comprendere meglio il contenuto. Può anche migliorare l’aspetto dei contenuti e renderli più accattivanti.

Tuttavia, mettere in evidenza troppo testo sulla pagina può distrarre e ridurne l’efficacia. Per questo motivo vi consigliamo di mettere in evidenza solo il testo di informazioni importanti, come inviti all’azione, attenzioni e altri dettagli a cui i lettori devono prestare attenzione.

Detto questo, vediamo come evidenziare facilmente il testo in WordPress. Potete utilizzare i collegamenti rapidi qui sotto per passare al metodo che desiderate utilizzare:

Metodo 1: Evidenziare il testo in WordPress utilizzando l’editor a blocchi

Questo metodo fa al caso vostro se volete evidenziare facilmente il testo in WordPress utilizzando l’editor a blocchi (Gutenberg).

Per prima cosa, è necessario aprire un post esistente o nuovo nell’editor dei contenuti dalla barra laterale dell’amministrazione di WordPress.

A questo punto, è sufficiente selezionare il testo che si desidera evidenziare e fare clic sull’icona ‘Altro’ nella barra degli strumenti in alto. Si aprirà un menu a discesa in cui si dovrà scegliere l’opzione “Evidenzia” dall’elenco.

Expand the More dropdown menu from the block toolbar and select the Highlight option

Sullo schermo si aprirà uno strumento di selezione dei colori. Da qui è necessario passare alla scheda ‘Sfondo’.

Successivamente, è possibile scegliere un colore di evidenziazione predefinito tra le opzioni disponibili.

È inoltre possibile selezionare un colore personalizzato per evidenziare il testo facendo clic sull’opzione ‘Personalizzato’ per lanciare lo strumento ‘Contagocce’.

Choose a highlight color from the color picker tool

Infine, non dimenticate di fare clic sul pulsante “Pubblica” o “Aggiorna” per salvare le modifiche.

Ora potete visitare il vostro blog WordPress per vedere il testo selezionato in azione.

Preview for highlighting text in the block editor

Metodo 2: Evidenziare il testo in WordPress usando WPCode (consigliato)

Se volete utilizzare costantemente un colore specifico per evidenziare il testo in tutto il vostro sito WordPress, questo metodo fa al caso vostro.

È possibile evidenziare facilmente il testo in WordPress aggiungendo del codice CSS ai file del tema. Tuttavia, il più piccolo errore nell’inserimento del codice potrebbe interrompere il vostro sito web, rendendolo inaccessibile.

Per questo motivo vi consigliamo di utilizzare WPCode, il miglior plugin di snippet di codice per WordPress sul mercato. È il modo più semplice e sicuro per aggiungere codice al vostro sito web senza modificare direttamente i file del tema.

Creare uno snippet di codice con WPCode

Per prima cosa, è necessario installare e attivare il plugin WPCode. Per ulteriori istruzioni, consultare la nostra guida per principianti su come installare un plugin di WordPress.

Nota: WPCode ha anche un piano gratuito che si può utilizzare per questa esercitazione. Tuttavia, l’aggiornamento al piano a pagamento sblocca altre caratteristiche, come una libreria cloud di frammenti di codice, una logica condizionale intelligente e altro ancora.

Dopo l’attivazione, andate alla pagina Code Snippets ” + Add Snippet dalla barra laterale dell’amministrazione di WordPress.

Quindi, fare clic sul pulsante “Usa snippet” sotto l’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)”.

Add new snippet

Si accede così alla pagina “Crea snippet personalizzato”, dove si può iniziare a digitare un nome per il proprio snippet di codice.

Quindi, selezionare l’opzione “Snippet CSS” dal menu a discesa “Tipo di codice” nell’angolo destro dello schermo.

CSS Snippet as code type for the highlighting text in WordPress

Quindi, copiare e incollare il seguente codice nella casella “Anteprima codice”:

mark {
background-color: #ffd4a1;
}

Una volta fatto ciò, aggiungere il codice esadecimale del colore di evidenziazione preferito accanto alla riga del colore di sfondo nel codice.

Nel nostro esempio, utilizziamo #ffd4a1, un colore marrone chiaro.

Paste the code snippet to highlight text in WordPress

Successivamente, scorrere fino alla sezione “Inserimento”.

Da qui, selezionare il metodo “Inserimento automatico” per eseguire il codice all’attivazione.

Choose an insertion method

Quindi, andare nella parte superiore della pagina e spostare l’interruttore “Inattivo” su “Attivo”.

Infine, fare clic sul pulsante “Salva snippet” per memorizzare le modifiche.

Save text highlight code snippet

Evidenziare il testo nell’Editor 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, aprire un post esistente o nuovo nell’editor di blocchi di WordPress.

Da qui, fare clic sull’icona “Opzioni” nella barra degli strumenti del blocco in alto. Si aprirà un nuovo menu a tendina in cui si dovrà selezionare l’opzione “Modifica come HTML”.

Choose the edit as HTML option from the Options dropdown menu in the block toolbar

Ora si vedrà il contenuto del blocco in formato HTML.

In questo caso, è sufficiente avvolgere il testo che si desidera evidenziare all’interno dei tag <mark> </mark>, come in questo caso:

<mark>highlighted-text</mark>

Questo evidenzierà il testo nel colore esadecimale scelto nello snippet WPCode.

Quindi, fare clic sull’opzione “Modifica visuale” nella barra degli strumenti del blocco per tornare all’editor visuale.

Write HTML code on both sides of the text that you want to highlight

Una volta terminato, fare clic sul pulsante “Aggiorna” o “Pubblica” per salvare le modifiche.

Ora è possibile visitare il sito web per verificare il testo evidenziato in azione.

Demo of highlighting text in WordPress

Bonus: utilizzare SeedProd per evidenziare le pagine importanti del sito web

Oltre a evidenziare il testo sui post del blog, potreste anche voler mettere in evidenza sezioni importanti del vostro sito WordPress, come il modulo di contatto o un buono regalo.

Ad esempio, se avete un negozio online e avete appena lanciato una vendita stagionale, potreste voler mettere in evidenza l’offerta sul vostro sito web.

È possibile mettere in evidenza queste sezioni creando delle landing page ad esse dedicate. Si tratta di pagine autonome del vostro sito web, progettate per generare contatti.

Per creare landing page visivamente accattivanti per il vostro sito web, vi consigliamo di utilizzare SeedProd. È il miglior costruttore di landing page per WordPress sul mercato, dotato di un costruttore drag-and-drop, di modelli predefiniti e di numerosi blocchi.

SeedProd

Con SeedProd è facilissimo creare landing page accattivanti che mettano in risalto sezioni importanti del vostro sito web come il modulo di contatto, l’annuncio di una vendita, gli omaggi, le testimonianze, i moduli optin, le pagine di login e altro ancora.

Per maggiori dettagli, potete consultare il nostro tutorial su come creare una landing page in WordPress.

Create a landing page

Oltre a questo, è possibile utilizzare SeedProd per creare temi personalizzati, pagine coming soon, pagine di manutenzione e molto altro ancora.

Per ulteriori informazioni, consultate la nostra recensione completa di SeedProd.

Speriamo che questa guida vi abbia aiutato a imparare come evidenziare il testo in WordPress. Potreste anche voler consultare la nostra guida passo-passo su come personalizzare i colori in WordPress per rendere il vostro sito web più gradevole dal punto di vista estetico e il nostro confronto dei migliori servizi di email marketing per far crescere il vostro traffico.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

7 commentiLascia una risposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ralph

    Such a simple way to make something stand out! Great!
    This must be related to my theme customization, but when I highlight text itself or the background, it changes the font. Which is weird as at customizing I set all fonts in all scenarios to only 2 fonts. First for headings and second for all the rest. I have to spend another evening on that, I guess.

    • WPBeginner Support

      That is very strange, we would recommend reaching out to your theme’s support to see if there is some kind of styling conflict.

      Admin

  3. Prakash Joshi

    Hello,… thanks for the post.
    I tried using mark HTML and advanced editor tools. But there’s one problem. The highlighted text is being bold automatically. Why is this happening ? Do you have any solutions??

    • WPBeginner Support

      If it happens automatically then you would want to check with the support for your specific theme to ensure it is not a conflict with the theme’s default styling.

      Admin

  4. Luqman khokhar

    Nice post about, highlight the specific text as per my experience 2nd and 3rd option is fine because lots of plugins are not a good approach. They can slow your site.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.