Archives des infographie dans wordpress - st9ph.fr https://st9ph.fr/tag/infographie-dans-wordpress/ la boite à outils numériques Mon, 23 Feb 2026 16:21:09 +0000 fr-FR hourly 1 https://wordpress.org/?v=6.9.4 https://st9ph.fr/wp-content/uploads/2026/02/cropped-ico-fav-32x32.png Archives des infographie dans wordpress - st9ph.fr https://st9ph.fr/tag/infographie-dans-wordpress/ 32 32 199087513 WordPress | trucs et astuces pour embellir vos articles https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/ https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/#respond Mon, 15 Dec 2025 18:56:51 +0000 https://st9ph.fr/?p=31267 WordPress | trucs et astuces pour embellir vos articles ✨ Un petit tour d’horizon 🌤️ de petits tips, méthodes et outils que, je l’espère, vous trouverez utiles pour rendre vos articles plus esthétiques que le traditionnel enchainement paragraphes – images.. ➡️ Cet article va évoluer avec le temps, au fur-et-à-mesure que je penserai à d’autres ... Lire la suite

L’article WordPress | trucs et astuces pour embellir vos articles est apparu en premier sur st9ph.fr.

]]> WordPress | trucs et astuces pour embellir vos articles ✨

Un petit tour d’horizon 🌤️ de petits tips, méthodes et outils que, je l’espère, vous trouverez utiles pour rendre vos articles plus esthétiques que le traditionnel enchainement paragraphes – images..

➡️ Cet article va évoluer avec le temps, au fur-et-à-mesure que je penserai à d’autres trucs. 👀 Revenez de temps en temps par ici au cas où …

Part d’IA /5 dans cet article

♨️ Sources
🖼️ Images
✒️Contenu

⏱️Temps de lecture :

10–15 minutes

|

2 427 mots

|

🗓️ dernière modification le

Au menu :
  1. 1️⃣| les emoji pour renforcer votre texte
  2. 2️⃣| utilisez toutes les possibilités de vos blocs
  3. 3️⃣| Illustrez facilement vos contenus
  4. 4️⃣| L'infographie plutôt que des mots
  5. 4️⃣| Un soupçon de HTML
📖 Lecture : 0 %

1️⃣| les emoji pour renforcer votre texte

⚠️ A utiliser avec modération, les emoji vont traduire vos humeurs et votre ton. 👍Cela ajoute de la convivialité.

🖥️ La manipulation est simplissime sous Windows. Durant votre saisie dans une bloc paragraphe ou autre, à l’endroit ou vous voulez voir apparaitre le smiley :

  • combinez les touches Windows et Point
  • sélectionnez l’emoji souhaité (ou recherchez le dans la barre)

Le tour est joué ! 👌

Avec un Mac, je ne sais pas et je ne veux pas savoir. 😉

A l’examen, vous aurez un PC sous Windows, de toute manière. 😛

⌨️ Allez ! Parce que c’est vous : 🍏 Pour la pomme croquée, c’est Command + Ctrl + espace.

2️⃣| utilisez toutes les possibilités de vos blocs

👉 Les blocs n’exposent pas tous leurs atouts sur la barre d’outils, cliquez sur la Flèche ▽ pour les découvrir tous.

👈 ici, celle des paragraphes (mais tous ceux qui proposent de la saisie on la même).

Vous n’êtes pas obligé(e), par exemple, d’appliquer la couleur du paragraphe à tout le texte.

Google

Pour la construction ci-dessus, j’ai juste utilisé un bloc paragraphe que j’ai centré et demandé en taille L. J’ai ensuite changé la couleur de chaque lettre avec l’outil “mettre en évidence“, puis j’ai ajouté un screenshot directement dans le bloc avec l’outil “image en ligne“.

On verra plus loin comment faire une infographie avec le contrôle Numbers de Spectra mais il y’en a plein d’autres qui sont sous-utilisés.

👉 Vous pouvez aussi installer d’autres blocs par le biais d’extensions. Ici, le contrôle 🖼️ Image d’Ultimate Blocks qui permet d’encadrer, de rogner, de recolorier …

