Aggiungere elementi come le lettere maiuscole iniziali ai tuoi post di WordPress può migliorare la leggibilità e dare ai tuoi contenuti un aspetto professionale e curato.
Le lettere maiuscole iniziali sono lettere capitali grandi e decorative utilizzate all'inizio di un paragrafo. Attirano l'attenzione dei lettori e aggiungono un tocco di eleganza al tuo testo.
Nel corso degli anni, abbiamo utilizzato le lettere maiuscole iniziali sui nostri blog personali per aggiungere un tocco estetico. Molti dei nostri lettori hanno notato e commentato quanto apprezzino questa funzionalità, apprezzando l'estetica visiva migliorata che porta al design del sito.
In questo articolo, ti mostreremo come aggiungere facilmente lettere maiuscole iniziali nei post di WordPress, passo dopo passo.
Cos'è una lettera maiuscola iniziale?
Una lettera maiuscola iniziale è una tecnica di stile comunemente utilizzata nei libri stampati e nelle riviste che presentano letture più lunghe. La prima lettera del paragrafo iniziale di ogni capitolo utilizza una dimensione del carattere grande.
Normalmente, la grande lettera capitale si estende verso il basso per scendere sotto le prime righe, motivo per cui viene chiamata "lettera maiuscola iniziale".
L'aggiunta di lettere maiuscole iniziali aiuta i tuoi contenuti a distinguersi e a catturare l'attenzione dei tuoi visitatori. Aggiungono un tocco più formale e tradizionale al design del tuo sito.
Ci sono diversi modi per aggiungere lettere maiuscole iniziali a un sito web WordPress. Puoi utilizzare l'opzione integrata nell'editor a blocchi di WordPress o utilizzare un plugin.
Detto questo, vediamo come puoi aggiungere facilmente lettere maiuscole iniziali nei post di WordPress utilizzando diversi metodi.
Sentiti libero di fare clic sui collegamenti sottostanti per passare al tuo metodo preferito:
- Metodo 1: Aggiungere lettere maiuscole iniziali utilizzando l'editor a blocchi di WordPress
- Metodo 2: Aggiungere lettere maiuscole iniziali utilizzando il codice CSS
- Metodo 3: Aggiungere lettere maiuscole iniziali utilizzando un plugin
- Bonus: Cambiare i font nei tuoi temi WordPress
Metodo 1: Aggiungere lettere maiuscole iniziali utilizzando l'editor a blocchi di WordPress
Se vuoi aggiungere lettere maiuscole iniziali utilizzando l'editor a blocchi predefinito di WordPress, allora questo metodo fa per te. Tieni presente che, sebbene questo metodo funzioni, devi aggiungere manualmente le lettere maiuscole iniziali per ogni post.
Se stai cercando un metodo automatico, salta direttamente al metodo 2.
Innanzitutto, vai alla pagina Post » Aggiungi nuovo dalla dashboard di amministrazione di WordPress. Ora, fai semplicemente clic sul pulsante 'Aggiungi blocco' (+) nell'angolo in alto a sinistra dello schermo.
Successivamente, individua e fai clic sul blocco Paragrafo per aggiungerlo al tuo post.
Successivamente, devi aprire il Pannello Impostazioni Blocco nella colonna di destra.
Una volta fatto ciò, scorri verso il basso fino alla sezione 'Tipografia' e fai clic sull'icona dei tre punti accanto ad essa. Questo aprirà un elenco di altre opzioni, da cui devi selezionare 'Maiuscola iniziale' per aggiungerla al tuo pannello blocchi.
Una volta aggiunta la funzionalità Maiuscola iniziale, attiva semplicemente l'interruttore accanto all'opzione 'Maiuscola iniziale' per mostrare una lettera iniziale grande all'inizio di un paragrafo.
Non dimenticare di fare clic sul pulsante 'Salva bozza' o 'Pubblica' in alto per salvare le modifiche.
Ora hai aggiunto con successo una maiuscola iniziale al tuo post.
Ecco come appariva sul nostro sito demo.
Nota che l'opzione integrata per le maiuscole iniziali nell'editor a blocchi utilizzerà lo stile del tuo tema WordPress per colore, font e dimensione della prima lettera.
Se desideri modificare lo stile delle tue maiuscole iniziali nell'editor a blocchi di WordPress, dovrai utilizzare codice CSS personalizzato per stilizzare le tue maiuscole iniziali.
Metodo 2: Aggiungere lettere maiuscole iniziali utilizzando il codice CSS
Per questo metodo, utilizzeremo codice CSS personalizzato per aggiungere automaticamente maiuscole iniziali al primo paragrafo di ogni post. Puoi aggiungere il codice CSS ai fogli di stile del tuo tema o utilizzare un plugin per snippet di codice.
Ti consigliamo di utilizzare WPCode perché è il plugin per snippet di codice numero 1 utilizzato da oltre 2.000.000 di siti in tutto il mondo. Rende semplicissimo aggiungere codice al tuo sito senza alcun problema.
Innanzitutto, devi installare e attivare il plugin WPCode. Per ulteriori istruzioni, consulta la nostra guida per principianti su come installare un plugin di WordPress.
Nota: WPCode dispone anche di un piano gratuito che puoi utilizzare per questo tutorial. Tuttavia, l'aggiornamento alla versione a pagamento può sbloccare più funzionalità come una libreria cloud di snippet di codice, logica condizionale e altro ancora.
Dopo l'attivazione, visita la pagina Snippet di codice » +Aggiungi snippet dalla barra laterale di amministrazione di WordPress.
Da qui, posiziona il cursore del mouse sull'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’. Questo rivelerà il pulsante ‘Usa snippet’ che devi cliccare.
Ora che sei sulla pagina ‘Crea snippet personalizzato’, puoi iniziare inserendo un titolo per il tuo snippet di codice. Può essere qualsiasi cosa che ti aiuti a identificare lo snippet.
Successivamente, seleziona ‘Snippet CSS’ come ‘Tipo di codice’ dal menu a discesa sulla destra.
Successivamente, copia e incolla semplicemente il seguente codice nella casella ‘Anteprima codice’:
<style type="text/css">
.entry-content p:first-child:first-of-type:first-letter {
font-size: 85px;
line-height: 1;
padding-top: 0px;
padding-right: 10px;
padding-left: 4px;
color: #000080;
float: left;
font-family: 'Tangerine', serif;
text-shadow: 4px 4px 4px #aaa;
</style>
}
Ora, devi scorrere verso il basso fino alla sezione Inserimento e selezionare il metodo ‘Inserimento automatico’ se desideri eseguire il codice su tutto il tuo sito.
Puoi utilizzare il metodo ‘Shortcode’ se desideri aggiungere lettere maiuscole iniziali solo a post specifici.
Una volta salvato lo snippet, ti verrà fornito uno shortcode che puoi incollare nell'editor a blocchi dei post in cui desideri aggiungere lettere maiuscole iniziali.
Successivamente, torna in cima alla pagina e attiva l'interruttore su ‘Attivo’.
Infine, fai clic sul pulsante 'Salva snippet'.
Il tuo snippet di codice CSS sarà ora attivo sul tuo sito.
Ecco come apparivano le lettere maiuscole iniziali sul nostro sito demo utilizzando lo snippet CSS sopra.
Metodo 3: Aggiungere lettere maiuscole iniziali utilizzando un plugin
Se sei esitante nell'aggiungere CSS personalizzato, puoi anche aggiungere lettere maiuscole iniziali utilizzando il plugin Initial Letter.
Questo plugin ti consente anche di modificare le dimensioni, il colore e il font delle lettere maiuscole iniziali.
Nota: Tieni presente che il plugin Initial Letter non è stato testato con l'ultima versione di WordPress e non è più mantenuto dallo sviluppatore.
Tuttavia, abbiamo testato il plugin e funziona bene. Se sei ancora insicuro, dai un'occhiata al nostro articolo su l'utilizzo di plugin obsoleti.
Detto questo, innanzitutto, devi installare e attivare il plugin Initial Letter. Per ulteriori istruzioni, consulta la nostra guida su come installare un plugin di WordPress.
Dopo l'attivazione, naviga alla pagina Impostazioni » Initial Letter dalla barra laterale dell'amministratore. Da qui, puoi configurare le impostazioni per le lettere maiuscole iniziali.
Innanzitutto, devi selezionare se desideri che le lettere maiuscole iniziali vengano applicate automaticamente ai nuovi post. Per fare ciò, scegli l'opzione 'Sì' dal menu a discesa accanto all'opzione 'Predefinito per i post'.
Successivamente, scegli il tuo font, colore, dimensione e padding preferiti per le lettere maiuscole iniziali.
Nota: Potrebbe essere necessario tornare alle impostazioni dopo aver visualizzato in anteprima il tuo sito web per regolare queste opzioni di stile.
Dopodiché, seleziona la casella accanto all'opzione 'Abilita per estratti' se desideri che le lettere maiuscole iniziali siano abilitate per gli estratti dei post.
Puoi anche selezionare la casella accanto all'opzione 'Solo primo paragrafo' se desideri che le lettere maiuscole iniziali vengano aggiunte solo al primo paragrafo del tuo post.
Infine, non dimenticare di fare clic sul pulsante ‘Salva modifiche’ per memorizzare le tue impostazioni.
Ora puoi visitare qualsiasi post sul tuo sito web e vedrai le lettere maiuscole iniziali in azione nel primo paragrafo del tuo post.
Se desideri rimuovere le lettere maiuscole iniziali per un post, puoi farlo anche aprendo il post nell'editor a blocchi.
Una volta lì, scorri verso il basso fino alla sezione 'Initial Letter' e seleziona l'opzione 'No' dal menu a discesa. Questo disabiliterà le lettere maiuscole iniziali per quel post.
Bonus: Cambiare i font nei tuoi temi WordPress
Oltre alle lettere maiuscole iniziali, puoi anche cambiare il font sul tuo sito WordPress per rendere i tuoi contenuti più leggibili e gradevoli esteticamente.
Per fare ciò, puoi visitare la pagina Aspetto » Personalizza dalla bacheca di WordPress. Questo aprirà il personalizzatore del tema, dove devi aprire la scheda ‘Globale’.
Nota: Le impostazioni del personalizzatore del tema possono variare a seconda del tema che stai utilizzando. Per questo tutorial, stiamo usando Astra.
Ora vedrai alcune nuove opzioni nella colonna di sinistra, tra cui tipografia, colori, contenitori e pulsanti. Qui, devi espandere la scheda ‘Tipografia’.
Questo aprirà un elenco di diversi preset offerti dal tema, e puoi selezionare un font a tua scelta. Una volta terminato, non dimenticare di fare clic sul pulsante ‘Pubblica’ in alto per salvare le tue impostazioni.
Se stai usando un tema a blocchi, il personalizzatore del tema non sarà disponibile e dovrai cambiare il carattere usando l'editor completo del sito.
Per maggiori dettagli, consulta il nostro tutorial su come cambiare i caratteri nei temi di WordPress.
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere lettere maiuscole iniziali nei post di WordPress. Potresti anche voler consultare la nostra guida su come cambiare i caratteri nel tuo tema WordPress e il nostro elenco di modi per creare un sito WordPress ottimizzato per dispositivi mobili.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Jonas
Ciao, c'è un modo o uno script per fare in modo che la classe .has-drop-cap venga aggiunta automaticamente solo al primo paragrafo quando si crea un nuovo articolo? Penso che sarebbe meglio e molto più naturale per Wordpress.
Supporto WPBeginner
Al momento non abbiamo un metodo che raccomandiamo, ti consigliamo di utilizzare il nostro metodo CSS per qualcosa di simile.
Amministratore
Anna
Ciao, ho problemi a far apparire la lettera maiuscola iniziale nel mio testo. Ho contattato la persona che ha progettato il tema e dice che dovrebbe funzionare bene. Per favore, aiutami, ho provato di tutto, anche ad aggiungerla manualmente. Saluti, Anna
anamika
sto usando questo plugin ma sulla mia pagina del blog, non funziona [tutte le pagine anche la pagina singola funzionano]
Mehmood Ul Hassan
Grazie mille per avermi aiutato in questa questione. La maggior parte dei siti famosi usa i drop cap nei post e l'ho sempre voluto anche nel mio sito WordPress. Sono così felice di questo plugin. I miei post ora sembrano professionali.
James Carter
Una comune convenzione tipografica è quella di seguire il drop cap impostando le restanti lettere della prima parola in maiuscoletto. Questo ha un aspetto migliore, aiuta l'occhio a fare la transizione dal grande drop cap al corpo del testo.