Comment personnaliser le style des blockquotes dans les thèmes WordPress
Cherchez-vous un moyen de personnaliser le style des blockquotes sur votre site Web WordPress ?
Les citations sont souvent la partie la plus mémorable de votre article. Ils constituent également la partie la plus partagée de tout article ou page de blog. C'est pourquoi les journaux et les sites de médias grand public personnalisent leur style de citation pour le faire ressortir.
Dans cet article, nous allons vous montrer comment personnaliser le style des blockquotes dans les thèmes WordPress.
Pourquoi utiliser des blockquotes et les personnaliser dans WordPress ?
L’utilisation de blockquotes dans votre contenu peut améliorer l’expérience utilisateur sur votre site WordPress. Vous pouvez l'utiliser pour faire ressortir une section de texte sélectionnée du reste du contenu et attirer l'attention de vos lecteurs.
Par exemple, vous pouvez utiliser des blockquotes pour les citations d'auteurs et d'influenceurs, les citations de publications, les témoignages de vos clients ou mettre en évidence des informations précieuses pour vos utilisateurs.
Un autre avantage de l’utilisation des blockquotes est qu’elles peuvent augmenter l’engagement social. Permettre aux utilisateurs de partager la citation sur Twitter ou Facebook peut vous aider à obtenir plus de followers 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, rendez-vous simplement dans l'éditeur WordPress et ajoutez le bloc Citation là où vous le souhaitez dans le contenu.
Cependant, le bloc de devis 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 dans WordPress.
Cela dit, voyons comment personnaliser le style des blockquotes dans les thèmes WordPress. Nous allons vous montrer comment changer le style des blockquotes à l’aide d’un plugin WordPress et également en utilisant du CSS personnalisé.
Méthode 1 : personnaliser le style des blockquotes à l'aide d'un plugin
Un moyen simple de personnaliser les blockquotes sur votre site Web WordPress consiste à utiliser un plugin comme Gutenberg Blocks - Ultimate Addons for Gutenberg. Il s’agit d’un plugin WordPress gratuit qui ajoute des blocs supplémentaires dans l’éditeur de contenu WordPress, notamment des blockquotes personnalisables.
Tout d’abord, vous devrez installer et activer le plugin Gutenberg Blocks - Ultimate Addons for Gutenberg. Pour plus de détails, veuillez consulter notre guide sur la façon d'installer un plugin WordPress.
Une fois le plugin actif, il vous amènera automatiquement à Paramètres » UAG depuis votre tableau de bord WordPress.
Par défaut, le plugin activera tous les blocs supplémentaires, y compris les blockquotes, mais vous pouvez choisir de désactiver différents blocs pour votre site Web.
Après cela, vous pouvez modifier n’importe quel article et page de blog. Une fois que vous êtes dans l’éditeur de contenu WordPress, ajoutez simplement un bloc Blockquote n’importe où dans votre contenu.
Ensuite, vous pouvez saisir le texte dans la zone des citations.
Vous trouverez différentes options pour personnaliser le style des citations dans le menu de droite.
Par exemple, vous pouvez choisir entre 2 mises en page, dont moderne et devis. Vous pouvez ensuite utiliser les différentes options pour personnaliser le style de la mise en page, l'épaisseur de la bordure du devis, sa couleur, etc.
Le plugin vous permet également de changer la couleur du texte de la citation et de modifier sa typographie.
Vous pouvez utiliser la police par défaut pour les citations ou choisir une police différente pour faire ressortir le texte. De plus, il existe des options pour modifier la taille de la police et la hauteur des lignes.
Il existe plus d'options pour personnaliser le style d'un blockquote dans le plugin.
Pour citer des tweets, vous pouvez saisir votre identifiant Twitter dans le champ « Nom d'utilisateur » et modifier les paramètres de l'icône Twitter. Il existe des options pour choisir d'afficher l'icône et le texte du Tweet, les deux, ou simplement l'icône. Le plugin vous permet également de modifier son style, son étiquette, etc.
Il existe même une option pour désactiver complètement l'icône Twitter d'apparaître dans les guillemets.
Une fois que vous avez personnalisé votre blockquote, publiez simplement votre article ou votre page de blog.
Visitez ensuite votre site Web pour voir le blockquote en action.
Méthode 2 : ajouter du CSS personnalisé pour personnaliser le style des blockquotes
Si vous ne souhaitez pas utiliser de plugin WordPress, l'ajout de CSS personnalisés est une autre façon de personnaliser vos blockquotes.
Vous pouvez utiliser le bloc de citation par défaut dans l'éditeur WordPress pour ajouter vos citations. Après cela, entrez simplement le code CSS personnalisé pour modifier son style et son apparence.
Pour ajouter le code CSS personnalisé, vous devez d'abord vous rendre sur Apparence » Personnaliser depuis votre tableau de bord WordPress. Cela ouvrira le personnalisateur de thème WordPress.
Dans le personnalisateur de thème, vous devrez cliquer sur l’option « CSS supplémentaire » indiquée dans le menu sur votre gauche.
Après cela, vous pouvez saisir du code CSS personnalisé pour modifier l'apparence et le style des guillemets.
Voici quelques styles de citations que vous pouvez utiliser sur votre site Web.
1. Blockquote CSS classique
Habituellement, les gens utilisent CSS background-image pour ajouter de gros guillemets dans blockquote. Dans cet exemple, nous avons utilisé CSS pour ajouter de gros 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. Citation de bloc simple
Dans cet exemple, nous avons ajouté une couleur d'arrière-plan et une bordure gauche en pointillés au lieu de 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 blockquotes peuvent être faits pour se démarquer 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 Web Google pour les blockquotes en CSS
Dans cet exemple CSS 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 de votre choix. 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. Citation de coin arrondie
Dans cet exemple, nous avons un blockquote avec des coins arrondis et nous avons utilisé une 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. Utiliser le dégradé comme arrière-plan pour Blockquote
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 navigateurs. Nous vous recommandons d'utiliser un générateur de dégradé 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. Citation de bloc avec motif d'arrière-plan
Pour cet exemple, nous avons utilisé une image d’arrière-plan comme modèle pour 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";
}
Remarque : 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échargée sur votre site Web WordPress.
9. Utilisation de plusieurs images en arrière-plan Blockquote
Vous pouvez utiliser plusieurs images dans l’arrière-plan blockquote à l’aide de CSS. Par exemple, nous avons utilisé blockquote:before un pseudo-élément pour ajouter une autre image d'arrière-plan à 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";
}
Remarque : Vous devrez remplacer les URL des images d'arrière-plan dans le code CSS par les images que vous avez importées sur votre site Web.
Nous espérons que l’article vous a aidé à apprendre à personnaliser le style des blockquotes dans les thèmes WordPress. Vous pouvez également consulter notre guide sur la façon de choisir le meilleur logiciel de conception et les meilleurs services d’hébergement de sites Web gratuits.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.