3️⃣| Illustrez facilement vos contenus

⚠️ Attention : à l’examen NDRC E5B, vous devrez vous contenter de ce qu’il y’a déjà dans la médiathèque et, éventuellement, des media contenus dans le dossier du bureau en rapport avec votre sujet.

❌ L’usage des outils vu dans les deux premières sections de cette partie est proscrite (sauf consignes contraires dans le sujet).

3-1 | Instant Images, une bibliothèque libre de droits

Instant Images est une extension gratuite qui permet de téléverser directement des images des bibliothèques en ligne gratuites (libres de droit). Unsplash, Openverse, Pixabay, Pexels et Giphy.

C’est quoi une image libre de droits ❓

C’est une image dont l’auteur (photographe, designer, dessinateur … ) a abandonné les droits de propriétés, ce qui vous évite de demander une autorisation est de légender un © copyright (alt+ 0169)

Cette extension vous donnera un choix supplémentaire du menu Médias dans le tableau de Bord de votre Back Office.

  • Cliquer dessus
  • tapez un mot clé dans le moteur de recherche
  • Choisissez votre source parmi Unsplash, Openverse, Pixabay, Pexels et Giphy.
  • Cliquez sur l’image que vous préférez, elle sera directement téléversée dans la médiathèque

ℹ️ A noter que Giphy est plus une banque animées mais pourquoi pas !

3-2 | Utilisez l’IA pour générer des images

Google Gemini (par exemple) donne la possibilité de créer gratuitement des images pour illustrer vos articles. le nombre d’essais par jour est toutefois limité.

👉🏻 Le premier essai sera parfois différent de ce que vous imaginiez mais vous pouvez lui demander de corriger !

👈🏻 Ici, je trouve que la façon dont sont habillées les trois jeunes femmes sont trop semblables et que le fond fait trop “English College”.

💡 Petit tips, Dites lui “merci” quand vous obtenez un résultat qui lui convient, même si je suis d’accord avec vous, c’est débile de dire merci à une machine. Notez aussi que j’ai fait une faute de frappe dans ma requête mais qu’il a compris quand-même !😁

Deux utilités si vous le faites :

  • Gemini apprend vos gouts et oriente son travail sur ce qui vous satisfait (machine learning)
  • Ca vous donne des tentatives journalières supplémentaires si vous êtes poli(e).

3-3 | Utilisez des contrôles dynamiques pour vos media

Voici un aperçu de trois contrôles qui permettent d’aménager un contenu riche en illustrations afin de ne pas saturer l’espace de votre article (et créer un déséquilibre)

J’ai utilisé les illustrations de cet article du blog d’entrainement en exemple.

👇 cliquer sur les onglets pour voir les différentes compositions.

Dans la section Media, vous trouverez le bloc story, qui permet d’ouvrir automatiquement un onglet Story pour jouer une histoire à partir d’images et de vidéos (que vous pouvez mixer) depuis votre médiathèque. cliquez sur la Story ci-dessous pour la jouer.

Icône de site
WordPress | trucs et astuces pour embellir vos articles

Idem pour le diaporama avec un réglage diapositives ou fondu au choix. Là, c’est uniquement pour des images.

Enfin, la galerie, qui permet de mettre en valeur certaines images par rapport à d’autres

4️⃣| L’infographie plutôt que des mots

J’en ai déjà parlé ici mais j’insiste. Des visuels de style “tableau de bord” avec des KPI appropriés vaudront tous les discours.

Prenons l’exemple du paragraphe ci-dessous :

Le référencement auprès de Google est une évidence. 94% des internautes effectuent leurs recherches avec ce seul moteur ! 42% ne dépasse jamais la première page de résultats (SERP) et ils sont 15 % à atteindre la page 3 ! Quand on sait que la mesure Google Lighthouse des boutiques en ligne donne un score moyen SEO de 65 / 100, il y’a encore pas mal de boulot pour les webmasters afin de les rendre visibles !

On peut dire exactement la même chose ainsi :

%
des SERP sont demandées
à Google
%
des internautes vont
en page 2 des SERP 👀
%
dépassent la page 2 ↗️

source abc.net

