Le citazioni sono spesso la parte più memorabile del tuo articolo. Sono anche la parte più condivisa di qualsiasi post o pagina del blog. Ecco perché giornali e siti di informazione mainstream personalizzano lo stile dei loro blockquote per farli risaltare.
Abbiamo aggiunto stili di blockquote per evidenziare citazioni preziose e consigli di esperti sul nostro sito web. Questa scelta si è dimostrata efficace nel catturare l'attenzione del lettore e nell'enfatizzare i punti chiave.
In questo articolo, ti mostreremo come personalizzare facilmente lo stile dei blockquote nei temi di WordPress.
Perché usare e personalizzare lo stile dei blockquote in WordPress?
L'uso dei blockquote nei tuoi contenuti può migliorare l'esperienza utente sul tuo sito web WordPress. Puoi usarli per far risaltare una sezione di testo selezionata dal resto del contenuto e catturare l'attenzione dei tuoi lettori.
Ad esempio, puoi usare i blockquote per citazioni di autori e influencer, citazioni da pubblicazioni, testimonianze dei tuoi clienti, o per evidenziare informazioni preziose ai visitatori del tuo blog WordPress.
Un altro vantaggio dell'uso dei blockquote è che possono aumentare l'engagement sociale. Consentire agli utenti di condividere una citazione su Twitter o Facebook può aiutarti a ottenere più follower e migliorare la visibilità social del tuo brand.
Per impostazione predefinita, WordPress offre un blocco Citazione nell'editor dei contenuti. Per aggiungerlo, vai semplicemente all'editor di WordPress e inserisci il blocco Citazione dove desideri nel contenuto.
Tuttavia, il blocco citazione predefinito non offre molte opzioni di personalizzazione. Puoi solo cambiare la dimensione del testo e scegliere tra gli stili predefiniti in WordPress.
Detto questo, diamo un'occhiata a come puoi personalizzare lo stile dei blockquote nei temi WordPress. Ti mostreremo come cambiare lo stile dei blockquote utilizzando un plugin WordPress e anche utilizzando CSS personalizzato:
- Metodo 1: Personalizza lo stile dei blockquote usando un plugin
- Metodo 2: Aggiungi CSS personalizzato per personalizzare lo stile dei blockquote usando WPCode
- Bonus: Visualizza citazioni casuali nella barra laterale di WordPress
Metodo 1: Personalizza lo stile dei blockquote usando un plugin
Un modo semplice per personalizzare i blockquote sul tuo sito web WordPress è utilizzare un plugin come Spectra – Blocchi Gutenberg di WordPress. È un plugin WordPress gratuito che aggiunge blocchi aggiuntivi nell'editor dei contenuti di WordPress, inclusi blockquote personalizzabili.
Per maggiori informazioni, puoi consultare la nostra recensione dettagliata di Spectra.
Innanzitutto, dovrai installare e attivare il plugin Spectra – Blocchi Gutenberg di WordPress. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.
Dopo l'attivazione, visita la pagina Spectra » Blocchi dalla barra laterale di amministrazione di WordPress.
Qui vedrai che il plugin ha attivato tutti i blocchi aggiuntivi, incluso il blocco Blockquote per impostazione predefinita.
Da qui, puoi disattivare tutti i blocchi non necessari attivando l'interruttore accanto a queste opzioni.
Dopodiché, apri una pagina o un post a tua scelta nell'editor a blocchi.
Successivamente, fai clic sul pulsante '+' nell'angolo in alto a sinistra dello schermo per aggiungere il blocco Blockquote ovunque nel tuo contenuto.
Dopodiché, puoi inserire il testo nell'area Blockquote.
Una volta fatto, puoi configurare il layout del Blockquote dal pannello sulla destra.
Da qui, puoi scegliere l'opzione 'Bordo' per un layout semplice e l'opzione 'Citazione' se desideri aggiungere virgolette, selezionare l'allineamento del testo e altro ancora.
Puoi anche aggiungere un'immagine dell'autore per stilizzare ulteriormente il tuo blocco Blockquote.
Successivamente, passa alla scheda 'Stile' nel pannello del blocco per modificare la dimensione dell'icona della citazione, la dimensione dello sfondo e altro ancora.
Puoi anche cambiare il colore della citazione, la tipografia, il colore dell'autore e lo spazio del tuo blocco da questa scheda.
Infine, fai clic sul pulsante ‘Pubblica’ o ‘Aggiorna’ in alto per salvare le tue impostazioni.
Ora puoi visitare il tuo blog WordPress per vedere il blocco Blockquote in azione.
Metodo 2: Aggiungi CSS personalizzato per personalizzare lo stile dei blockquote usando WPCode
Se non vuoi usare un plugin WordPress, allora aggiungere CSS personalizzato è un altro modo per personalizzare la tua blockquote.
Il modo più semplice per aggiungere codice CSS personalizzato al tuo sito web è il plugin WPCode, che è il miglior plugin per snippet di codice sul mercato.
Innanzitutto, devi installare e attivare il plugin WPCode. Per istruzioni dettagliate, potresti voler consultare la nostra guida per principianti su come installare un plugin WordPress.
Nota: WPCode ha anche una versione gratuita. Tuttavia, avrai bisogno del piano premium del plugin per sbloccare l'opzione ‘CSS Snippet’.
Dopo l'attivazione, visita la pagina Code Snippets » + Add Snippet dalla barra laterale di amministrazione di WordPress.
Successivamente, fai clic sul pulsante ‘Usa Snippet’ sotto l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo Snippet)’.
Questo ti porterà alla pagina ‘Crea snippet personalizzato’, dove puoi iniziare digitando un nome per il tuo snippet di codice.
Successivamente, seleziona ‘CSS Snippet’ come tipo di codice dal menu a discesa nell'angolo destro dello schermo.
Dopodiché, puoi inserire uno qualsiasi dei seguenti snippet di codice CSS personalizzato nella casella ‘Code Preview’ per modificare l'aspetto e lo stile della blockquote.
Tieni presente che queste impostazioni cambieranno l'aspetto del blocco ‘Quote’ predefinito in WordPress.
Ecco alcuni stili di blockquote che puoi utilizzare sul tuo sito web.
1. Blockquote CSS Classica
Di solito, le persone usano CSS background-image per aggiungere grandi virgolette nelle blockquote. In questo esempio, abbiamo utilizzato CSS per aggiungere grandi virgolette.
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
background:#ececec;
}
blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -10px;
top: -10px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
2. Blockquote Classica Con Immagine
In questo esempio, abbiamo utilizzato un'immagine di sfondo per le virgolette.
blockquote {
font: 16px italic Georgia, serif;
width:450px;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 3px solid #ccc;
margin: 5px;
background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
3. Blockquote Semplice
In questo esempio, abbiamo aggiunto un colore di sfondo e un bordo sinistro tratteggiato invece dei blockquote. Sentiti libero di giocare con i colori.
blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
4. Blockquote bianco, blu e arancione
I blockquote possono essere fatti risaltare e possono essere colorati quanto si desidera.
blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}
blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
5. Utilizzo dei Google Web Fonts per i Blockquote in CSS
In questo esempio CSS di blockquote, abbiamo utilizzato il font Droid Serif dalla libreria Google web fonts.
Puoi usare qualsiasi font personalizzato che desideri. Sostituisci semplicemente il font nel codice con la famiglia di font che vuoi usare.
blockquote {
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
}
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
6. Blockquote con angoli arrotondati
In questo esempio, abbiamo un blockquote con angoli arrotondati e abbiamo utilizzato l'ombra per i bordi.
blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}
7. Utilizzo di un gradiente come sfondo per il Blockquote
In questo esempio CSS di blockquote, abbiamo utilizzato un gradiente CSS per migliorare lo sfondo di un blockquote.
I gradienti CSS sono complicati a causa della compatibilità tra browser. Si consiglia di utilizzare un generatore di gradienti CSS, come CSS Gradient.
blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}
8. Blockquote con motivo di sfondo
Per questo esempio, abbiamo utilizzato un'immagine di sfondo come motivo per il blockquote.
blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}
Nota: Dovrai sostituire l'URL dell'immagine di sfondo nel codice CSS con l'URL dell'immagine che hai caricato sul tuo sito web WordPress.
9. Utilizzo di immagini multiple come sfondo del blockquote
Puoi utilizzare più immagini come sfondo del blockquote usando il CSS. Ad esempio, abbiamo utilizzato blockquote:before, un pseudo-elemento, per aggiungere un'altra immagine di sfondo al blockquote.
blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "\2014 \2009";
}
Nota: Dovrai sostituire gli URL delle immagini di sfondo nel codice CSS con le immagini che hai caricato sul tuo sito web.
Aggiungi il codice e salva il tuo snippet
Una volta scelto uno stile per il blockquote e aggiunto il suo codice CSS nella casella 'Anteprima codice', scorri verso il basso fino alla sezione 'Inserimento'.
Da qui, seleziona la modalità 'Inserimento automatico' in modo che il codice cambi automaticamente l'aspetto del blocco Citazione al momento dell'attivazione.
Infine, scorri fino in cima alla pagina per attivare l'interruttore da ‘Inactive’ ad ‘Active’.
Successivamente, fai clic sul pulsante ‘Save Snippet’ per salvare le tue impostazioni.
Ora puoi inserire un blocco Citazione in una pagina o in un post di WordPress.
Quindi, puoi visitare il tuo sito WordPress per visualizzare il tuo blocco Citazione stilizzato.
Bonus: Visualizza citazioni casuali nella barra laterale di WordPress
Se vuoi, puoi anche visualizzare citazioni di clienti soddisfatti nella barra laterale di WordPress. Questo motiverà gli utenti a esplorare il tuo sito e potrebbero finire per effettuare un acquisto o iscriversi alla tua newsletter.
Per mostrare citazioni casuali, devi installare e attivare il plugin Quotes and Tips. Per i dettagli, consulta la nostra guida per principianti su come installare un plugin WordPress.
Dopo l'attivazione, visita la pagina Citazioni » Aggiungi nuova dove puoi digitare la citazione lasciata dal cliente nell'editor di testo. Dopodiché, fai clic sul pulsante 'Pubblica'.
Una volta fatto ciò, vai alla pagina Citazioni » Impostazioni dalla dashboard di WordPress e copia lo shortcode nella sezione 'Citazioni e Suggerimenti'.
Puoi quindi incollare questo shortcode nella barra laterale o in qualsiasi area widget di tua preferenza.
Dopo averlo fatto, i visitatori vedranno citazioni casuali nella barra laterale di WordPress da parte dei clienti.
Per istruzioni dettagliate, puoi consultare il nostro tutorial su come mostrare citazioni casuali nella barra laterale di WordPress.
Speriamo che questo articolo ti abbia aiutato a imparare come personalizzare lo stile dei blockquote nei temi di WordPress. Puoi anche consultare la nostra guida su come applicare CSS per ruoli utente specifici in WordPress e il nostro tutorial su aggiungere animazioni CSS in WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Syams Qomar
Come renderlo responsive?
Supporto WPBeginner
Dipenderebbe dal tuo tema, ma i blockquote dovrebbero essere responsive per impostazione predefinita.
Amministratore
JULIE
Ciao
Questo è ottimo, ma come lo rendi responsive per dispositivi mobili?
grazie
Julie
Supporto WPBeginner
Le citazioni dovrebbero essere relativamente responsive senza alcuna modifica
Amministratore
Sachin Nayi
c'è un modo per aggiungere un pulsante di condivisione sui social media a ogni blockquote?
Supporto WPBeginner
A meno che non senta diversamente, il nostro precedente plugin che abbiamo raccomandato per questo non è più disponibile e non ne abbiamo trovato un'alternativa.
Amministratore
Rubnawaz Quraishi
Possiamo usare le citazioni con l'immagine dell'autore?
Vishwas
Grazie mille, amico! Sei un salvatore.
Aakash Waghmare
Molte grazie, signore. Lei mi dà sempre le informazioni giuste. Grazie mille, signore.
Per Thomsen
Articolo fantastico, grazie per averlo condiviso.
Ho provato a usare lo stile CSS classico ma non riesco a far apparire le virgolette all'inizio della citazione. Avresti qualche suggerimento su cosa potrebbe essere?
Grazie
David Riewe
Ha senso ma non funziona con il tema tesseract.
Catherine
Ciao,
Adoro questo. Ho usato l'esempio n. 5, sembra fantastico sul desktop ma viene tagliato sul cellulare. Suggerimenti?
steve
Il problema che ho è:
Avevo un elenco di link (URL) su una pagina, che non venivano visualizzati come link (non erano cliccabili), ma dopo un aggiornamento di WP, molti di essi, ma non tutti, sono improvvisamente visualizzati come citazioni (quindi sono cliccabili). Dato che non voglio avere link cliccabili su quella pagina, come posso invertire questo effetto?
Supporto WPBeginner
Da WordPress 4.4, WordPress ha iniziato a incorporare automaticamente URL da altri siti WordPress. Ecco come disattivare la funzione oEmbed dei post sul tuo sito.
Amministratore
Barb Keck
Come si aggiunge una virgoletta di chiusura?
Giampaolo
Grazie, molto utile.
Sameer Panda
Molto utile. Ho usato quello con il bordo sinistro. Grazie per aver condiviso.
Chuka
Questi stili di blockquote non sono responsive, funzionano perfettamente sul desktop ma vengono tagliati sul cellulare, avete qualche idea su cosa fare per renderli responsive?
Sameer Panda
Ciao CHUKA, funziona perfettamente anche sul cellulare.
Helmut Schütz
Ho usato il Blockquote con angoli arrotondati, ma solo le righe da 1 e 2 a 8, per metterlo nel mio tema figlio Leeway – e funziona su tutti i dispositivi in modo responsive. Devi semplicemente omettere la riga 2 con la larghezza assoluta!
Ma qualcuno può aiutarmi a rendere possibile regolare la larghezza della casella in base alla larghezza del testo? A volte cito poesie con solo poche parole su una riga, e se le centro, c'è troppo spazio intorno a loro sul monitor del PC. Ma non voglio inserire un valore di larghezza assoluto perché normalmente voglio che il blockquote sia a larghezza intera da sinistra a destra.
Cordiali saluti, Helmut
Kelli
Questo è davvero utile!
La mia unica domanda è come posso liberarmi delle virgolette "" all'inizio della citazione? Ho inserito il codice per il #5 e sembra fantastico, ma ogni volta che digito qualcosa al suo interno, rimango bloccato con un segno di virgoletta all'inizio.
Leah
A million blessing for a thousand ages to you and yours. (Seriously, this post was THAT helpful!)
Thanks for making it simple, easy to understand and implement.
Carolina
Questo è fantastico, tuttavia non funziona per me affatto – dove dovrei mettere i codici?
Prabin Parajuli
All'interno del file style.css del tuo tema figlio
Jessica
Il #8 fa esattamente quello che mi serve... tranne che ripete l'immagine se la mia citazione diventa troppo lunga. C'è un modo per disattivare la ripetizione? Ho già provato a mettere 'background-repeat: no repeat;' subito dopo l'URL dell'immagine, ma senza successo.
Thank you so much! I’ve bookmarked your site and can tell it’s going to be SO helpful
Scarlet
Con il #4, se volessi aggiungere delle virgolette, come dovrei fare? E se volessi che la casella avesse bordi arrotondati invece che quadrati, come dovrei fare anche in quel caso?
Akash KB
È possibile utilizzare 2 tipi di blockquote su un singolo blog?
gWorldz
Sì, potresti usare più di uno stile per i tuoi blockquote aggiungendo classi CSS ai tuoi blockquote utilizzando l'editor HTML.
Esempio:
<blockquote class=”my-style-1″>CITAZIONE</blockquote>
<blockquote class=”my-style-2″>CITAZIONE</blockquote>
Quindi nel css sopra (o nel tuo) aggiungi .my-style-1 a uno e .my-style-2 a un altro subito dopo blockquote (senza spazio) nel css.
Esempio:
blockquote.my-style-1 { /*Proprietà: Valori;*/ }
blockquote.my-style-1:before{ /*Proprietà: Valori;*/ }blockquote.my-style-1 cite:before { /*Proprietà: Valori;*/ }
blockquote.my-style-2 { /*Proprietà: Valori;*/ }
blockquote.my-style-2:before{ /*Proprietà: Valori;*/ }blockquote.my-style-2 cite:before { /*Proprietà: Valori;*/ }
Eleanore
Come si usano esattamente questi codici per creare una citazione in blocco? Dove inserisci il tuo testo che desideri sia in blocco? Funziona solo per i post o puoi usarlo in una pagina in un articolo su una pagina?
Anant Vijay Soni
Puoi aggiungerlo nel CSS del tuo sito web.
Struttura principale del tema:
Vai su amministrazione > Aspetto > Personalizza > CSS aggiuntivo
Chris
Ho provato il primo esempio nell'editor CSS live di Headway 3.6. Ha mostrato il testo 201C invece delle virgolette. Era anche centrato sull'intera citazione invece che in alto a sinistra. E c'era un bordo grigio chiaro a sinistra che non riuscivo a rimuovere.
Adrian Robertson
Ogni volta che cerco come implementare qualcosa, inevitabilmente finisco su questo sito (e devo ammettere di cercare la foto di Syed nei risultati di Google, così so di essere arrivato nel posto giusto).
I tuoi tutorial sono fantastici.
Abdul Samad
Grazie Uomo Per Questo Articolo
Preston Ehrler
Non ho le capacità di codifica per eseguirli. Esiste un plugin che faccia lo stesso lavoro?
Leonard Grossman
Domanda: blockquote in WP è predefinito in corsivo C'è un modo per disattivarlo?
Grazie,
Len
Staff editoriale
Non è predefinito in corsivo. Probabilmente è una questione di stile nel tuo tema.
Amministratore
Leonard Grossman
Guarda tutti gli esempi in questo articolo. In ognuno il testo all'interno dei blockquote appare in corsivo. È di questo che sto parlando. Come posso usare i blockquote senza il corsivo risultante.
Grazie.
Len
Kanan
Non funziona in thesis 2.0? qualche suggerimento?
Staff editoriale
Vedi quale tesi utilizza per i suoi stili di blockquote.
Amministratore
Khürt Williams
“Questo aggiungerà un po' di HTML al tuo post che potremo utilizzare per personalizzare lo stile. Nota: stiamo usando la modalità testo nell'editor dei post di WordPress. Di seguito è riportato un esempio dell'HTML che dovresti vedere.”
La tua affermazione sembra indicare che il pulsante b-quote aggiunga il tag <cite>. Non lo fa.
Khürt Williams
“Questo aggiungerà un po' di HTML al tuo post che potremo utilizzare per personalizzare lo stile. Nota: stiamo usando la modalità testo nell'editor dei post di WordPress. Di seguito è riportato un esempio dell'HTML che dovresti vedere.”
La tua affermazione sembra indicare che il pulsante b-quote aggiunga il tag . Non lo fa.
Ambika Choudhary Mahajan
Absolutely brilliant!!
Thanks a ton for sharing. I’d been wanting to do something like that with the blockquotes on my blog. But didnt know how to go about it!
Now, I do.
Jack
Grazie mille per questo.
Akhil Gupta
Grazie per questo bellissimo articolo, ora ho molte idee per personalizzare le blockquote.
Sue Surdam
Grande raccolta di effetti di block quote! Con così tanti plugin in circolazione, è facile dimenticare cosa possano fare poche righe di CSS per creare magia.
Zimbrul
Concordo assolutamente con la tua affermazione. E facendolo puoi imparare facendolo.
Grazie WP Beginner per l'articolo, va nel mio Instapaper
Reid Peterson
Molte grazie per questi suggerimenti! Ho mescolato i suggerimenti 4 e 6 e ho ottenuto un risultato davvero piacevole!
Andre Costa
Grazie per questi suggerimenti. Ho usato le blockquote in passato, ed è meraviglioso scoprire le diverse possibilità.