Citer avec le bloc « citation »

Il y a des mots qui méritent d’être mis en avant, et de ressortir dans vos contenus. Des monuments de sagesse ou des punchlines qui marquent les mémoires, ces grands moments trouveront une place bien au chaud dans un bloc « Citation ».

Usage et mise en forme du bloc citation

Un bloc qui affiche clairement sa fonction !

Il s’apparente à un bloc « Paragraphe » dans le sens où on peut saisir librement du texte, auquel sera attribué un style différent de manière à le mettre en avant, pour lui permettre de rythmer les mises en page des contenus de vos sites WordPress, et d’humaniser certaines prises de paroles en citant des personnes. On recommande de l’utiliser avec des textes courts pour en augmenter l’impact.

Commençons par présenter ici même la fonction du bloc citation, son apparence et une manière parmi d’autres de l’utiliser :

« Quand un lecteur scanne votre contenu, son attention se portera naturellement sur les phrases mises en avant dans un bloc Citation »

Formation Gutenberg, conseiller en utilisation de blocs

Le rendu visuel se différencie donc du bloc « Paragraphe » grâce à un trait vertical qui marque visuellement la zone de la citation, et par la zone réservé à la source de la citation, ici représentée en petits caractères grisés dans une police sans empattements. Pour mieux faire ressortir le propos intégré dans la citation, nous l’avons mis en gras, option disponible dans la barre d’outils du bloc.

Barre d’outils de mise en forme du texte intégré dans un bloc « Citation »

On peut donc voir sur l’image ci-dessus qu’on peut également mettre le texte en italique et lui apposer des liens hypertextes.

Le bloc dispose également de plusieurs options d’alignement du texte : à gauche (comme sur le premier exemple de citation), centré et à droite. Voici le rendu d’un bloc citation avec texte centré :

« Le texte centré
offre une variation de mise en page
qui peut devenir
une respiration bienvenue »

Formation Gutenberg, formateurs en contenus qui ont du souffle

On constate rapidement que l’alignement centré s’épargne la barre séparatrice latérale, le décalage d’alignement étant suffisant pour mettre en avant le contenu.

Voyons maintenant ce que peut donner un bloc « Citation » aligné à droite :

« L’alignement à droite, c’est un positionnement disruptif
qui vient interloquer et interroger le lecteur »

Formation Gutenberg, hackers de l’attention

Vous pouvez constater qu’on a également mis le texte de la citation en italique. Vous avez donc désormais un aperçu des possibilités offertes par le bloc citation. Toutes ? Non, car elles ne concernent que le style « Par défaut ».

Styles et options du bloc citation

Sur la barre latérale de Gutenberg, vous trouverez de nouvelles options de style pour votre bloc « Citation »

Des options supplémentaires pour vos blocs « Citation » !

On peut donc constater que le bloc « Citation » dispose également d’un style « Grand », dont l’apparence varie par rapport à tous les exemples cités plus haut ! Alors, à quoi ressemble une citation à laquelle on applique le style « Grand » ?

« Pour de grandes paroles, il faut de grandes lettres en italique« 

Formation Gutenberg, des citations percutantes

On le voit, la taille de caractères est plus grande, et est déjà stylisée en italique (cocher le style italique ne change donc rien à l’apparence du texte). En revanche, on peut encore ajouter du relief en applicant le style « gras ».

Quel que soit l’alignement, la barre latérale disparaît dans ce style, la taille considérable des caractères suffisant à démarquer la citation de l’ensemble du contenu.

Enfin, la dernière option de mise en forme est dans l’application d’une classe CSS additionnelle à son bloc citation : réservée à un public avancé, cette option permet de jouer sur les classes CSS implémentées sur votre site pour modifier la forme et la fonction de votre citation. Si vous ne comprenez pas ce dernier point, c’est que vous n’en avez pas besoin !

Nous voilà arrivés au bout, nous avons fait le tour de ce bloc « Citation » qui vous rendra bien des services éditoriaux, tout comme son grand frère, le bloc « Citation en exergue » !