Vous aimez ajouter des citations à votre site WordPress pour soutenir votre contenu ? Si oui, avez-vous envisagé de modifier le style des citations dans les thèmes WordPress ? Un blockquote est une grande section de texte provenant d’une autre source et dont l’apparence est différente du reste du paragraphe . Il se distingue par l’élément HTML que votre éditeur de texte utilise.

L’utilisation de guillemets au lieu des guillemets normaux a pour but de faire ressortir davantage l’information. Vous pouvez facilement modifier le style des guillemets en ajoutant des feuilles de style en cascade (CSS) personnalisées. Aujourd’hui, je vais vous montrer comment changer le style des guillemets dans WordPress.

Pourquoi utiliser des citations en bloc et les styliser ?

Les citations en bloc sont un excellent moyen d’utiliser d’autres sources d’information pour prouver votre point de vue. Pour être une source fiable, vous devez utiliser plusieurs sources respectables. Assurez-vous de donner crédit là où le crédit est dû, sinon une citation en bloc peut être un plagiat. N’oubliez pas que si vous êtes en concurrence avec d’autres sites web, vous ne voudrez peut-être pas utiliser leur contenu comme source.

Les citations en bloc ont un avantage certain sur les citations normales en raison de leur apparence. Il est très facile de modifier le style grâce au CSS personnalisé. De nombreuses options de style sont disponibles et vous pouvez en trouver beaucoup sur différents sites web. Certains styles correspondent mieux que d’autres à votre thème actuel. Cela rend votre choix très important.

En relation  Comment créer une classe CSS paire/impair dans WordPress

Comment changer le style des citations dans les thèmes WordPress

Aujourd’hui, je vais vous montrer comment changer le style des citations dans WordPress. Il existe des centaines de styles de citations possibles sur Internet. Bien sûr, si vous n’êtes pas satisfait d’un style particulier ou si vous voulez simplement changer une couleur, une police ou autre chose, ne vous inquiétez pas, vous pouvez le faire. Je vais d’abord vous expliquer comment ajouter un guillemet, puis comment ajouter le CSS personnalisé nécessaire pour modifier le style. Enfin, j’énumérerai quelques-uns des styles de citations populaires disponibles.

Comment ajouter une citation en bloc dans WordPress

Dans le panneau d’administration de gauche, cliquez sur Articles ou Pages. Sélectionnez soit un nouveau message ou une nouvelle page, soit un message existant. Trouvez une citation que vous souhaitez ajouter et collez-la dans l’éditeur. Mettez en évidence le texte que vous souhaitez mettre en forme.

Si vous n’êtes pas dans l’onglet texte, passez à celui-ci. Cliquez sur le bouton “b-quote” et votre texte mis en évidence sera transformé en citation.

La citation par défaut est très basique et centrera simplement la citation. C’est grâce au CSS personnalisé que le guillemet se distinguera du reste du texte.

Comment ajouter un CSS personnalisé dans WordPress

Dans le panneau d’administration de gauche, cliquez sur Apparence et sélectionnez l’option Personnaliser.

En bas à gauche, cliquez sur l’option CSS supplémentaire. Une zone de texte vous permettra d’insérer un code CSS personnalisé. Insérez le code CSS personnalisé ici.

Maintenant que vous savez comment ajouter du code CSS personnalisé à WordPress, il est temps de se pencher sur certaines des options de style disponibles. N’oubliez pas que vous pouvez modifier n’importe lequel de ces styles, y compris la couleur et la police.

En relation  Comment utiliser l'éditeur visuel de WordPress avec des styles personnalisés

Options possibles de style de citation

Il existe de nombreuses possibilités de style de citation sur Internet. Je vais vous faire part de quelques-unes des meilleures que j’ai pu trouver. N’hésitez pas à partager celles que vous aimez ci-dessous dans la section des commentaires.

Les styles dont le code comporte la mention “Insert Image URL Here” doivent être pris en compte lors de la sélection d’un style. Cela signifie que vous devez avoir l’URL de l’image que vous souhaitez inclure.

N’oubliez pas que vous devrez sélectionner à nouveau le texte et cliquer sur le bouton “b-quote” pour appliquer tout nouveau CSS que vous placez sur votre site web.

Citation avec image

C’est un style de citation simple et populaire. Cela vous permettra de mettre une image derrière une citation particulière. C’est un excellent choix car vous pouvez mettre le logo de la source derrière la citation pour vous assurer qu’il est clair d’où elle vient. Dans mon cas, j’ai utilisé une citation d’Albert Einstein, donc j’ai aussi utilisé sa photo.

J’ai délibérément laissé quelques erreurs ici, regardons. Comme vous pouvez le voir, l’image est coupée, alors assurez-vous d’en utiliser une de bonne taille. Une autre erreur est que la couleur du texte se fond dans le choix de l’arrière-plan. Il ne sert à rien d’afficher une citation si celle-ci n’est pas lisible.

Il suffit d’insérer le CSS personnalisé suivant pour utiliser ce style. Assurez-vous de changer l’URL de l’image de fond en une véritableCitation simple des coins arrondis

Si vous n’êtes pas partisan de placer une image ou un logo derrière une citation, ne vous inquiétez pas, il existe de nombreuses autres possibilités. Celui-ci, en particulier, est très simple et s’adapte à la plupart des thèmes.

En relation  Comment créer un formulaire de commentaires des clients dans WordPress

Il suffit d’ajouter ce CSS personnalisé à votre site web:

Citations entre parenthèses

Celui-ci est mon préféré parce qu’il est simple et qu’il est très beau. Vous pouvez changer la couleur des parenthèses pour qu’elle corresponde à la couleur de votre thème, ce qui fait qu’elle fonctionne sur n’importe quel thème.

Il suffit d’ajouter ce CSS personnalisé à votre site web:

Gradient Blockquote

Les dégradés sont toujours un choix élégant et ils fonctionnent très bien avec des citations en bloc. Si cette couleur de base ne correspond pas à votre thème, modifiez le choix de couleur pour l’adapter à vos besoins.

Il suffit d’ajouter ce CSS personnalisé à votre site web:

Choisissez le style qui convient à votre site web

Comme vous pouvez le voir, les options sont presque infinies car chaque style peut avoir des couleurs et des polices différentes. Ces changements peuvent séparer radicalement une citation d’un autre et s’adapter à n’importe quel thème. C’est très important, car vous voulez éviter que votre citation ne corresponde pas au reste de votre site web.

Cela peut paraître étrange car une citation est censée se détacher du reste du texte, mais elle ne doit pas se détacher de votre site web. Par exemple, un fond bleu et un guillemet rose ne sont pas très esthétiques. Bien sûr, si pour une raison quelconque vous ne trouvez pas de style correspondant à votre thème, vous pouvez toujours envisager d’en installer un nouveau.

Quelle est votre citation préférée ? Avez-vous changé la couleur et la police de caractères pour mieux correspondre au thème de votre site web ?