Score moyen SEO
des Eshops
➡️ J’ai utilisé le contrôle Spectra “Counter” pour ces 4 indicateurs.
une SERP, c’est le truc qu’utilisaient les druides pour couper du gui ? 🔪

Pas tout à fait ! SERP pour Search Engine Result (ou Response) Page = la page de résultats d’une recherche

Lighthouse, c’est une boite de nuit dans le coin ? 🫠

Non plus ! Le lighthouse est un outil de mesure de la performance SEO inclus dans Chrome. Clic droit sur la page à mesurer – inspecter – menu chevrons >> du panneau qui apparait – Lighthouse – lancer l’analyse.

4️⃣| Un soupçon de HTML

👉🏻 Je sais ce que vous allez me dire : “On est pas développeur, nous !” et vous aurez raison, mais j’ai pas mal simplifié les choses pour vous.

🔴Tout ce chapitre 4️⃣ n’est bien évidemment pas au programme de 🖥️ l’épreuve technique mais pour votre connaissance personnelle.

4-1 | Utiliser des blocs HTML personnalisés

➡️ On avait déjà vu dans un autre article comment faire des textes défilants un intégrant un texte sous la forme ci-dessous à l’intérieur d’un 🔹bloc HTML Personnalisé.

<marquee> ✨ trop top 👍🏻 le blog st9ph ! On apprend plein de choses ! ✨ </marquee>

Ca donnait ça 👇🏻 :

✨ trop top 👍🏻 le blog st9ph ! On apprend plein de choses ! ✨
➡️ Bon, le but n’est pas non plus de transformer votre article en facade de Time Square🗽 mais utilisé avec modération, cet effet attirera le regard vers une information clé 🔑

👆🏻 C’est cette méthode que j’utilise pour mes petits blocs comme celui ci-dessus. Je voulais un peu le style des blocs citations mais avec un fond coloré.

➡️ Il m’a fallu 2 choses :

  • un composant que je balise en <div class=“nom du composant“> contenu (notre texte) </div>
  • une “feuille de style” où je définis mes attributs de “décoration”

👉🏻 Il y’a un peu de travail pour trouver le bon dosage :

➡️ il me faut pas mal d’attributs aussi :

  • La bordure gauche
    • sa taille (Size) en pixels (px)
    • sa courbure (radius)
  • le fond
    • sa couleur (background) en héxadécimal
    • sa marge (margin)
    • son remplissage (taux en px)
  • la police
    • sa taille (font-size)
    • son type (font-family)
    • sa couleur

Vous pouvez trouver le code hexa de couleur avec la palette des blocs texte ou titre :

👈🏻 basculez de “HTML” à “Prévisualiser” chaque fois pour voir le résultat en “live”

➡️ Il ne reste plus qu’à tout assembler dans une balise de style :

<style>

bloc.nom du composant {

  border-left: 4px solid #1e73be;

  background: #f5f9ff;

  padding: 12px 18px;

  margin: 20px 0;

  font-size: 15px;

  color: #0f172a;

  border-radius: 4px;

  font-family: Arial, sans-serif;

} </style>

➡️ Je place cette balise sous la déclaration de mon composant :

<div class=”nom du composant”>

votre contenu

</div>

<style>

<- ce qu’on a écrit à côté (vos attributs)

</style>

😥 Je sais que ça peut faire un peu peur, mais je m’adresse ici surtout à ceux qui ont envie de coder un peu.

➡️ Vous pouvez aussi mettre en forme votre contenu (dans la balise div) :

🔵 Mettre en gras (balise strong)

<strong> le texte en gras </strong>

🔵 Mettre en italique (balise em)

<em> le texte en italique </em>

🔵 Souligner (balise u)

<u> le texte souligné </u>

🔵 Mettre en couleur (balise span en attribut color)

<span style=”color:blue;”> Texte en bleu </span>

votre contenu en gras si vous voulez ou en couleur ou en italique ou souligné
bloc-exempleTélécharger

👆🏻 Téléchargez le fichier ci-dessus que vous aurez juste à copier coller (après l’avoir ouvert) dans un bloc HTML personnalisé si vous souhaitez reproduire le composant juste au dessus.

