Les citations sont souvent la partie la plus mémorable de votre article. Elles sont également la partie la plus partagée d’une publication ou d’une page de blog. C’est pourquoi les journaux et les sites de médias grand public personnalisent leur style de citation en bloc pour qu’elle se démarque.
Nous avons ajouté des styles de guillemets pour mettre en valeur les citations précieuses et les conseils d’experts sur notre site. Ce choix s’est avéré efficace pour capter l’attention du lecteur et mettre l’accent sur les éléments clés à retenir.
Dans cet article, nous allons vous afficher comment personnaliser facilement le style des blockquotes dans les thèmes WordPress.
Pourquoi utiliser et personnaliser le style des guillemets dans WordPress ?
L’utilisation de guillemets dans votre contenu peut améliorer l’expérience utilisateur sur votre site WordPress. Vous pouvez les utiliser pour qu’une section de texte sélectionnée se démarque du reste du contenu et attire l’attention de vos lecteurs.
Par exemple, vous pouvez utiliser des guillemets pour des citations d’auteurs/autrices et d’influenceurs, des citations de publications, des témoignages de vos clients/clientes, ou mettre en avant des informations précieuses pour les internautes de votre blog WordPress.
Un autre avantage de l’utilisation des guillemets est qu’ils peuvent accroître l’engagement social. En permettant aux utilisateurs de partager une citation sur Twitter ou Facebook, vous pouvez vous aider à obtenir plus d’abonnés et à améliorer la visibilité de votre marque sur les réseaux sociaux.
Par défaut, WordPress propose un bloc Citation dans l’éditeur de contenu. Pour l’ajouter, il suffit de se rendre dans l’éditeur WordPress et d’insérer le bloc Citation à l’endroit voulu dans le contenu.
Cependant, le bloc de citation par défaut n’offre pas beaucoup d’options de personnalisation. Vous pouvez uniquement modifier la taille du texte et choisir parmi les styles par défaut de WordPress.
Cela dit, voyons comment personnaliser le style des blockquotes dans les thèmes WordPress. Nous allons vous afficher comment modifier le style des blockquotes à l’aide d’une extension WordPress et également à l’aide d’un CSS personnalisé :
Méthode 1 : Personnaliser le style des guillemets à l’aide d’une extension
Un moyen facile de personnaliser les blockquotes sur votre site WordPress est d’utiliser une extension comme Spectra – WordPress Gutenberg Blocks. C’est une extension WordPress gratuite qui ajoute des blocs supplémentaires dans l’éditeur de contenu de WordPress, y compris des blockquotes personnalisables.
En savoir plus, vous pouvez consulter notre avis détaillé sur le Spectra.
Tout d’abord, vous devrez installer et activer l’extension Spectra – WordPress Gutenberg Blocks. Pour plus de détails, veuillez consulter notre guide étape par étape sur l’installation d’un plugin WordPress.
Une fois activée, visitez la page Spectra » Blocks dans la colonne latérale de l’administrateur WordPress.
Consultez cette page, vous verrez que l’extension a activé tous les blocs supplémentaires, y compris le bloc Blockquote par défaut.
À partir de là, vous pouvez désactiver tous les blocs inutiles en permutant le commutateur situé à côté de ces options.
Ensuite, ouvrez une page ou une publication de votre choix dans l’éditeur de blocs.
Ensuite, cliquez sur le bouton » + » dans le coin supérieur gauche de l’écran pour ajouter le bloc Blockquote n’importe où dans votre contenu.
Vous pouvez ensuite saisir le texte dans la zone de guillemets.
Une fois que vous avez fait cela, vous pouvez configurer la mise en page de Blockquote à partir du panneau de droite.
À partir de là, vous pouvez choisir l’option « Bordure » pour une mise en page simple et l’option « Citation » si vous souhaitez ajouter des guillemets, sélectionner l’alignement du texte, etc.
Vous pouvez également ajouter une image de l’auteur/autrice pour donner plus de style à votre bloc Blockquote.
Ensuite, passez à l’onglet « Style » dans le panneau du bloc pour modifier la taille de l’icône de la citation, la taille de l’arrière-plan, etc.
Vous pouvez également modifier la couleur des citations, la typographie, la couleur de l’auteur/autrice et l’espacement de votre bloc à partir de cet onglet.
Enfin, cliquez sur le bouton « Publier » ou « Mettre à jour » en haut de la page pour stocker vos réglages.
Vous pouvez maintenant vous rendre sur votre blog WordPress pour voir le bloc Blockquote en action.
Méthode 2 : Ajouter un CSS personnalisé pour personnaliser le style des guillemets à l’aide de WPCode
Si vous ne souhaitez pas utiliser une extension WordPress, l’ajout d’un CSS personnalisé est un autre moyen de personnaliser votre blockquote.
Le moyen le plus simple d’ajouter du code CSS personnalisé à votre site est le plugin WPCode, qui est la meilleure extension d’extraits de code du marché.
Tout d’abord, vous devez installer et activer l’extension WPCode. Pour des instructions détaillées, vous pouvez consulter notre guide du débutant sur l’installation d’une extension WordPress.
Note : WPCode dispose également d’une version gratuite. Cependant, vous aurez besoin de l’offre premium de l’extension pour déverrouiller l’option ‘CSS Snippet’.
Une fois activé, visitez la page Code Snippets » + Add Snippet » depuis la colonne latérale de l’administration de WordPress.
Cliquez ensuite sur le bouton « Utiliser l’extrait » sous l’option « Ajouter votre code personnalisé (nouvel extrait) ».
Vous accédez alors à la page « Créer un extrait personnalisé », où vous pouvez commencer par saisir un nom pour votre extrait de code.
Ensuite, sélectionnez « extrait CSS » comme type de code dans le menu déroulant situé dans le coin droit de l’écran.
Ensuite, vous pouvez saisir l’un des extraits de code CSS personnalisés suivants dans le champ « Prévisualisation du code » pour modifier l’aspect et le style de l’apostrophe.
Gardez à l’esprit que ces Réglages modifieront l’apparence du bloc « Citation » par défaut dans WordPress.
Voici quelques styles de guillemets que vous pouvez utiliser sur votre site.
1. Blockquote CSS classique
Habituellement, les gens utilisent CSS background-image pour ajouter des guillemets de grande taille dans les guillemets. Dans cet exemple, nous avons utilisé CSS pour ajouter de grands guillemets.
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 classique avec image
Dans cet exemple, nous avons utilisé une image d’arrière-plan pour les guillemets.
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 simple
Dans cet exemple, nous avons ajouté une couleur d’arrière-plan et une bordure gauche en pointillés à la place des guillemets. N’hésitez pas à jouer avec les couleurs.
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 blanc, bleu et orange
Les guillemets peuvent être mis en valeur, et ils peuvent être aussi colorés que vous le souhaitez.
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. Utilisation des polices Google Web Fonts pour les guillemets en CSS
Dans cet exemple CSS de blockquote, nous avons utilisé la police Droid Serif de la bibliothèque de polices web de Google.
Vous pouvez utiliser n’importe quelle police personnalisée. Remplacez simplement la police dans le code par la famille de polices que vous souhaitez utiliser.
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. Bloc de citation à angle droit
Dans cet exemple, nous avons une citation en bloc avec des coins arrondis, et nous avons utilisé l’Ombre portée pour les bordures.
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. Utilisation d’un dégradé comme arrière-plan d’un bloc-citation
Dans cet exemple de blockquote CSS, nous avons utilisé le dégradé CSS pour améliorer l’arrière-plan d’un blockquote.
Les dégradés CSS sont délicats en raison de la compatibilité entre les navigateurs. Nous recommandons d’utiliser un générateur de dégradés CSS, comme 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 avec composition arrière-plan
Pour cet exemple, nous avons utilisé une image d’arrière-plan comme composition pour le 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";
}
Note : Vous devrez remplacer l’URL de l’image d’arrière-plan dans le code CSS par l’URL de l’image que vous avez téléversée sur votre site WordPress.
9. Utilisation de plusieurs images dans l’arrière-plan d’un bloc-texte
Vous pouvez utiliser plusieurs images dans l’arrière-plan de la note de bas de page à l’aide de CSS. Par exemple, nous avons utilisé le pseudo-élément blockquote :before pour ajouter une autre image d’arrière-plan au 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";
}
Note : Vous devrez remplacer les URL des images d’arrière-plan dans le code CSS par les images que vous avez téléversées sur votre site.
Ajoutez le code et enregistrez votre extrait
Une fois que vous avez choisi un style de guillemet et ajouté son code CSS dans la boîte « Prévisualisation du code », défilez vers le bas jusqu’à la section « Insertion ».
Sélectionnez ensuite le mode « Insertion automatique » pour que le code modifie automatiquement l’apparence du bloc de citation lorsqu’il est activé.
Enfin, défilez vers le haut de la page pour permuter le commutateur « Inactif » en « Actif ».
Cliquez ensuite sur le bouton « Enregistrer l’extrait » pour stocker vos réglages.
Vous pouvez désormais insérer un bloc de citation dans une page ou une publication WordPress.
Ensuite, vous pouvez visiter votre site WordPress pour voir votre bloc de citation stylisé.
Bonus : Afficher des citations aléatoires dans la colonne latérale de WordPress
Si vous le souhaitez, vous pouvez également afficher des citations de clients/clientes personnalisés dans votre colonne latérale WordPress. Cela motivera les utilisateurs/utilisatrices à explorer votre site, et ils finiront peut-être par faire un achat ou s’inscrire à votre newsletter.
Pour afficher des citations aléatoires, vous devez installer et activer l’extension Citations et Astuces. Pour plus de détails, consultez notre guide du débutant sur l’installation d’une extension WordPress.
Une fois activée, visitez la page » Outil de personnalisation « où vous pouvez saisir le devis laissé par le client/cliente dans l’éditeur/éditrices de texte. Cliquez ensuite sur le bouton « Publier ».
Une fois que vous avez fait cela, dirigez-vous vers la page » Citations » Réglages depuis le tableau de bord de WordPress et copiez le code court dans la section » Citations et Astuces « .
Vous pouvez ensuite coller ce code court dans la colonne latérale ou dans n’importe quelle zone de widget de votre choix.
Dès lors, les internautes verront des citations aléatoires de clients/clientes dans votre colonne latérale WordPress.
Pour des instructions détaillées, vous pouvez consulter notre tutoriel sur la façon d’afficher des citations aléatoires dans la colonne latérale de WordPress.
Nous espérons que cet article vous a aidé à apprendre comment personnaliser le style des guillemets dans les thèmes WordPress. Vous pouvez également consulter notre guide sur la façon de retirer les CSS inutilisés dans WordPress et notre tutoriel sur l’ajout d’animations CSS dans WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
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!
Syams Qomar
How to make it responsive?
WPBeginner Support
It would depend on your theme but the blockquotes should be responsive by default.
Administrateur
JULIE
Hi
This is great, but how do you make it mobile responsive?
thanks
Julie
WPBeginner Support
The quotes should be relatively responsive without any changes
Administrateur
Sachin Nayi
is there any way to add social media share button at each blockquote?
WPBeginner Support
Unless I hear otherwise, our previous plugin we recommended for that is no longer available and we have not found an alternative.
Administrateur
Rubnawaz Quraishi
Can we use blockquotes with author image?
Vishwas
Thanks a ton, man! You’re a saviour.
Aakash Waghmare
Very thank’s Sir. You are always give me a right information. Thanks a lot Sir.
Per Thomsen
Fantastic article, thanks for sharing.
I’ve been trying to use the classic CSS style but i can’t seem to get the » to come up at the start of the quote. Would you have any suggestions for what it might be?
Thanks
David Riewe
Makes sense but does not work with the tesseract theme.
Catherine
Hi,
I love this. I used example #5, it looks great on desktop but cuts off on mobile. Any suggestions?
steve
The problem that I have is:
I had a list of links (URLs) on a page, that weren’t displayed as links (were not clickable), but after an WP update, a lot of them, gut not all, are suddenly displayed as blockquotes (so they are clickable). As I don’t want to have clickable links on that page – how can I reverse this effect?
WPBeginner Support
Since WordPress 4.4, WordPress started automatically embedding URLs from other WordPress sites. Here is how to turn off post oEmbed feature on your site.
Administrateur
Barb Keck
How do you add a closing quote?
Giampaolo
Thank’s very helpful.
Sameer Panda
Very helpful. I used the left border one. Thanks for sharing.
Chuka
These blockquote styles are not responsive, works perfectly on desktop but they get cut off on mobile, any idea on what to do to make it responsive?
Sameer Panda
Hey CHUKA, it’s working perfect on mobile too.
Helmut Schütz
I used the Round Corner Blockquote, but only lines 1 and 2 to 8, to put it into my Leeway Child theme – and it works on all devices responsively. You merely must omit line 2 with the absolute width!
But can anyone help me to make it possible to adjust the width of the box according to the width of the text? Sometimes I quote poems with only some words in one line, and if I center them, there is too much place around them on the PC monitor. But I don’t want to insert absolut width-value because normally I want to habe the blockquote full width from left to right.
Best regards, Helmut
Kelli
This is really helpful!
My only question is how can I get rid of the « » at the beginning of the quote? I plugged in the code for #5 and it looks great, but everytime I type something inside it I am stuck with a quotation mark at the beginning.
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
This is great however it is not working for me at all – where am I supposed to put the codes?
Prabin Parajuli
Inside your child theme’s style.css
Jessica
#8 does exactly what I need it to do…except it repeats the image if my quote gets too long. Is there a way to turn off the repeat? I’ve already tried putting ‘background-repeat: no repeat;’ right under the background url, but to no avail.
Thank you so much! I’ve bookmarked your site and can tell it’s going to be SO helpful
Scarlet
With #4, if I wanted to add quotation marks to that, how would I go about doing it? And if I wanted the box to have rounded edges instead of square, how would I go about doing that as well?
Akash KB
Is it possible to use 2 types of blockquotes on a single blog?
gWorldz
Yes, you could use more than 1 style for your blockquotes by adding css classes to your blockquotes using the html editor.
Example:
<blockquote class= »my-style-1″>QUOTE</blockquote>
<blockquote class= »my-style-2″>QUOTE</blockquote>
Then in the css above (or your own) add .my-style-1 to one and .my-style-2 to another right behind blockquote (no space) in the css.
Example:
blockquote.my-style-1 { /*Properties: Values;*/ }
blockquote.my-style-1:before{ /*Properties: Values;*/ }blockquote.my-style-1 cite:before { /*Properties: Values;*/ }
blockquote.my-style-2 { /*Properties: Values;*/ }
blockquote.my-style-2:before{ /*Properties: Values;*/ }blockquote.my-style-2 cite:before { /*Properties: Values;*/ }
Eleanore
How exactly do you use these codes to make a block quote? Where do you insert your text inwhich you wish to be in a block? Does this only work for posts or can you use it in a page in an article on a page?
Anant Vijay Soni
You can add in your Website CSS.
Mostly theme structure:
Go to admin > Appearance > Customize > Additional CSS
Chris
I tried the first example in the live css editor in Headway 3.6. It showed the text 201C instead of the quotation marks. It was also centered over the entire quote instead of the top left. And there was a light gray left border that I couldn’t get rid of.
Adrian Robertson
Time and again when looking for how to implement something, invariably I end up at this site (and must admit to looking for Syed’s picture in the Google results, so I know I am getting to the right place) .
Your tutorials are fantastic.
Abdul Samad
Thanks Man For This Article
Preston Ehrler
I don’t have the coding capability to execute these. Is there a plugin that will do the same job?
Leonard Grossman
Question: blockquote in WP defaults to italics Is there a way to turn that off?
Thanks,
Len
Editorial Staff
It doesn’t default to italics. It is probably a styling thing in your theme.
Administrateur
Leonard Grossman
Look at all the examples in this article. In each the text within the blockquotes appears in italics. That is what I am taking about. How can I use blockquotes without the resulting italics.
Thanks.
Len
Kanan
It is not working in thesis 2.0? any suggestion?
Editorial Staff
See what thesis is using for their blockquote styles.
Administrateur
Khürt Williams
“This will add a little HTML in your post that we can use to customize the styling. Note: we are using the text mode in WordPress post editor. Below is an example of the HTML that you should see.”
Your statement seems to indicate that the b- quote button add the <cite> tag. It does not.
Khürt Williams
« This will add a little HTML in your post that we can use to customize the styling. Note: we are using the text mode in WordPress post editor. Below is an example of the HTML that you should see. »
Your statement seems to indicate that the b- quote button add the tag. It does not.
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
Thanks so much for this.
Akhil Gupta
Thanks for this beautiful Article, now i have many ideas to customize blockquotes.
Sue Surdam
Great collection of block quote effects! With so many plugins around, it is easy to forget what a few lines of css can do to create magic.
Zimbrul
Absolutely agree with your statement. And doing so you can learn by doing it.
Thanks WP Beginner for the article, it goes into my Instapaper
Reid Peterson
Many thanks for these tips! I mixed tips 4 and 6 and had a really nice result!
Andre Costa
Thank you for these tips. I have used blockquotes in the past, and it is wonderful to find out about the different possibilities.