4-2 | Les enregistrer sous forme de compositions

👉🏻 Vu le travail que cela a demandé, on ne va pas recommencer à chaque fois. Il suffit de créer une composition avec le bloc html que vous avez créé pour qu’il soit disponible ensuite, comme n’importe quel autre bloc, comme un modèle, en fait.

  • cliquer sur le menu hamburger 🍔 (les 3 points tout au bout) de la barre flottante de votre bloc
  • Choisir Créer une composition
  • Saisissez le nom que vous souhaitez pour le modèle de bloc
  • Cliquez sur catégories
  • Classez votre composition dans la catégorie que vous souhaitez
➡️ un conseil : Faites-le ! Sinon, ça va vite devenir un problème pour le retrouver si vous en créez beaucoup
  • Cliquer sur 🟦 Ajouter

👉🏻 Votre composition vous attend sagement dans le liste des blocs Gutenberg !

  • Cliquer sur le de la barre d’éditeur ou de votre nouveau bloc
  • Tapez les premières lettres de votre contrôle
  • Cliquez dessus pour le choisir
⚠️ Attention : pour l’instant, il est inerte car il faut le détacher du modèle pour pouvoir le modifier.
  • Cliquer sur le menu hamburger 🍔
  • Choisir “Détacher” (du modèle)

👉🏻 Votre bloc est redevenu un HTML personnalisé indépendant que vous pouvez modifier librement sans affecter votre composition enregistrée 💾

👈🏻 Vous pouvez retrouver aussi vos compositions dans l’onglet “compositions” de l’éditeur de blocs.

👉🏻 Vous pouvez aussi modifier l’original soit :

  • en cliquant sur “modifier l’original” de la barre flottante du bloc
  • Dans Apparence > Design
⚠️ Si vous modifiez l’original tous les articles et pages où vous aviez inséré la composition sans la détacher seront modifiés aussi.

➡️ Pour résumer :

  • si vous utilisez les compositions sous forme de matrice (modèle à modifier)
    • insérez la composition et détachez la
    • Modifiez ensuite cette composition librement (elle est redevenue un bloc normal)
  • Si vous utilisez les compositions sous forme de bloc invariable
    • insérez la composition sans la détacher
    • Si vous devez faire évoluer la composition, cliquez sur “modifier l’orignal” (elle sera modifée partout où elle apparait

📚 Voyez aussi un tour d’horizon complet des contrôles Spectra dans cet article, Gardez en tête l’HABI et proposez les outils et méthodes suggérées dans cet autre article, et vous deviendrez rapidement un auteur WordPress qui aura une foule d’abonnés ! 😉

blog st9ph

📚 Sources

  • 🔌 – Ultimate Blocks – Extension utilisée pour les images (arrondis, rognage …)
  • 🔌 – InstantImages – Extension utilisée pour la bibliothèque d’images supplémentaire (Unsplash, Pixabay …)
  • 🔊 Voicertool – introduction parlée
  • 🌐 Nano Banana Pro de Google Gemini – génération d’image par IA
blog st9ph

🧑‍🎓 NDRC

🟦 Cet article est à visée de l’épreuve technique E5B.

  • savoir mettre en forme un article ou une page
  • savoir utiliser les blocs Spectra

👉 les générations IA, Instant Image, Ultimate Blocks et le codage HTML sont hors programme

blog st9ph

📘 Glossaire

  • Infographie : dire par par des schémas, des KPI, des images, des icones avec peu de commentaires
  • SERP : Search Engine Result (ou Response) Page
  • Lighthouse : outil d’audit de site de Google Chrome
  • Marquee : balise HTML de texte défilant
  • Menu Hamburger : menu symbolisé par des points ou des traits verticaux (très utilisé en UX Mobile)

donnez votre avis (star ranking) en bas de cette page

⬇️

Accueil » infographie dans wordpress

L’article WordPress | trucs et astuces pour embellir vos articles est apparu en premier sur st9ph.fr.

]]> https://st9ph.fr/wordpress-trucs-et-astuces-pour-embellir-vos-articles/feed/ 0 31267